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!!
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
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: https://sapui5.hana.ondemand.com/#/api/sap.f.Card
Hi Lucas,
that's great news, thanks!
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.
Hello Klaus,
As per my understanding, We do can create cards dynamically by using service URL in manifest as i declared in this blog.
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.