Introduction
A while ago I was working for a big client in Belgium that did releases to production around every 3 months. They are using a number of Fiori applications in the launchpad so on every go-live there was some "excitement" since you are often transporting multiple transports (not always in the chronological order).
That was reason enough to create a fallback system, we wanted to be able to shut down Fiori applications on the fly. Of course you can always disable the SICF service or disable the Launchpad but this is not user friendly nor very flexible. What if there is only one application not working that needs to be disabled? Enter custom Tiles!
Backend
In the backend we created custom variables per tile to save the current state of the application (open/closed).
- Z_TILE_LEAVEREQUEST
- Z_TILE_CATS
- Z_TILE_xxx
We created a simple backend transaction were the status of these variables could be checked and switched easily (which results in opening or closing the Fiori tile behind)
Frontend
Part 1: Retrieve standard Dynamic tile code
So far for the easy part, time to get to the interesting stuff. Next step was to retrieve the standard code which is used behind the Dynamic tile (the one which allows you to show a number as opposed to the Static tile).
I followed blog https://blogs.sap.com/2015/06/04/customised-tile-types-in-fiori-launchpad-part-2 which told me to start the Launchpad designer in debugging mode:
http://xxxx:9999/sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main.html?scope=CUST&sap-language=EN&sap-ui-debu...
Using the debugger tools you can than get access to the standard code:
Part 2: Create new project based on the retrieved code
I created a project called CustomTileNoNumber
- CustomTile.view.js
Returns view.CustomTile instead of the standard one:
sap.ui.jsview("view.CustomTile", {
getControllerName: function () {
return "view.CustomTile";
},The dynamic value of the number was blanked out (property value below) to not show this. Important is to not delete this because the standard GenericTile component is used for this and it won’t work if you don’t pass the parameter
return new sap.m.GenericTile({
header: '{/data/display_title_text}',
subheader: '{/data/display_subtitle_text}',
size: "Auto",
tileContent: [new sap.m.TileContent({
size: "Auto",
footer: '{/data/display_info_text}',
unit: '{/data/display_number_unit}',
//We'll utilize NumericContent for the "Dynamic" content.
content: [new sap.m.NumericContent({
scale: '{/data/display_number_factor}',
value: ' ',- CustomTile.controller.js
The onpress function was adapted to read the display_number_state value of the tile. This is filled with Critical in the oData of the dynamic data part. If this is the case, the event is not handled to avoid the tile from opening
// trigger to show the configuration UI if the tile is pressed in Admin mode
onPress: function () {
var oView = this.getView(),
oViewData = oView.getViewData(),
oModel = oView.getModel(),
sTargetUrl = oModel.getProperty("/nav/navigation_target_url"),
sTileClosed = oModel.getProperty("/data/display_number_state"),
oTileApi = oViewData.chip;
if (oTileApi.configurationUi.isEnabled()) {
oTileApi.configurationUi.display();
} else if (sTargetUrl) {
if (sTileClosed === 'Critical')
{
// Do nothing, app is disabled
}
else{
if (sTargetUrl[0] === '#') {
hasher.setHash(sTargetUrl);
} else {
window.open(sTargetUrl, '_blank');
}
}}
},Part 3: Create/update oData
You can pass an oData call when you create a new Dynamic tile (or Custom tile in our case), which than would return the normal number of entities when you do a count. In our case, we adapted the code so that the status of the tile was returned:
** Step 1: Check for which tile we are being called
READ TABLE it_key_tab INTO ls_key_tab WITH KEY name = 'Key'.
IF sy-subrc IS INITIAL.
** Step 2: Check if passed tile is closed
MOVE ls_key_tab-value TO lf_tilename.
CALL METHOD zcl_xx_tvarv_utils=>get_parameter
EXPORTING
im_name = lf_tilename
CHANGING
ch_value = lf_tileopen.
If the tile is closed, a message is added to the tile and the Critical value is filled in:
IF lf_tileopen EQ abap_false.
CALL METHOD cl_wd_utilities=>get_otr_text_by_alias
EXPORTING
alias = zif_xxx_constants=>gc_frontend_under_maint_otr
RECEIVING
alias_text = er_entity-info.
MOVE zif_xxx_constants=>gc_frontend_color_red TO er_entity-numberstate. "Critical
MOVE abap_true TO er_entity-number. "X will give 3 points to avoid showing 0 as unit
The tile key is passed via the oData call in the tile configuration (which is the same name as the TVARV parameter):
Additional info on the dynamic tile oData structure can be found here:
https://help.sap.com/saphelp_uiaddon10/helpdata/en/4d/2b9e3c92e54b2192f031a2941927d6/content.htm
Part 4: Expose the project as a chip
To be able to have the option to create a new CustomTile you need to add your project as a chip. A CustomChip.xml file was also added to the project to make the link between the “Create new tile” and the new custom tile we created. To achieve this the blog below was followed: https://blogs.sap.com/2016/08/23/create-and-use-custom-tile-type/
The chip links to the CustomTile view and was copied from the standard chip:
<?xml version="1.0" encoding="UTF-8"?>
<!-- Copyright (c) 2009-2014 SAP SE, All Rights Reserved -->
<chip xmlns="http://schemas.sap.com/sapui2/services/Chip/1">
<implementation>
<sapui5>
<basePath>./</basePath>
<viewName>view/CustomTile.view.js</viewName>
</sapui5>
</implementation>
<appearance>
<title>Custom Dynamic Applauncher</title>
<description>Custom Dynamic Applauncher Chip without number</description>
</appearance>
Transaction /n/UI2/CIHP was used to define the chip:
The last step is to add the chip in the WebDynpro configuration. Go to transaction SE84 –> Web Dynpro –> Web Dynpro-application and search for CUSTOMIZE_COMPONENT
Run the WebDynpro, fill in the component name and configuration id and click on New:
Fill in a description and add a new value to the parameterMultiVal
Enter “X-SAP-UI2-CHIP: ZHR_CUSTOM_TILE_NO_NUMBER” –> Should be the same name as the name of the chip
Result
The left tile is the normal "open" status, which is clickable. The right one is the disabled version with a message indicating this and will not do anything when you click it.
Conclusion
This project was done a while ago, that's why the screenshots are made in Internet Explorer (I didn't know the power of Chrome's F12 at that time). By now the standard code behind the tiles probably changed significantly, but the general idea of the possibilities should be clear. You can create your own custom tiles that can be customized to have a different background color, a certain on/off functionality, and many more of course.
- SAP Managed Tags:
