Technical Articles
SAP Fiori Launchpad – Card tile
Hi community.
It is my first blog post. And this blog post is about Launchpad tiles.
Recently my SAP consultant asked me to create new Custom tile type. In standard transaction /ui2/flpd_conf we have 3 tile types: Static tile, Dynamic tile and News tile, but these types are not enough for us. When i tried to find some information about creating custom tile, i found few blog posts:
- https://blogs.sap.com/2017/01/28/how-to-create-custom-tile-types-for-onpremise-fiori-launchpad/
- https://blogs.sap.com/2016/08/23/create-and-use-custom-tile-type/
Following the first blog post i created my first custom tile type and it was very long an difficult process, because downloading tile templates and configuration templates is very long story, and controller naming is different for custom tile view. This is my result below(such as in first blog post, thanks Roberto Pagni):
As a part of creation i had to add a my ZCHIP in transaction /ui2/chip( CHIP is a sapui5 component with special xml manifest) and in search help i found interesting standard chip /UI2/CARD ( Warning: this chip SAP marked as not for Production, only Testing).
And i added this chip in my CUSTOMIZE_COMPONENT for using Card tile type to /ui2/flpd_conf and i can select Card tile template.
When i click at the Cart template, empty window opens with Card Manifest editor:
For expolore card types we can use a Card Explorer : https://sapui5.hana.ondemand.com/test-resources/sap/ui/integration/demokit/cardExplorer/webapp/index.html
to explore card, see examples, and manifest structure
And we can copy manifest from Card Explorer for each type and test the results in Launchpad:
For example Card type – LIST
{
"sap.app": {
"id": "idCard1"
},
"sap.card": {
"type": "List",
"header": {
"title": "Title",
"subTitle": "Subtitle",
"icon": {
"src": "sap-icon://accept",
"alt": "AltIcon",
"shape": "Circle",
"text": "IconText",
"backgroundColor": "green",
"color": "#fff"
},
"status": {
"text": "status"
}
},
"content": {
"data": {
"json": [
{
"title": "Item1 Title",
"description": "Item1 Description",
"info": "Item1 Info",
"state": "Error"
},
{
"title": "Item2 Title",
"description": "Item2 Description",
"info": "Item2 Info",
"state": "Warning"
},
{
"title": "Item3 Title",
"description": "Item3 Description",
"info": "Item3 Info",
"state": "Success"
}
]
},
"item": {
"title": {
"label": "TitleLabel",
"value": "{title}"
},
"description": {
"label": "DescLabel",
"value": "{description}"
},
"info": {
"label": "InfoLabel",
"value": "{info}",
"state": "{state}"
},
"highlight": "{state}",
"icon": {
"src": "sap-icon://action",
"alt": "AltIcon",
"shape": "Circle",
"text": "IconText",
"backgroundColor": "green",
"color": "#fff"
}
}
}
}
}
And see in Launchapad.
Finaly:
I think, that tile type – Card it is the simplest way to create custom tiles with different type information. But not all card types works. Analytical and Adaptive card types doesn’t work. Maybe SAP recover this card types in S/4 2020.
If someone has other way to create tile type, please share your soluton, your ideas.
I’m missing the plugin in WeIDE for custom tile development. it would be great.
Hi Aleksandr,
Nice blog. We have developed a custom tile and registered it in DEV using /UI2/CHIP transaction.
But while registering in QA using this transaction it is asking for developer access key.
IS there a way to move /UI2/CHIP data from DEV to QA using TR.
Regards,
Amit Rai
Hi, Amit.
Sorry for the late answer.
In my dev system when I try to add or change some chip in tcode /UI2/CHIP, I get a dialog that asks for a request number.
Hi Aleksandr,
is there any hint why analytical cards don't work? If I try to configure Analytical Cards the header is shown properly but the content doesn't load.
Best regards
Michael
Hi Michael.
I think it is question to SAP.
I have a lot of question from my colleagues, they wont to use card in Fiori Launchpad but it experimental and doesn't work.
Jocelyn Dart or Thomas Reiss can you comment ?