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

Question

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!

Update

If I used a JavaScript-View instead of an XML-View, I could simply implement my fillDropdown function in the onAfterRendering function of my View. But why do XML Views not throw lifecycle hook events?

Update 2

I also can't use the onAfterRendering of my View Controller; oView.getModel().getProperty("/SalesOrderCollection/0"); returns no object because the content of my model is (whyever) only available after the hook functions.

aborjinik aborjinik · Accepted Answer · 2014-07-11T00:06:13

onInit, onBeforeRendering, onAfterRendering, onExit are lifecycle events. You do not need to register from view. Your function should be called when you implement independent from the view type. Please have a look at here http://jsbin.com/hiyanuqu/1/edit

BTW, there is a similar built in control in sap.m library called Input with Suggestion. https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/explored/index.html#/sample/sap.m.sample.InputSuggestionsCustomFilter

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

1 Answers