Configuring Fiori Tiles in sap portal sites

In this blog we will see how to create and configure a tile using the Fiori configuration cockpit.

When configuring a tile, there are four key things which you need to pay attention to: app resources, navigation, visualization, and assignment.

 

 

The first and foremost step is to select the app resources. You can configure apps which are based on SAPUI5 applications, classic UIs like SAP GUI and Web Dynpro ABAP, RSS news feeds, SAP Mobile Documents folders, or any arbitrary URL which will launch in the new window. There is also a special app type called "shell plugin" which can be used to provide additional functionality to the launchpad.

Once the app resources have been identified, the next step is to configure the navigation. Fiori launchpad supports navigation using intents or URLs. Intent is a unique combination of a semantic object and an action.

You can then proceed to configure the visualization aspects of a tile by selecting from the list of available tile types. The Fiori launchpad supports static tiles, dynamic tiles, KPI tiles, and also custom tile types.

And finally, you need to assign your apps to the respective catalogs and groups. This way, the end users would get access to these apps on their Fiori launchpad based on their roles.

Apart from using the Fiori configuration cockpit, there are a few other ways you could configure a tile. There is an app resources menu within the Fiori configuration cockpit which lists all the deployed HTML5 apps. You can add the app configuration directly to the site from here.

Another option is to create an app configuration directly from SAP Web IDE, which is the development environment in the cloud platform. Once you develop your SAPUI5 applications in Web IDE, you can deploy them to the cloud platform and use the wizards to configure an app on the Fiori launchpad site.

Here are the different tile types which are available in the Fiori launchpad.

 

 

      1) A Static tile, as the name suggests, displays static content – you can configure a title, subtitle, and an icon.

      2) A Dynamic tile displays the same information as a static tile and, in addition, displays data which gets updated at regular intervals via an OData service.

      3) KPI tiles display KPI information on a tile in near real time.

      4) There is also a News tile type, which is to be used when configuring a news app type.

      5) You can use the Custom App Launcher to create a custom tile with a different look and feel.

Steps to Create/configure a Tile in Fiori Launchpad Portal Site

      1) Click on “New” icon at the bottom of the master page.

      2) The next thing we need to do is select the app resources, so use the browse option.

      3) Now from the list of apps, we can browse which of the apps we want to configure.

      4) Let’s say we have picked "es4products" app which has already been deployed to the cloud platform account.

 

 

      5) Provide a suitable Subtitle; here I am giving as “List of products”.

      6) The next step is to define the navigation, so I need to give a unique combination of semantic object and action. So here I have provided the Semantic objects as es4products and Action as Display.

      7) And the next section is "App Resource Details". So based on the app type, the properties of the app resource details will vary. In this case, since this is a SAPUI5-based application, it prompts me to provide component details. All the defaults values are already set.

 

 

     8) Then we have the “Assignment Section”, this is where you can assign an app to catalogs and groups. So I can use the help menu here to look at all the catalogs which are already available on the portal site.

Note: in the latest version we have dedicate tab for catalog and groups.

     9) Then we have a visualization tab, where we can configure what a tile should look like in the Fiori launchpad. We have different tile types to choose from, like static, Dynamic, KPI tile etc.

      10) The next tab here is "Parameters". Whenever you're looking to pass a parameter during navigation, you can use the option here. What this does is pass the parameters to the application that is being called.

So you have an option to provide a name for your parameter, you can mark whether it is mandatory, or also if you want to put in a default value – you can do all those things here.

With that, we will save the app configuration.

So with this, we have configured our tile, but you would notice that there is a sort of warning message at the top which says the app is not yet assigned to a catalog and in the next blog we will learn how to create a catalog and assign this app to a catalog.

• Tweet
• Share
• Share
• Share
• Share

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Related Post