Skip to Content
Author's profile photo Masayuki Sekihara

How to set a theme parameter to SAP Fiori launchpad

Please share your ideas and solutions for setting a theme parameter to SAP Fiori launchpad.

Feel free to edit this page.

Background:

URL string is long for setting a theme parameter to SAP Fiori launchpad. Users won’t type URL string and you have to give a easy way for setting a theme parameter.

Full URL string:

https://<host>.<domain>:<port>/sap/bc/ui5_ui5/ui2/ushell/shells/abap/Fiorilaunchpad.html?sap-client=<client>
&sap-theme=<theme>@https://<host>.<domain>:<port>/sap/public/bc/themes/~client-<client>

/wp-content/uploads/2014/05/logo14_454283.png

Reference: How to setup your company logo in SAP Fiori launchpad

Ideas/Solutions:

There are several ideas to give easy access.

  1. Embedded hyper link in Corporate web page. – User just click the link and link has full URL.
  2. Set default theme parameter SAP_FLP-THEME
  3. Using URL shotener tool. – There are several tools in the market.
  4. Using proxy server re-writing. – Proxy server will add a theme parameter.
  5. Specify a theme in bootstrap of app
  6. Hard coded in index.html. – You can set it without asking your IT network team.

Example 2: Set default theme parameter SAP_FLP-THEME

System default theme is defined in the transaction /UI2/NWBC_CFG_SAP.

/wp-content/uploads/2014/05/flp1_455205.png

You can chnage the system default in the transaction /UI2/NWBC_CFG_CUST.

/wp-content/uploads/2014/05/flp3_455206.png

Call Fiopri launchpad without theme parameter.

https://<host>.<domain>:<port>/sap/bc/ui5_ui5/ui2/ushell/shells/abap/Fiorilaunchpad.html?sap-client=<client>

The custom theme is set from SAP_FLP-THEME in the transaction /UI2/NWBC_CFG_CUST.

/wp-content/uploads/2014/05/logo14_454283.png

Example 6: Hard coded in index.html and starrt launchpad with /fiori.

This is just an example for starting SAP Fiori launchpad with a theme parameter by https://<host>.<domain><port>/fiori .

Theme parameter is specified in the index.html.

Steps:

1. Define external alias for Unified Shell service. Unified shell is technical name for SAP Fiori launchpad.

Transaction: SICF

Search Unified Shell service

/wp-content/uploads/2014/05/shell01_454284.png

Go To External Aliases

/wp-content/uploads/2014/05/shell02_455219.png

Select the default_host and create a system alias

/wp-content/uploads/2014/05/shell03_454325.png

External Alias name is /fiori. Target Element is /default_host/sap/bc/ui5_ui5/ui2/ushell.

/wp-content/uploads/2014/05/shell04_454326.png

Save.

/wp-content/uploads/2014/05/shell05_454327.png

/fiori is created.

/wp-content/uploads/2014/05/shell06_454331.png

2. Create index.html and hard code the full URL.

Transaction: SE80

App: /ui2/ushaell

/wp-content/uploads/2014/05/shell07_454332.png

/wp-content/uploads/2014/05/shell08_454337.png

Write short HTML code. This load Fiori launchpad with a theme parameter.

———–

<html>

