How to access UI5 model data

Old habits are not easily dying and replaced by best practices and general recommendations. In the early days, when UI5 started to gain traction, people discovered it, tried it out, wrote apps, made them somehow work. Everybody was learning, and things we can do today were not possible or known then. Changes to the documentation, API and recommendations are simply the result of lessons learned.

As UI5 apps are based around a model, its data, representation and manipulation, a lot of questions around UI5 development are about the model: how to access data, change, update or delete it. A good thing of UI5 is that it is following semantic versioning, and code written for UI5 1.1x or 1.2x will still work with latest versions like 1.5x. It doesn’t mean that you, as a developer, should simply copy & paste example code found somewhere.

Example

After loading the model, be it JSON or OData, you may have to access a specific property in you code. What you can find in the Internet is code like:

oData

var oData = this.getView().getModel().oData;
var firstname oModel.getModel().oData[entity].firstname;
var name = oData[entity].name;

JSON

var oData = this.getView().getModel(“device”).oData;
var osname = oModel.oData.os.name;
var osname = this.getView().getModel().getData().os.name;

First line will give you the model data object, 2nd and 3rd line the property osname of the model. The 3rd line is partly correct, as the access to the data is done through a method, but access to property name is done directly. You can work with the data object now directly, but you shouldn’t. What you want is not to work with the raw data that defines your model, but with properties.

Use access methods

Data binding is important when developing an UI5 app. You update properties, and you want to have the UI elements automatically be updated too. When accessing the properties directly, you have to check if the change is correctly propagated. Using access methods, UI5 will for sure take care of this. The method to access properties of your data model are getData, getProperty or getObject. Applying this to above code:

JSON

var oData = this.getView().getModel().getData();
var osname = this.getView().getModel(“device”).getProperty(“/os/name”);

OData

var entity = this.getView().getModel().getObject("/"+key);
var property = this.getView().getModel().getProperty("/"+key+"/Depth");

This is now only using the methods to access data. To alter the property, use the setProperty method.

OData

this.getView().getModel().setProperty("/"+key+"/Depth", 11.111)

JSON

this.getView().getModel("device").setProperty("/os/name", "windows")

The above examples may not be perfect. They show that UI5 offers methods to access model data. Using these methods your code will continue to work in the future and is guaranteed to work in future releases of UI5. Direct access to the model data is done at your own risk. In case you work on a UI5 app, use the access methods. If you work on an older app that uses direct access to the model, try to refactor the app. The change from oModel.oData to oModel.getData() is as simple as executing a find and replace.

 

FND – 6 – Subscription and Notification Flow

The configuration steps to be executed on the HUB system (FND) are detailed at SAP Help.

  1. Maintaining Inbound bgRFC Queue on the Hub System Blog SAP Help
  2. Create outbound destination for content publisher Blog SAP Help

FND – 62 – Create outbound destination for content publisher

The configuration steps to be executed on the HUB system (FND) are detailed at SAP Help.

  1. Maintaining Inbound bgRFC Queue on the Hub System SAP Help
  2. Create outbound destination for content publisher SAP Help

This document explains how to execute step 2.

When a mobile user subscripes for push notification, he/she basically informs SAP Gateway to receive updates on a collection. As Gateway handles subscriptions in a pretty abstract way, the user needs to inform some information during the subscription process. One of these informations is the communication channel. This channel corresponds to a HTTP destination created at the HUB system.
SAP Help

A user subscribing will pass the following channel information to Gateway: urn:sap-com:channel:<CHANNEL_NAME>/<unique_ID_of_device

The first part (urn:sap-com:channel) is used by OData as a keyword to filter and extract the name of the channel. The channel name is a HTTP destination created in SM59. I’ll use SMP_PUSH. This implies that you can have several push destinations for a single SAP Gateway system.

No SPRO activity

