SAP UI5 access value of oData model

Question

I'm getting started with SAPUI5 these weeks and built my first app that displays some data. I even managed to do some filtering but now I encounter an error that I do not understand.

My oData Model has the following structure:

Notice('0000'):
  Value0: abc
  Value1: def
  Value2: ghi


Notice('0001'):
  Value0: abc
  Value1: def
  Value2: ghi

I have a table holding the data:

<Table
    id="noticeList"
    class="sapUiResponsiveMargin"
    width="auto"
    items="{
        path : '/Notice',
        sorter : {
            path : 'Value0'
        }
    }">

...some header stuff and column delaration...

      <items>
        <ColumnListItem
             id="noticeColumnListItem"
             items="{
                path : '/Notice'
            }">
            <cells>
                <ObjectStatus text="{Value0}"/>
                <ObjectStatus text="{Value1}"/>
                <ObjectStatus text="{Value2}"/>
           </cells>
        </ColumnListItem>
    </items>
</Table>

Now, I want to access the Data of my Model (no matter if before or after rendering). I do not have a event to trigger this, I just need the information as soon as the model data was transferred.

So I searched a little and found the following:

var myValue = this.byId("noticeList").getModel().getProperty("/Notice/Value0");

I tried every possible path but always end up in that myValue is undefined. When I dump my model, I can see that it holds an object oData with the needed values. Also, my list is dispayed correct but I just don't manage to read a single value from the Model.

This is how I instanciate it in Component.js:

config: {
    fullWidth: true,
    resourceBundle: "i18n/messageBundle.properties",
    serviceConfig: {
        name: "MYJOBS",
        serviceUrl: "/sap/opu/odata/sap/PATH_TO_SERVICE"
    }
},

// Read service URL
var sServiceUrl = mConfig.serviceConfig.serviceUrl;

// Create and set domain model to the component

var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl, {
    json: true,
    loadMetadataAsync: true
});

oModel.attachMetadataFailed(function() {
    sap.ui.getCore().getEventBus().publish("Component", "MetadataFailed");
}, this);

//var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl);
this.setModel(oModel);

Maybe I should also mention that I don't use index.html to load the app but do this via Fiori Launchpad and Component.js

I spent hours over hours on this problem and can't find a solution, I hope someone can help...

Kind regards!

Answer 1

If you are calling a remote service the most common cause of an undefined scenario is the delay in returning the data with the other code continuing to execute (as you are calling your service asynchronously).

If you are trying to act on the returned data then you could do this by attaching an event listener / anonyomous function in the following manner:

oModel.attachRequestCompleted(function(){
                    // do something
                });

In your scenario your controller code could be changed to look as follows:

 onInit: function() {

   var sServiceUrl = "/sap/opu/odata/sap/yourPathSRV/";
   var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl);
   oModel.attachRequestCompleted(function(){
                    // do something
                });
   this.getView().setModel(oModel);
}

Answer 2

Bernard's answer was the solving one!

The problem was that I tried to access the data too early. I'd alerady tried to avoid this by using a self-built sleep function but this failed (because sleeping just extended the request time).

This has done the trick:

this.byId("noticeList").getModel().attachRequestCompleted(function(oEvent){

    var model = oEvent.getSource();

    var myNeededValue = model.getProperty("/NoticeSet('0001')/Value0"));

});

Thanks a lot!

Answer 3

First of all, I hope I get everything right und you get my Point at the end :-)

For the correct element structure of folders etc you should get the trial version of Web IDE and use the template "SAPUI5". Don't underestimate the structure :-)

The structure of your app should be:
Parent Folder
webapp folder
on the same level now: component.js / index.html and folders (eg for views and controller or i18n)

1) Component.js / manifest.json (in newer versions > 1.32)
--> it contains only information about the model instanciation, i18n instance, service url, target and route pattern. No model loading in here!

config: {
    fullWidth : true,
    resourceBundle: "i18n/messageBundle.properties",
    serviceConfig: {
        type: "OData",  // type is missing
        uri: "/sap/opu/odata/sap/PATH_TO_SERVICE" // use uri as property
    }

},

2) Controller (in onInit-hook-method)

 onInit: function() {

   var sServiceUrl = "/sap/opu/odata/sap/yourPathSRV/";
   var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl);
   this.getView().setModel(oModel);

}

3) View (content area)

<mvc:View controllerName="TEST.controller.Main"
   xmlns:l="sap.ui.layout"
   xmlns:mvc="sap.ui.core.mvc" 
   xmlns="sap.m">
 <App>
  <pages>
   <Page title="{i18n>title}">
    <content>
    <List id="yourListId" items="{/Notice}">
      <StandardListItem description="{Value0}" title="{Value1}"/>
     </List>
    </content>
   </Page>
  </pages>
 </App>
</mvc:View>

4) Backend

--> You need to implement GET_ENTITYSET - method to read "multiple" notice-entities :-)