<head>

    <script language=“JavaScript”>
    function loc(){window.location = “shells/abap/Fiorilaunchpad.html?sap-theme=<theme>@https://<host>.<domain>:<port>/sap/public/bc/themes/~client-<client>”;}
    </script>
</head>
<body onLoad=“loc()”></body>
</html>

———–

/wp-content/uploads/2014/05/shell09_454338.png

Activate.

/wp-content/uploads/2014/05/shell10_454339.png

3. Test the URL on browser.

/wp-content/uploads/2014/05/shell11_454340.png

Your theme is applied.

/wp-content/uploads/2014/05/logo14_454283.png

Assigned tags

      26 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Krishnakant Joshi
      Krishnakant Joshi

      Hi Masa,

      Thanks for sharing such a nice document.

      I have an idea to set the theme parameter for not only launchpad but also all the Fiori Apps.

      As per my experience, after working in this domain, let us assume a scenario where a customer/partner will have specialized graphics designer to create themes. Graphics designer will design the theme for fiori app and If he has rights to access the theme builder he/she will make changes accordingly or the fiori admin will do this job.

      Now there may be the scenario, that customer wants to have different themes for different apps and also wants that user can choose his/her choice of theme. ( like we do with Gmail)

      Thems Option.PNG

      To achieve this, we can provide an option on Launchpad to choose a theme. This will set theme parameter in the launchpad's landing page. (index.html/main.html) For fiori applications we can inherit the theme parameter which has been passed from the launchpad. or we can provide same option for applications also. This solution will also work in case of custom apps.

      To make the selection of theme permanent, of course we need to save those user specific values in the back end else we can pass the default one.

      The main advantage of this approach is to reduce the maintenance of URL. After launching the application/launchpad, application does not require to worry about the theme set in URL.

      It will give user a freedom to choose ( or build in future) his/her own theme.

      Apart from all this, we know that fiori is made for Keeping simple things simple 🙂 .. but you never know the end user's expectations 🙂 they always want more n more...

      I hope the above idea make some sense.. 🙂

      Author's profile photo Murali Shanmugham
      Murali Shanmugham

      Its a good idea too. I have a scenario where each of the Apps need to be launched from corporate application. Hence, we would be asking the team maintaining the corporate application to launch each of the Fiori Apps with the theme as a parameter.

      Author's profile photo Masayuki Sekihara
      Masayuki Sekihara
      Blog Post Author

      Updated: Example 2: Set default theme parameter SAP_FLP-THEME

      Author's profile photo Andreas Rahe
      Andreas Rahe

      Hi Masa,

      excellent info, thanks for that.

      The 2nd part (create index.html in ushell) would be a modification, right?

      At least, I get an request to add the object access key...

      Regards,

      Andreas

      Author's profile photo Masayuki Sekihara
      Masayuki Sekihara
      Blog Post Author

      It just adds index.html and there is no change for existing code.

      Author's profile photo Timothy Muchena
      Timothy Muchena

      Hi Masa

      It still requires access key, right?

      Thank you

      Author's profile photo Hemendra Sabharwal
      Hemendra Sabharwal

      Yes Eli,

      But if you follow Example 2 - Set default theme parameter SAP_FLP-THEME above in transaction /UI2/NWBC_CFG_CUST, no access key is required. Please refer below URL:

      Defining Configuration Parameters in Customizing - User Interface Add-On for SAP NetWeaver - SAP Library

      Thanks,

      Warm Regards

      Hemendra

      Author's profile photo Timothy Muchena
      Timothy Muchena

      Hi Hemendra

      I did follow example 2 but the new theme only displays when I log into Fiori. For other users its still displaying the old theme. Any idea of why its behaving that way?

      Kind regards

      Author's profile photo Hemendra Sabharwal
      Hemendra Sabharwal

      Hi Eli,

      Few days back I was also facing the same problem, Masayuki Sekihara helped me to resolve the same, please "Delete the personalization value /UI2/USER_PROFILE in SU01 for the User" probably this will help you. Kindly refer my earlier thread on the same issue:

      Setup Theme Parameter in Fiori Launchpad


      However I am still looking for mass reset of profile for all users in system.

      Thanks,

      Warm Regards

      Hemendra

      Author's profile photo Former Member
      Former Member

      Hi Masa,

      Thanks for sharing as This is an excellent Blog to refer to for FIORI THEME.

      Well there's a bug or something, I dont know coz we are facing an isue foor this.

      I have shortened the URL for our development system.

      When we try to access the shorter URL, it gives us the login page

      After we enter the login credential, the page goes blank

      there's nothing on the page

      its strange as we are able to access the LOGON page with the shorter URL but am not able to login as after entering the credentials the page goes blank.

      Can you help,

      Xherdan

      Author's profile photo Gerd Forstmann
      Gerd Forstmann

      I would consider using window.location.replace( ) instead of simply setting it.

      This avoids the ugly "cannot-navigate-browser-back via this page" effect as the
      start page is not put into the browser history.

      -----------

      <html>

      <head>

          <script language="JavaScript">
          function loc(){window.location,.replace("shells/abap/Fiorilaunchpad.html?sap-theme=<theme>@https://<host>.<domain>:<port>/sap/public/bc/themes/~client-<client>");}
          </script>
      </head>
      <body onLoad="loc()"></body>
      </html>

      -----------

      Author's profile photo Hemendra Sabharwal
      Hemendra Sabharwal

      Thanks for sharing Masa, excellent blog.

      Warm Regards

      Hemendra

      Author's profile photo BHARANIDHARAN S P M
      BHARANIDHARAN S P M

      Hi Masa,

      I am getting the below peculiar issue while using custom theme for launchpad.

      The top left is expected but the bottom right is the actual screen appearing.

      Theme.jpg

      Kindly help me regarding this issue.

      Regards,

      Bharani

      Author's profile photo Masayuki Sekihara
      Masayuki Sekihara
      Blog Post Author

      Please create a new Discussion.

      Author's profile photo Sumit Jindal
      Sumit Jindal

      Hi Bharanidharan,

      I am facing the issue similar to yours.

      Could you please help me in resolving the same at the earliest?

      I have already tried reseting the profile parameter value for the variable /UI2/USER_PROFILE.

      Regards,

      Sumit Jindal

      Author's profile photo BHARANIDHARAN S P M
      BHARANIDHARAN S P M

      Hi Sumit,

      Please create a new discussion.

      Also try clearing the theme caches.

      Regards,

      Bharani

      Author's profile photo Venkat Uppala
      Venkat Uppala

      did you solve the issue

      Author's profile photo Jocelyn Dart
      Jocelyn Dart

      Hi Venkat.

      Please do not resurrect old threads. This is against SCN Rules of Engagement. Correct approach is to post a new discussion & include a link to the old discussion. This is the fastest way to get an answer based on CURRENT advice & options

      rgds

      Jocelyn

      Author's profile photo Michael Appleby
      Michael Appleby

      Not to mention that unless you are asking for clarification/correction of some part of the Document, please create a new Discussion marked as a Question.  The Comments section of a Blog (or Document) is not the right vehicle for asking questions as the results are not easily searchable.  Once your issue is solved, a Discussion with the solution (and marked with Correct Answer) makes the results visible to others experiencing a similar problem.  If a blog or document is related, put in a link.  Read the Getting Started documents (link at the top right) including the Rules of Engagement. 

      NOTE: Getting the link is easy enough for both the author and Blog.  Simply MouseOver the item, Right Click, and select Copy Shortcut.  Paste it into your Discussion.  You can also click on the url after pasting.  Click on the A to expand the options and select T (on the right) to Auto-Title the url.

      Thanks, Mike (Moderator)

      SAP Technology RIG

      Author's profile photo Former Member
      Former Member

      Hi Masayuki

      I have been using Exmple 6 with Index.htm

      Would you advice how this will change with new Cache Buster.

      http://help.sap.com/saphelp_uiaddon10/helpdata/en/1b/eb97dba2d4414cb53ed656c0e8c70b/content.htm

      I can't find /ui2/flp in SE80.

      Thank you

      Santosh Lad

      Author's profile photo Murali Shanmugham
      Murali Shanmugham

      Hi Santosh, Cache buster is a feature available from SAP_UI SP11. You should be able to see and activate thius service from SICF.

      Author's profile photo Former Member
      Former Member

      Hello Every one,

      Please guide me how to enable https on Fiori launchpad?

      It is urgent please guide me.

      Regards,

      Faheem

      Author's profile photo Nagesh Caparthy
      Nagesh Caparthy

      Hi Faheem,

      Please post a question on SCN to get quick Reply.

      Regards,

      Nagesh

      Author's profile photo Gerd Forstmann
      Gerd Forstmann

      As an addition:
      The Fiori Launchpad allows user to personalize themes.
      Setting the default theme will not affect users who have (or had) previosly selected a differnent theme.

      To reset these users to the default theme, one has to delete their personalization data of

      key /UI2/USER_PROFILE  ( see SU01 -> tab personalization).

      Author's profile photo Former Member
      Former Member

      Hi,

      I followed all the step, had reset the   /UI2/USER_PROFILE in SU01 ->Personalization, yet the logo is not changing. I do have cleared the browser cache as well.

      UI5 version used is - 1.44.

      Could you please help. Waiting for the response.

       

      Thanks & Regards,

      Suman

      Author's profile photo SAP AIC India
      SAP AIC India

      Hi Masa,

      I have followed the steps to define short URL for SAP Fiori but I am getting below error.

      SAP Fiori URL: http://<hostname>:<port>/fiori/index.html  --> I can see below messages on window.

      <%@page language="ABAP"%>

      I removed this entry from index.html then I can see blank screen.

       

      Please help me.

       

      Thanks,

      Nagaraju