Skip to Content

Create and use custom tile type

Dear Fiori Experts,

I was asked to add a Fiori app to the Fiori launchpad but with a total different tile layout than all the standard tile types. This meant I had to create a custom tile type. First I didn’t tought it would be possible to create custom tile types but than I came across the following blog series:

So it is possible! 🙂

The blog series helped me very well to figure out how to create my custom tile. But I was missing the part to add my tile to the Fiori launchpad. Based on the blog series I’ve found I want to share a full end to end tutorial.

1) The Tile

I started by following the blogs to create my own Fiori tile type. I only wanted a tile with a title and a list. The title should be configurable from the Fiori launchpad designer. The list should come from an oData service. This meant I only need two fields. I removed all the unneeded fields from the configuration view and changed the layout of the tile view. You can find the full code on github:

GitHub – lemaiwo/CustomTile

My project looks like this:

  • CustomTile view
    • This contains the layout of the tile type
  • CustomTile controller
    • Controller for the tile type
  • Configuration view
    • View for the configuration in the launchpad designer
  • Configuration controller
    • Controller of the configuration view
  • CustomChip.xml


CustomChip.xml should contain the path to the tile type



Deploy the sapui5 app to your system


2) Register the tile type as a chip

This part will show you how to create a chip which you’ll need to create a tile type. The chip will contain a name and url. The url will aim to the BSP application that contains the Custom Tile.

Go to transaction /n/ui2/chip

Create a chip:


The url should aim to the xml in the UI5 app of the tile type


3) Register the chip as tile type

Now we’ll register the chip as a tile type by using the name of the CHIP.

Go to transaction SE84 –> Web Dynpro  –> Web Dynpro-application

Search for CUSTOMIZE_COMPONENT and execute:




Run the web dynpro application


Fill in the component name and configuration id –> click on New


Fill in a description


Add a new value to the parameterMultiVal

Select “parameterMultiVal” –> New –> values


Enter “X-SAP-UI2-CHIP:ZCUSTOM_APPLAUNCHER” –> Should be the same name as the name of the chip


4) Use the new Tile type

Finally we can use the tile by configuring the Fiori Launchpad designer.

Go to transaction /n/ui2/flpd_cust

Add a new tile to a catalog and you’ll see the custom tile type. (If not showing up, clear cache)


Fill in the title, service url for the list and the target url.


Preview in the launchpad designer:



5) Example of the oData service

Just a basic list of person with name and icon:


6) Result in the Fiori Launchpad


Now you can create your own custom Fiori Tile type. This opens a lot of possibilities!


Kind regards,


You must be Logged on to comment or reply to a post.
  • Hi Wouter - it is great to see your curiosity and desire to share displayed here in the community, well done!  I also like the fact that you closed the loop in the part 3 blog comment section 🙂

  • Excellent Post, thanks a lot!
    I still have an issue tough, maybe someone can help:

    The custom tile launcher appears like it says in the blog, but when I want to create a tile with it, it shows the following:

    I can't click on it or anything and I just followed the steps provided here in the blog. Maybe someone else has had this and found a solution?


    Kind Regards,


    • /
      • Hi! You should delete wrong lines in CHIP configuration from example (file CustomChip.xml) - lines to be deleted are marked on the picture.
        Standard config might be used as an example, you could find it at your_GW_host/sap/bc/ui5_ui5/ui2/ushell/chips/applauncher_dynamic.chip.xml

        • Hi Akmet,

          Thanks for you response! Is this working on your side? I don't get any errors anymore but the tile is not working.

          Did you make any other changes to this project?


          Kind regards,


  • This post is intriguing! Thanks,Wouter Lemaire


    Still facing some issues in this.

    Earlier, I got an error as shown below and I resolved it by deleting the wrong lines in CHIP configuration. Thank you, Former Member

    And now its throwing the below errors:

    Kindly help on this.


    • Hard to tell what's going wrong. Did you took the latest version of the dynamic tile from your system?

      Are you sure that the CHIP configuration is coming through ? Had a lot of problems with that...

  • Hi Experts,
    I have followed the above process and created chip.But when i select that chip type from admin page i am getting below the error message.

    Kindly Help on this.

  • Same as above comment, are you sure the chip config is coming through ? Try changing with modification key instead of customizing...

  • Hello Wouter,

    I have created a custom tile and in target mapping i have made it visible only for mobile device device, by selecting those device specific check boxes. Even though, tile is not suppose to be visible for desktop, but i can still see it on desktop. Is it something with launchpad that does not recognize the device type for custom tiles? Or something else needed on chip or custom tile?




    • I have the same issue, did you find any solution?

      It seems is not supported, please check this note:

      Thank you,


  • Hi Wouter,

    I have just imported your example from GIT-Repository directly into SAP WebIDE-Full-Stack.

    But when running the component.js in the Sandbox Fiori-Launchpad, i am getting the following error:

    It seems if there is something wrong in the project structure.

    Please let me know, what needs to be done.

    Thanks, KIaus

    • Hi Klaus,

      I would not start from my git project. It can be different depending on your UI5 version. You should try to find the standard code in the Fiori launchpad designer and use Google chrome developer tools.



  • Hi Wouter,

    good blog. After some errors I found out how to implement this on my system.

    What I’m now missing is a possibility to create a larger tile. Did you ever tried this?

    My tile.xml looks like this:


    <?xml version="1.0" encoding="UTF-8"?>
            	<TileContent footer="{/config/display_info_text}">
                    	<ui:ComparisonMicroChart size="L" scale="L">
    							<ui:ComparisonMicroChartData title="Monat 1" value="10" color="Good}" />
    							<ui:ComparisonMicroChartData title="Monat 2" value="20" color="Error" />
    							<ui:ComparisonMicroChartData title="Monat 3" value="30" color="Critical" />

    As you can see I have defined the frameType as TwoByOne, means it has to be 2 times wider then high. But on the launchpad I can not see it.

    Any suggestions how to solve this?





    Found the solution in this blog

    In the launcher.chip.xml the parameter col needs to be set to 2:

    		<consume id="configuration">
                    <parameter name="tileConfiguration"></parameter>
                    <parameter name="col">2</parameter>

    Found the solution in this blog

    In the launcher.chip.xml the parameter col needs to be set to 2:

    		<consume id="configuration">
                    <parameter name="tileConfiguration"></parameter>
                    <parameter name="col">2</parameter>


  • Hello @Wouter Lemaire

    I'm really greatful, following your steps everything i made the custom tile 😀 but what if i want to show some info consuming an odata passing a parameter, i'd do that in the controller of the tile , am i right? and the rest of the info with other odata introduce it in the configuration


    something like this:


  • Hello @Wouter Lemaire


    Thank you for sharing.

    In my launchpad catalog is getting added, but on click of the tile its directly adding to the group its not navigating to that configuration view, but configuration view is loading, Can u help me out,

    and my launchpad supports only 1.28 libraries, Is it possble to add the microochart on the tile ?




    Hi All,

    Everyting is working as expected, But My requirement is how to make my customized chip tile as a bookmark tile because customer wants to add the tile using bookark services without defining any configurations, How to achieve this?

    Thanks in Advance,



  • Wouter,

    Great blog – thanks for sharing.

    Do these custom tile types survive UI5 upgrades?  Or do they have to be created all over again after an upgrade?



  • /