- SAP Managed Tags:
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/376785f52254440590c970e... ), 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
Accepted Solutions (0)
Answers (2)
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:
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?
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"
},
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>
| User | Count |
|---|---|
| 71 | |
| 21 | |
| 9 | |
| 7 | |
| 6 | |
| 6 | |
| 4 | |
| 4 | |
| 4 | |
| 3 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.