SAP UI5: Fill XML-Dropdown dynamically using Lifecycle Hook Function



I've done the Tutorial for building Fiori-like UIs with SAPUI5 and tried adding a sort-function.


The Dropdown-Box is filled with the Names of the JSON-Model-Data:



{
"SalesOrderCollection": [
{
"SoId": "300000097",
"ApprovalStatus": "",
"Status": "Initial",
"ConfirmationStatus": "",
"BillingStatus": "Initial",
...
} ...


I implemented this function in my View Controller to fill the dropdown:



fillDropdown : function(evt) {

// Get current view and dropdownbox
var oView = this.getView();
var oDropdown = oView.byId("ddbox");

// Get names of nodes in model
var metaArray = Object.getOwnPropertyNames(oView.getModel()
.getProperty("/SalesOrderCollection/0"));

// Add every name to dropdownbox
var arrayLength = metaArray.length;
for ( var i = 0; i < arrayLength; i++) {
oDropdown.addItem(new sap.ui.core.ListItem("item" + i)
.setText(metaArray[i]));
}
}


Finally, here comes my problem:


How can I run this function automatically when the View gets rendered? I know the lifecycle hook functions onInit & onBeforeRendering but I can't use them in my XML-View:


I can register the eventhandler for UI-Elements like here:



<uicom:DropdownBox id="ddbox" editable="true" change="handleListSort">


But not for the View or the Page like I tried here:



<Page title="myPage" onBeforeRendering="fillDropdown">

<core:View controllerName="sap.ui.demo.myFiori.view.Master" (...) onBeforeRendering="fillDropdown">


Possible dirty workaround: Call the function when clicking on the Sort-Button in the IconTabBar



<IconTabBar select="fillDropdown">




Thanks for your help!


No comments:

Post a Comment