List Card and Theme of Sap Fiori 3

Hi

This blog gives you information of about one of the integration cards named List Card (API Ref : sap.ui.integration.widgets.Card ) introduced as part of Fiori 3.

Data display has been done using Northwind odata service unlike using JSON Model. Demonstration using JSON Model is available in SAP UI5 SDK.

Linking the URL: https://sapui5.hana.ondemand.com/#/entity/sap.ui.integration.widgets.Card.

Here comes my blog briefing using SCP’s, Full stack IDE.

In Sap web ide full stack, created SAP UI5 application from sample templates available. Once the project got landed in workspace, my project structure seems this way.

i have done changes in few files like index.html, Component.js, manifest.json and view.xml.

In index.html, used newly welcomed theme “SAP Quartz Light” and labeled as shown.

Component.js : 

I left this js file as simple as it looks.

Here in manifest.json : Defined file paths.

{
	"_version": "1.12.0",
	"sap.app": {
		"id": "fiori.Fiori_3",
		"type": "application",
		"applicationVersion": {
			"version": "1.0.0"
		}
	},
	"sap.ui5": {
		"rootView": {
			"viewName": "fiori.Fiori_3.view.View1",
			"type": "XML",
			"async": true
		},
		"dependencies": {
			"libs": {
				"sap.ui.integration": {}
			}
		},
		"config": {
			"Fiori_3": {
				"files": [
					"View1.view.xml",
					"model/listCardManifest.json",
					"manifest.json"
				]
			}
		}
	}
}

listCardManifest.json : This is the one which i haven’t played around. Noticed a different way of defining data in Fiori 3 Cards.

The “item” property defines the template for all the items of the list. The “data” property provides the displayed information.

View1.view.xml : Finally, here comes the beauty of binding using manifest in our view.

End of my blogging with List Card and Theme look:

Please park your comments and also changes if any.

Thank you!!