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.

25 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) 
  6. Pranav Nagpal

    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?

     

    Thanks

    Pranav

    (1) 
    1. Wouter Lemaire Post author

      Not sure about that, didn’t try that feature. Have you implemented code in your custom tile to use the device specific check boxes?

      Gr,

      Wouter

      (0) 
  7. Klaus Reiner

    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

    (1) 
    1. Wouter Lemaire Post author

      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.

      Gr,

      Wouter

      (0) 
  8. Mathias Körner

    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"?>
    <core:View 
    		xmlns="sap.suite.ui.commons" 
    		xmlns:ui="sap.suite.ui.microchart" 
    		xmlns:core="sap.ui.core" 
    		controllerName="views.KpiTile">
         <GenericTile 
      	 	id="kpiTile"
    	 	press="onPress" 
    	 	header="{/config/display_title_text}" 
    	 	subheader="{/config/display_subtitle_text}" 
    	 	frameType="TwoByOne"
    	 	mode="ContentMode"
    	 	>
            <tileContent>
            	<TileContent footer="{/config/display_info_text}">
                	<content>
                    	<ui:ComparisonMicroChart size="L" scale="L">
    						<ui:data>
    							<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" />
    						</ui:data>
    					</ui:ComparisonMicroChart>
    				</content>
    			</TileContent>
    		</tileContent>
    	</GenericTile>
    	
    </core:View>

    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?

    Best

     

    Mathias

     

    Found the solution in this blog

    https://blogs.sap.com/2017/01/28/how-to-create-custom-tile-types-for-onpremise-fiori-launchpad/

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

    <contracts>
    		<consume id="configuration">
    		<parameters>
                    <parameter name="tileConfiguration"></parameter>
                    <parameter name="col">2</parameter>
                </parameters>
    		</consume>
    (1) 

Leave a Reply