Skip to Content

Hi All,

This post describes how to display Fiori Apps Library data in an SAP UI5 application. I have already described how to get the OData Service behind the Fiori Apps Library page in Part-1 of this post.

So now we have the OData Service exposing data related to All Fiori Applications. We just have to bind this OData Service in our SAP UI5 application.

Step 1: Make a Destination connecting to Fiori App Library in your cloud cockpit account (Account>Connectivity>Destinations). Since it is not a best practice to use cross-origin links in a SAP UI5 application, hence any odata service is to be used via Destinations made in the cockpit.

Click New Destination and enter the following details for your destination:

You can use any name and description for your destination (But Make sure you use same name in your UI5 app too). Save the new destination and test the connection.

It should show Succesful.

Step 2: Start SAP web IDE and create a new Project from template.

Step 3: In neo-app.json file of your project, give the reference to the new created Fiori Destination

{
    	"path":"/destinations/Fiori",
    	"target": {
    		"type":"destination",
    		"name":"Fiori"
    	},
    	"description":"FioriNoOData Service"
}

Note that the name of the destination here is ‘Fiori’, you have to use the name given by you.

Step 4: In the manifest.json file of your project, you have to make a data-source referring to the OData service of the Fiori App Library.

"dataSources": {

	  "fioriRemote": {
		"uri":  "/destinations/Fiori/sap/fix/externalViewer/services/SingleApp.xsodata",
		"type": "OData",
		"settings": {
		  "odataVersion": "2.0"
		}
	  }
}

Also make a model of this data-source in the models section of manifest.json.

"models": {
			"i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings": {
					"bundleName": "*************.i18n.i18n"
				}
			},
			
	  "apps": {
		"dataSource": "fioriRemote"
	  }
}

Step 5: Now we can display the data of the OData Service(Fiori App Library Data) in our View file using any simple control like Table or List.

The OData service returns many Entity Sets, one of them is AppName that contains the names of all the Fiori Apps. I used this entity set to populate a List.

<List id="itemList1" class="sapUiResponsiveMargin" width="auto" items="{ path : 'apps>/AppName' }">
	<headerToolbar>
		<Toolbar>
			<Title text="{i18n>invoiceListTitle}"/>
			<ToolbarSpacer/>
			<SearchField width="50%" search="onFilter" selectOnFocus="false"/>
		</Toolbar>
	</headerToolbar>
	<items>
                <ObjectListItem press="onListItemPress" type="Navigation" title="{apps>AppName}">       
                </ObjectListItem>
	</items>
</List>

Output:

Similarly, I also used another Entity Set to populate a Table:

Hope you all like this post.

To report this post you need to login first.

1 Comment

You must be Logged on to comment or reply to a post.

  1. Greg Bobrowski

    Good angle.   We tested.

    The approach you suggest spreads easily to a multitude of very useful accelerators. Though scaling up is rather not an inherent part or the future of the technique.

    Execution acceleration technique based on G.O.gle C.H.rome Extension could be useful for manual user operation when repetitive data entries or their parts are common; alternatively, it can become a part of Selenium or HP Test Automation Framework.

    The kindness of SAP who provided the Cloud based demo of Fiori shell not be abused. Therefore, BVL limited itself to a tiny recording that actually does not put any load on the demo server.

    https://youtu.be/XkIa8s6TR2M

    I noticed that there is a dominant presence of discussions of business facets of SAP and only a few Tags are dedicated to TAO, and none to other testing approaches.

    Is there somewhere a blog for Selenium for SAP?

    Could you create a SAP-Selenium forum for tighter fisted implementers?

    (0) 

Leave a Reply