Skip to Content
Technical Articles
Author's profile photo Dhanasupriya Sidagam

List Card and Theme of Sap Fiori 3


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:

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",
	"": {
		"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": [


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

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Klaus Kronawetter
      Klaus Kronawetter

      Thank you for the blog entry! It reminds me of this post from Lucas Heim:

      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

      Author's profile photo Lucas Heim
      Lucas Heim

      Hey, Klaus!

      I was checking UI5 versions after 1.62 (the one I used in my post) and saw that from 1.64 onwards, we have a Card component (sap.f.Card). This control is more flexible than the one I've used and uses the common UI5 control API.

      Take a look:

      Author's profile photo Klaus Kronawetter
      Klaus Kronawetter

      Hi Lucas,

      that's great news, thanks!

      BR, Klaus

      Author's profile photo Lucas Heim
      Lucas Heim

      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.
      Author's profile photo Dhanasupriya Sidagam
      Dhanasupriya Sidagam
      Blog Post Author

      Hello Klaus,

      As per my understanding, We do can create cards dynamically by using service URL in manifest as i declared in this blog.

      Author's profile photo Srinath Velagala
      Srinath Velagala

      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.