All activities are done on the SAP Gateway HUB (FND) system.

  1. Create HTTP Destination
  2. Transaction SM59


  3. New Destination


  • RFC Destination: SMP_PUSH
  • Connection Type: G


  1. Go to tab “Technical Settings”
  • Target host: Host of SMP 3 (smp3.tobias.de)
  • Service No: HTTP Port of SMP 3 (8080, depends on your configuration)
  • Path Prefix: Prefix used by SMP 3 for push notifications (/Notification/)


  1. Go to tab “Logon & Security


  • User: SMP Push user (smppush)
  • Password: password of SMP Push user
  1. Save
  2. Test destination

FND – 5 – Activate SAP NetWeaver Gateway

The configuration steps to be executed on the HUB system (FND) are detailed at SAP Help. The steps are for the OData Channel Service for backend system.

  1. Basic configuration activities: SAP Help
    • Set profile parameters to support SSO2 SAP Help
    • Activate ICF Services Blog / SAP Help
  2. User & Authorization SAP Help
  3. SAP Gateway to Consumer (FND to SMP3) SAP Help
    1. Creating a bgRFC destination for outbound queues Blog SAP Help
    2. Registering bgRFC destination for the oubound queue Blog SAP Help
    3. Creating bgRFC supervisor destination Blog SAP Help
  4. SAP Gateway to SAP Backend (FND to BEP) SAP Help
    1. Create RFC on SAP Gateway (FND) to SAP backend (BEP) Blog SAP Help
    2. Define trust between SAP Gateway and SAP backend (FND <-> BEP) Blog SAP Help
    3. Configure SAP backend system (BEP) to accept assertion ticket from SAP Gateway Blog SAP Help
    4. Configure SAP Gateway (FND) to accept assertion ticket from SAP backend (BEP) BlogSAP Help
    5. Configure SAP system alias for applications BlogSAP Help
  5. Activate SAP NetWeaver Gateway SAP Help

This document explains how to execute step 5.

The final step is to activate the SAP Gateway functionality. SAP Help

SPRO: SAP Reference IMG and navigate to:  SAP NetWeaver Gateway OData Channel Configuration Activate or Deactivate SAP NetWeaver Gateway


  1. Execute the activity. Confirm the dialog to activate SAP Gateway
  2. Result:

Activate RMTSAMPLEFLIGHT service

After installing a SAP NetWeaver Gateway system, you’ll want to play around with a OData service. One option is to create everything from scratch; another option is to use a sample service that serves as a basis for learning. SAP NetWeaver ABAP comes with the flight sample, and to no surprise, SAP Gateway comes with a sample OData service based on the flight sample. To maintain a service, transaction /IWFND/MAINT_SERVICE is used. It shows a list of available services:

Adding the service

After a fresh SAP Gateway installation, the flight sample service won’t be listed. The service is already installed, but is not visible in the service catalog. To add it, select the Add Service option: This brings up the Add Selected Services screen.

The get a list of services, first inform the system alias. In my case, I created before in SPRO an alias named GWD for my Gateway system.

Then, click on Get Services: . The brings up the list of services available in the system

The OData service for the flight data is RMTSAMPLEFLIGHT or RMTSAMPLEFLIGHT_2. Select the services you want to add and click on Add Selected Services.

Confirm the following dialog

This will load the service. After everything was done successfully, you’ll hopefully see the following information:

Back at the Activate and Maintain Services transaction shows that the RMTSAMPLEFLIGHT service is added.

Test the service

Click on the service name. This will change the lower section of the screen.

To test the service, click on Gateway Client: . This will open the SAP NetWeaver Gateway Client.

Note that in the Request URI field the service URI is already inserted: /sap/opu/odata/IWFND/RMTSAMPLEFLIGHT/?$format=xml

To see of the service works, just execute a GET request. This should bring back the service description.

Service document

Metadata document

Collection

To retrieve data from a specific collection, click on Entity Sets: . Select an Entity Set (Collection)

This will set the URI parameter accordingly.

Specific flight

The information returned by the entity set can be used to retrieve the information of a specific flight. Part of the returned XML is an entity, that contains an URL like this:

/sap/opu/odata/IWFND/RMTSAMPLEFLIGHT/FlightCollection(carrid=’AA’,connid=’0017′,fldate=datetime’2014-10-29T00%3A00%3A00′)

Copy & paste this URL in the URI field.