Configuring SAP WorkZone Tile Visualization and Behavior in UI5 Applications

[vbalko-claimate]

If you are developing a UI5 application that will be deployed on BTP Cloud Foundry and made available to users through SAP WorkZone service, you have at least two options for defining the tile and its visuals.

The first option is to manually configure the tile settings in the WorkZone Site content editor by creating a local copy of the HTML5 app tile and adding the sap-ui-version parameter and its value. While this approach is simple, it can be error-prone, and it doesn't allow the application to carry crucial information with itself.

The second option is to declare the tile properties in the manifest.json file in UI5 sources. This approach is safer and more reliable because it allows the application to carry the necessary configuration information with itself. Additionally, this information can be set in design time, along with other WorkZone tile configurations.

One of the parameters that can be set on a tile is the SAPUI5 version, which can be defined by the sap.platform.cf.ui5VersionNumber parameter in the manifest.json file. For example:

{

    "sap.platform.cf": {

        "ui5VersionNumber": "1.112.0"

    },

    "sap.ui5": {

        ...

    }

}

 

If you want to cover all the patches, you can substitute the last number (patch level) with x, X, or *.

In addition to setting the SAPUI5 version, you can also define other tile properties in the manifest.json file. Here are some examples:

Visualization Properties

The following example shows how to define the visualization properties of the tile, including the title, subtitle, info, and icon:

{

    "sap.app": {

        ...

    },

    "crossNavigation": {

        "inbounds": {

            "intent1": {

                "signature": {

                    "parameters": {},

                    "additionalParameters": "allowed"

                },

                "semanticObject": "Dynamic",

                "action": "display",

                "title": "{{appTitle}}",

                "info": "{{appTitle}}",

                "subTitle": "{{appSubTitle}}",

                "icon": "sap-icon://account"

                ...

            }

        }

    }

}

 

Dynamic Tile Properties

The following example shows how to define a dedicated dataSource with the value of the uri key that defines the location of the OData from which to obtain the dynamic information to display on the dynamic tile:

{

    "_version": "1.9.0",

    "sap.cloud": {

        "public": true,

        "service": "com.sap.sample.app"

    },

    "sap.app": {

        "id": "html5.dynamic",

        "type": "application",

        "i18n": "i18n/i18n.properties",

        "applicationVersion": {

            "version": "1.0.0"

        },

        "title": "{{appTitle}}",

        "description": "{{appDescription}}",

        "info": "{{appTitle}}",

        "resources": "resources.json",

        "ach": "ach",

        "sourceTemplate": {

            "id": "html5moduletemplates.basicSAPUI5ApplicationProjectModule",

            "version": "1.40.12"

        },

        "crossNavigation": {

            "inbounds": {

                "intent1": {

                    "signature": {

                        "parameters": {},

                        "additionalParameters": "allowed"

                    },

                    "semanticObject": "Dynamic",

                    "action": "display",

                    "title": "{{appTitle}}",

                    "indicatorDataSource": {

                        "dataSource": "

 

Summary

When creating a UI5 application that will be deployed on BTP Cloud Foundry and provided to users through SAP WorkZone service, there are two main ways to define the tile and its visuals: manual settings in the WorkZone Site content editor or declaration in design time in the manifest.json file in the UI5 sources. One of the parameters that can be set on a tile is the SAPUI5 version, defined by the parameter sap-ui-version.

The second way, which involves declaring the tile in the manifest.json file, is safer and better because the app itself carries that crucial information with itself. In design time, this information (along with other WorkZone tile configuration) can be set in the manifest.json file.

The article also provides code examples for setting up other parameters such as visualization properties of the tile and dynamic tiles, which involve defining a dedicated data source with the value of the uri key that defines the location of the OData from which to obtain the dynamic information to display on the tile.

By following these guidelines and utilizing the code examples provided, developers can create UI5 applications that are optimized for deployment on BTP Cloud Foundry and delivery to end-users through SAP WorkZone service.

 

Please note that all the examples provided in this article are taken from the SAP documentation on how to expose HTML5 applications in SAP WorkZone Standard Edition. For more detailed information, you can refer to the documentation (https://help.sap.com/docs/build-work-zone-standard-edition/sap-build-work-zone-standard-edition/expo...).