How to Add a Tile to the SAP Fiori Launchpad?

In this note, I will briefly describe the sequence of steps required to add a tile to the SAP Fiori Launchpad.

From the initial setup: I have a simple (even pointless) UI5 application and an empty launchpad, where I need to display a tile that launches my pointless app.

The process of creating a UI5 application will not be described in this note. For more detailed information, please refer to the official documentation:

See: Get Started: Setup and Tutorials

For demonstration purposes, this note uses a UI5 app with the following content:

This is the app I will need to display on the Fiori Launchpad by the end of the note.

For more information about the initial setup of SAP Fiori Launchpad, refer to the following links:

See SAP Fiori Launchpad
See SAP Fiori launchpad in ABAP platform 1809 with SAP_UI 753

The most important thing, in my opinion, is simply to get it running. Additionally (and optionally), you may check the following:

• Whether the External Alias is configured

• What client is specified on the Logon Data tab

To launch the Fiori Launchpad from the back-end system, use transaction /ui2/flp or open the corresponding URL directly in your browser.

See: SAP Note 2487028 - How to run t-code /UI2/FLP on default browser

If the user you’re configuring does not have the roles recommended by the vendor, your launchpad may look something like this:

See: Configuring Roles with Launchpad Start Authorizations

When the roles from the reference materials are used, the launchpad looks more cheerful:

To create a tile catalog, launch the Fiori Launchpad Designer.

See: Creating and Configuring Catalogs

What are catalogs?
Catalogs are collections of apps that you want to make available for a specific role (or for multiple roles).
You assign roles and apps to a catalog. Users belonging to a particular role have access to the all the apps that are assigned to the same catalog as their role.

Alternatively, you can launch transaction /UI2/FLPD_CUST from the back-end system.

The following video fragment shows the sequence of actions for creating a new tile catalog.

Define the semantic object using transaction /UI2/SEMOBJ.

See: Setting up Navigation
See: Creating Custom Semantic Objects

Semantic object as defined in an app launcher tile.
The following characters are allowed: uppercase letters [A-Z], lowercase letters [a-z], numbers [0-9]. The first character must be an uppercase or lowercase letter

Specify the application that will be launched from the new tile by configuring the target mapping in the new catalog.

See: Configuring Target Mappings

In the target mapping configuration, you map a navigation target to a combination of a semantic object and an action — also known as an intent.

Pay attention to the ID field, where you specify the name of your UI5 app's component (see your app’s Component.js):

ID
Enter one of the following: Component name of an SAPUI5 application
Example: cus.sd.myquotations

See: Identifying the Component Name.

ID of the application descriptor of an SAPUI5 application. See the description of the attribute ID in the sap.app namespace under Descriptor for Applications, Components, and Libraries.

The next video fragment demonstrates how to add a new tile (of type Static App Launcher Tile) to the previously created catalog.

See: Configuring Tiles
See: Static App Launcher Tiles

Create a new group and include the previously created tile catalog in it.

See: Creating or Removing Groups
A group contains predefined content that you can view on the page. You can add tiles to groups from catalogs. You can specify that a group cannot be personalized by the end user.

To ensure that the tile is available to the end user, you need to create a backend role and include the tile catalog and group you previously created. (There may be variations in how this is done.)

The final step is to verify that the new tile is available and the application can be launched from the SAP Fiori Launchpad under a user with the role created in Step #9.

Remember, there’s no such thing as a hopeless situation. As always, with my warmest wishes in these final days of summer.

Yours,
ignatov