Get data of Fiori Apps Library in a simple SAP UI5 Application Part-2

[former_member1321]

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.