Question Re: Implement a Custom Visualization Tile Launchpad in Technology Q&A

Implement a Custom Visualization Tile Launchpad

former_member799012 — Mon, 11 Apr 2022 15:50:14 GMT

Hello,

I'm trying to implement a custom visualization for a tile on my Launchpad.

Something similar to this

I followed the steps noted on this link ( https://help.sap.com/docs/Launchpad_Service/8c8e1958338140699bd4811b37b82ece/376785f52254440590c970e2e90de2c9.html ), but since it's not detailed enough and I'm still a beginner, I couldn't do it.

Is there anyone who has done it and can explain to me how I can do it?

Thanks in advance

Re: Implement a Custom Visualization Tile Launchpad

Jsousa — Mon, 11 Apr 2022 16:34:23 GMT

I think this link will help you: Create custom tiles types for Fiori Launchpad

It is a bit old but you can follow these steps. I will try to post a blog about this topic and my experience soon!

Re: Implement a Custom Visualization Tile Launchpad

gregorw — Mon, 11 Apr 2022 19:54:17 GMT

Is your target the ABAP on Prem or the BTP Cloud Foundry Launchpad Service?

Re: Implement a Custom Visualization Tile Launchpad

former_member799012 — Tue, 12 Apr 2022 07:53:28 GMT

Thank you very much for your reply !

Re: Implement a Custom Visualization Tile Launchpad

former_member799012 — Tue, 12 Apr 2022 07:54:09 GMT

Mu target is the BTP Cloud Foundry Launchpad Service?

Re: Implement a Custom Visualization Tile Launchpad

gregorw — Tue, 12 Apr 2022 08:40:31 GMT

As you are using the BTP Cloud Foundry Launchpad Service I doubt that the described approach will work. Are your apps deployed to the coud or do you provision on premise apps?

Re: Implement a Custom Visualization Tile Launchpad

former_member799012 — Tue, 12 Apr 2022 10:42:06 GMT

My apps are deployed to the cloud

Re: Implement a Custom Visualization Tile Launchpad

gregorw — Tue, 12 Apr 2022 19:10:33 GMT

Please check if this helps: Custom Tile in SAP Cloud Platform Portal Site

Re: Implement a Custom Visualization Tile Launchpad

carlonnheim — Mon, 06 Mar 2023 00:05:54 GMT

Hi,

It seems the conditions in the Build Workzone as it is named now is working differently from the Portal service as shown in that link (and most other search hits for help pages, blogs etc.). I am trying to piece this together based on this, which I think is the official documentation for the workzone:

https://help.sap.com/docs/WZ_STD/8c8e1958338140699bd4811b37b82ece/376785f52254440590c970e2e90de2c9.html

I am getting it to load the custom tile and pulling data from a backend service, but it does not land properly in the tile container, overflowing etc.. Looks like this

Tile on the left is a standard dynamic launcher, the one on the right is a standard static launcher and the one in the middle is my attempt at a custom visualization.

Would be great if SAP could publish a sample repo showing how this should be done. There are more samples from when it was "WEB IDE / Portal", but seems they do not apply anymore.

The main content I have leading up to the above is this manifest of the target app (only added the sap.cloud.portal thing at the end, fitting with the intent namings

...
    "crossNavigation": {
      "inbounds": {
        "my-object-action-inbound": {
          "signature": {
            "parameters": {},
            "additionalParameters": "allowed"
          },
          "semanticObject": "myObject",
          "action": "myAction",
          "title": "{{flpTitle}}",
          "subTitle": "{{flpSubtitle}}",
          "icon": ""
        }
      }
    }
...
  "sap.cloud.portal": {
      "myObject-myAction": {
          "vizType": "my.tile"
      }
  }

manifest of the custom visualization app is like this (pasted in full as I think that is the main piece in the puzzle)

{
    "_version": "1.48.0",
    "sap.app": {
        "id": "my.tile",
        "type": "application",
        "i18n": "i18n/i18n.properties",
        "applicationVersion": {
            "version": "0.0.1"
        },
        "title": "{{appTitle}}",
        "description": "{{appDescription}}",
        "resources": "resources.json",
        "dataSources": {
            "mainService": {
                "uri": "/svc/",
                "type": "OData",
                "settings": {
                    "annotations": [],
                    "odataVersion": "4.0"
                }
            }
        }
    },
    "sap.ui": {
        "technology": "UI5",
        "icons": {
            "icon": "",
            "favIcon": "",
            "phone": "",
            "phone@2": "",
            "tablet": "",
            "tablet@2": ""
        },
        "deviceTypes": {
            "desktop": true,
            "tablet": true,
            "phone": true
        }
    },
    "sap.ui5": {
        "flexEnabled": false,
        "dependencies": {
            "minUI5Version": "1.109.3",
            "libs": {
                "sap.m": {},
                "sap.ui.core": {},
                "sap.f": {},
                "sap.suite.ui.generic.template": {},
                "sap.ui.comp": {},
                "sap.ui.generic.app": {},
                "sap.ui.table": {},
                "sap.ushell": {}
            }
        },
        "contentDensities": {
            "compact": true,
            "cozy": true
        },
        "models": {
            "i18n": {
                "type": "sap.ui.model.resource.ResourceModel",
                "settings": {
                    "bundleName": "my.tile.i18n.i18n"
                }
            },
            "": {
                "dataSource": "mainService",
                "preload": true,
                "settings": {
                    "synchronizationMode": "None",
                    "operationMode": "Server",
                    "autoExpandSelect": true,
                    "earlyRequests": true
                }
            }
        },
        "resources": {
            "css": [
                {
                    "uri": "css/style.css"
                }
            ]
        },
        "rootView": {
            "viewName": "my.tile.view.Tile",
            "type": "XML",
            "async": true,
            "id": "Tile"
        }
    },
    "sap.cloud": {
        "public": true,
        "service": "my"
    },
    "sap.flp": {
        "type": "tile"
    },
    "sap.platform.cf": {
        "ui5VersionNumber": "1.109.3"
    }
}

and the tile view looks like this

<mvc:View controllerName="my.tile.controller.Tile"
    xmlns:html="http://www.w3.org/1999/xhtml"
    xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
    xmlns="sap.m">
	<GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="{i18n>appTitle}"
		subheader="{i18n>appDescription}" press="onLaunch" frameType= "TwoByHalf" tileContent="{/Content}">
            <NewsContent contentText="{description}" subheader="{title}" />
        </TileContent>
	</GenericTile>    
</mvc:View>

Seems I am close, but not quite there. Any further advice?

Re: Implement a Custom Visualization Tile Launchpad

carlonnheim — Thu, 16 Mar 2023 19:42:23 GMT

Hi,

Sharing what changes to the above made the custom tile work. In the manifest there needs to be a tile size matching the width of the tile, like so

    "sap.flp": {
        "type": "tile",
        "tileSize": "1x2"
    },

and in the view that should match with the frameType so a 1x2 tileSize fits with frameType="TwoByOne" (noting the reverse notation compared to the manifest).
Also, do not add any padding styles and if using the newer launchpad themes then setting width="100% is also a good idea to make it properly fill its container.Since the cycle times for experimenting with these are quite long (needs a deploy to go to the launchpad), I can also recommend using the UI5 Debugger to experiment with the settings live first (Ctrl+Shift+Alt+S).Here is a working view with custom tile including a slider and some microcharts.

<mvc:View controllerName="my.Tile"
    xmlns:html="http://www.w3.org/1999/xhtml"
    xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
    xmlns:microchart="sap.suite.ui.microchart"
    xmlns="sap.m">
    <SlideTile transitionTime="250" width="100%" displayTime="30000" tiles="{/Department}">
        <GenericTile
            header="{title}"
            sizeBehavior="Responsive"
            wrappingType="Hyphenated"
            additionalTooltip="My Additional Tooltip"
            valueColor="Good"
            subheader="{description}"
            frameType="TwoByOne">
            <TileContent >
                <HBox>
                    <microchart:RadialMicroChart size="S" percentage="45" />
                    <microchart:ComparisonMicroChart size="S" press="press">
                        <microchart:data>
                            <microchart:ComparisonMicroChartData title="These" value="10" color="Good" />
                            <microchart:ComparisonMicroChartData title="Are" value="50" color="Critical" />
                            <microchart:ComparisonMicroChartData title="Samples" value="20" color="Error" />
                        </microchart:data>
                    </microchart:ComparisonMicroChart>
                </HBox>
            </TileContent>
        </GenericTile>
    </SlideTile>
</mvc:View>

This blog post was very usefulhttps://blogs.sap.com/2020/03/23/custom-tiles-with-cloud-foundry-portal-cloud-platform/Hope it is helps somebody.//Carl

Re: Implement a Custom Visualization Tile Launchpad

prasad41 — Thu, 16 Apr 2026 07:37:53 GMT

I have followed same steps, but i see error "Cannot load tile". please advise.