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.