Skip to Content
Technical Articles

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!!

6 Comments
You must be Logged on to comment or reply to a post.
  • Thank you for the blog entry! It reminds me of this post from Lucas Heim: https://blogs.sap.com/2019/03/11/working-with-cards-on-ui5-1.62/comment-page-1/#comment-454086

    I really don’t understand why SAP implemented the card controls completely differently than any other UI5 control (with a separate manifest file) …

    Again, I have to ask the question: how can you create such cards dynamically at runtime? Or is it not possible at all?

    BR, Klaus

    • About the different implementation, this was a big question for me too, but I think the documentation now tells a lot. Manifest cards should be used in integration scenarios, when you need reuse and, as I understand, when you want something to be used even with other technologies. For other use cases, sap.f.Card is now the go-to.

      When to use

      • When you want to reuse the card across apps.
      • When you need easy integration and configuration.

      When not to use

      • When you need more header and content flexibility.
      • When you have to achieve simple card visualization. For such cases, use: Card.
      • When you have to use an application model. For such cases, use: Card.
      • When you need complex behavior. For such cases, use: Card.
  • Hello, there is a way we can pass our global json model which is declared in manifest to pass as an aggregate. I am loading the data into the json using controller. Thanks in advance.