[sapui5] Best Practice in sapui5 development
Hi,
Use property "keyboardMode" of ListBase. Set it to value "sap.m.ListKeyboardMode.Edit" and it would allow users to use TAB to move to the next cell in a table (the same behavior in MS Office table).
Why not "master" before "object".
Well, its because of the default logic in the master-detail template of SAPUI5.
Because in Object.controller, the function needs to be called first to select the correct item in the master page. That's why they put "object" first in the manifest, indicate that the target "object" will be called first, before the target "master".
Hope that help.
Based on my experience, the best event to put the _handleStartupParams() function is inside the onRouteMatch() event handler of the first screen (not the App.controller.js - I tried to put here but it failed).
---V---
Small Tips but no many knows:
- Use this.getResouceBundle().getText(sKey, aParam)
- Use BaseController (instead of creating a Util service).
- Odata Model resetChanges() & submitChanges() ('TwoWay' binding required).
- Odata Model resetChanges() & submitChanges() ('TwoWay' binding required).
Allow TAB to navigate within a table:
Use property "keyboardMode" of ListBase. Set it to value "sap.m.ListKeyboardMode.Edit" and it would allow users to use TAB to move to the next cell in a table (the same behavior in MS Office table).
API:
Advanced JS technique to shorten your code:
Below hand-on with explanation will help you to shorten your frontend code a lot. Make the code more succinct, readable & easier to maintain.
Keep in mind the mindset:
Think "everything is a list". Think "pipeline". Think "immutability". Think "what, not how".
Export data from table to Spreadsheet (Excel) format
With sapui5 version 1.52, the library supports you to download data from Backend service (OData or JSON) without the need of using 3rd party library:
Meaning of order of target in manifest in master-detail app
Have you wonder what the order of master-detail like this:Well, its because of the default logic in the master-detail template of SAPUI5.
Because in Object.controller, the function needs to be called first to select the correct item in the master page. That's why they put "object" first in the manifest, indicate that the target "object" will be called first, before the target "master".
Hope that help.
Remember to keep one blank parameter when config new Running mode:
Auto-reduce width of sap.ui.table when used in Smart table
If you got an issue like below screenshot.
- The best solution I found so far is to loop through all columns and set the width to 100%:
/**
* Resize all columns of sap.ui.table
* @constructor
* @param oTable {sap.ui.table.Table}
*/
_resizeColumns: function (oTable) {
var aCols = oTable.getColumns();
var iLen = oTable.getColumns().length;
for (var i = 0; i < iLen; i++) {
// oTable.autoResizeColumn(i);
aCols[i].setWidth("100%");
}
}
- You can try this simple method (by sapui5 framework): (but it may not work as intended - make all columns too small)
/**
* Resize all columns of sap.ui.table
* @constructor
* @param oTable {sap.ui.table.Table}
*/
_resizeColumns: function (oTable) {
var aCols = oTable.getColumns();
var iLen = oTable.getColumns().length;
for (var i = 0; i < iLen; i++) {
// oTable.autoResizeColumn(i);
aCols[i].setWidth("100%");
}
}
- If it does not satisfy your needs, you can run some JS to reduce the columns' width based on the maxLength annotation sent in the metadata; but of course, it would require more coding. Details can be found here.
---V---
Nhận xét
Đăng nhận xét