How to Create Custom Fiori Tiles in SAP

[anar_namazov]

Creating Fiori tiles in SAP is an essential task for consultants looking to enhance the user interface and streamline transaction processes. In this blog post, I will guide you through the step-by-step process of creating custom Fiori tiles for transactions, using a role as an example. This post will include both the creation of catalogs and spaces for the tiles, and I’ll share important tips to help ensure smooth implementation.

Introduction

SAP Fiori tiles provide an intuitive and user-friendly way to access SAP transactions. In this tutorial, we’ll be creating a Fiori tile for the IW38 transaction, which is accessible by the Y_MAINT_ELECTRICIAN role. The steps covered in this guide will take you through the process of creating the necessary roles, catalogs, pages, and target mappings.

Steps to Create a Custom Fiori Tile

1. Create Business Roles and Check Authorizations
Before creating the tile, ensure that you have defined your business role and that it has access to the necessary transactions. In this example, we are using the role Y_MAINT_ELECTRICIAN, which already has access to the IW38 transaction.

2. Create a Customizing Request
You need to create a customizing request in the DEV system, as this request will later be transported to the QAS and PRD clients.

3. Run Transaction /n/UI2/FLPCM_CUST
Open the SAP GUI and run the transaction /n/UI2/FLPCM_CUST.

• Once inside, click on the “Open in Designer” button to start configuring the Fiori tile.

4. Assign the Request
In the designer, click the settings button to assign your previously created customizing request.

5. Select Your Request
Find the customizing request you created earlier and select it.

     

6. Create a Catalog
Now, let’s create the catalog for the Fiori tile. In the bottom left corner, click the “+” icon to add a new catalog.

• Enter the title, description, and catalog ID.

        

7. View Catalog Details
After creating the catalog, you will see two buttons: Tiles and Target Mapping. These options are essential for further configuration.

8. Create the Tile
To begin creating your custom Fiori tile, click the Create Tile button. This will open a new window for tile configuration.

9. Choose a Tile Template
For this example, we’ll select the template for Static Tiles, which is commonly used for transactions that don’t require dynamic content.

10. Fill in Tile Information 
Now, it’s time to populate the tile with relevant data.

• In the General section, enter the title, subtitle, keywords (use the transaction code here), and any icon you want to use.
• In the Navigation section, specify the Semantic Object, Action, and Parameters. This information can be found on the fioriappslibrary.hana.ondemand.com by searching for the transaction code.
• Once all fields are filled, click Save.

11. Visualize the Tile
At this stage, you will see a visual representation of your custom Fiori tile.

12. Create Target Mapping
Now, switch to the Target Mapping tab and create a target mapping for your tile.

• Click the Create Target Mapping button to proceed.

13. Enter Target Mapping Details
Similar to tile creation, you will need to enter the Semantic Object, Action, and Parameters. Additionally, check the appropriate boxes for device types (such as desktop, tablet or phone) to ensure compatibility. Save your changes when done.

14. Run Transaction /N/UI2/FLP
After the catalog is set up, you will need to create spaces and pages for the Fiori tile. Run the transaction /n/UI2/FLP and open the Manage Launchpad Spaces tile.

15. Create a Space
Click the Create button to define a new space and enter the necessary information. You can create a page from this screen as well. Don’t forget to assign your request number here.

16. Assign the Catalog and Space to a Role
Now that both the catalog and space have been created, assign them to your role. Run the transaction PFCG to open the role and add the catalog and space.

17. Edit the Launchpad Page
Run the Manage Launchpad Pages tile and navigate to the page you created earlier.

• Find the page and click on Edit button.
• You can add sections to the page, and by clicking the Add button, you can specify which section should contain your tile.

18. Final Tile Display 
Your Fiori tile is now complete, and you should see it displayed in the assigned section.

Conclusion

Now that you’ve successfully created a custom Fiori tile, you can transport the request and implement the tile within your SAP environment. Custom Fiori tiles are a great way to simplify the user experience, and this process allows you to tailor the SAP Fiori Launchpad to meet your specific business needs. If you encounter any issues during the process, double-check the authorizations and parameters to ensure accuracy.

Feel free to comment with any questions or additional tips related to Fiori tile creation.

[TAPPEI_OYAMA]

Dear anar_namazov

I create Tiles with this processes.

I have two questions.

1. Is 6. Create a Catalog   Tecnical catalog or Business catalog?

2. I create two tiles, which are 'Change PM orders' and 'Display PM orders'
    They have other semantic object and tiles. 
    I edit space and page. I use  17. Edit the Launchpad Page 
    I think that two tiles have two tecnical catalog ID, but they have only one tecnical catalog ID.
   Do you know some idea to separate the tecnical catalog ID.