Skip to Content

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:

http://scn.sap.com/community/fiori/blog/2015/05/25/customised-tile-types-in-fiori-launchpad

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

/wp-content/uploads/2016/08/f1_1021558.png

CustomChip.xml should contain the path to the tile type


<implementation>
      <sapui5>
           <basePath>./</basePath>
           <viewName>view/CustomTile.view.js</viewName>
      </sapui5>




      </implementation>

Deploy the sapui5 app to your system

/wp-content/uploads/2016/08/f2_1021589.png

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:


/wp-content/uploads/2016/08/f3_1021590.png


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

/wp-content/uploads/2016/08/f4_1021591.png


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:


/wp-content/uploads/2016/08/f5_1021592.png


Double click on CUSTOMIZE_COMPONENT


/wp-content/uploads/2016/08/f6_1021593.png


Run the web dynpro application


/wp-content/uploads/2016/08/f7_1021598.png


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

/wp-content/uploads/2016/08/f8_1021599.png

Fill in a description

/wp-content/uploads/2016/08/f9_1021600.png

Add a new value to the parameterMultiVal

Select “parameterMultiVal” –> New –> values

/wp-content/uploads/2016/08/f10_1021604.png

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

/wp-content/uploads/2016/08/f11_1021605.png

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)

/wp-content/uploads/2016/08/f12_1021607.png

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

/wp-content/uploads/2016/08/f13_1021608.png

Preview in the launchpad designer:

/wp-content/uploads/2016/08/f14_1021609.png

/wp-content/uploads/2016/08/f15_1021610.png

5) Example of the oData service

Just a basic list of person with name and icon:

/wp-content/uploads/2016/08/f16_1021611.png

6) Result in the Fiori Launchpad

/wp-content/uploads/2016/08/f17_1021613.png

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

Enjoy!

Kind regards,

Wouter

To report this post you need to login first.

15 Comments

You must be Logged on to comment or reply to a post.

  1. Jeremy Good

    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 🙂

    (0) 
  2. Simon Temmerman

    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?

    Thanks!

    Kind Regards,

    Simon

    (0) 
      1. Akmet Gafarov

        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

        (0) 
        1. Simon Temmerman

          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?

          Thanks!

          Kind regards,

          Simon

          (0) 
          1. Akmet Gafarov

            Yeah, there are more things to do. Maybe the reason is different versions of ui5 components. I’ve copied corresponding source files from my FLP runtime (view and controller for DynamicTile and its config). Please have a look at final code – https://github.com/tozkopan/sap-flp-custom-tile

            (0) 
  3. Murthy K

    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, Akmet Gafarov

    And now its throwing the below errors:

    Kindly help on this.

     

    (0) 
    1. Wouter Lemaire Post author

      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…

      (0) 
  4. ajay Deshetty Ajay

    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.

    (0) 
  5. Wouter Lemaire Post author

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

    (0) 

Leave a Reply