Skip to Content

Introduction

As we enter the fifth part of this blog series we will cover an important consultation based scenario focusing solely on customization of the Launchpad User Interface for the the SAP Fiori Launchpad on PortalPerhaps one of the most important aspects of any Portal involvement within an organization is the tailoring of the UI in accordance to business requirements and user preferences. The SAP Fiori Launchpad on Portal is no different and offers a “fresher” means of customization and UI tailoring.


/wp-content/uploads/2016/06/spray_can_combined_2_972289.jpg


If we reference the Fiori Framework Page (FFP) we already know there are multiple aspects from the standpoint of display elements which can be edited, changed and tweaked.


Theme (UI Theme Designer)


Upon configuring the Fiori Framework Page to your own business requirements and preferences the default theme utilized in its presentation to end users if that of SAP Blue Crystal but this can be customized also if required through the UI Theme DesignerIn relation to FIORI-applications Blue Crystal is the recommended theme to be utilized and as we mentioned it is the default theme setting for Fiori


  • For UI5 applications Gold Reflection is really recommended.

In terms of theming the UI Theme Designer is the newly released and newly available platform for both editing and generation. In terms of functional enhancements with the UI Theme Designer they key terms here are:


  • CSS
  • LESS
  • SAP UI5
  • SAP NW AS ABAP
  • SAP NW Portal
  • Usability
  • Flexibility

Screen Dimensions (Rendering Size)


Now as we touched on above when you are performing visual customization in association to the SAP Fiori Launchpad on Portal the starting point will be with UI Theme Designer. Within the UI Theme Designer when you make a change to a device type:


  • Desktop UI
  • Phone UI
  • Tablet UI


The UI Theme Designer will automatically change the Window Size for “Previews“. In terms of how the “Preview” is rendered and displayed is dependent on the underlying User Interface Framework i.e. Fiori launchpad, Fiori & UI5.


Tailoring The Theme – Getting Started


The UI Theme Designer is the complete package in terms of being singular tool for theming and branding across many of SAP UI’s. When you customize supported portal themes using the UI Theme Designer, you can preview changes you make to framework pages which is touched on above.


Let us complete a sample customization of the theme setup from an individual end-users perspective through “Personalization”.

  1. Launch the UI Theme Designer > Content Administration > Portal Display > Portal Themes > UI Theme Designer
  2. Locate the them of interest and select > Edit
  3. Open the Preview Controls
  4. Select one of the supported Frameworks.

flp1.JPGflp2a.PNGflp3.PNG

In the Quick Edit Menu you are various options to get started with the editing which include:

  • Background Color
  • Background Gradient Color
  • Base Color
  • Brand Color
  • Highlight Color
  • Font Link Color
  • Text Color
  • Image Background Image 
  • Company Logo
  • Background Opacity
  • Background Repeat

I’ve proceed to make some quick changes and tweaked the display to my favorite football team colors (who were once a great side) 🙂 .

Desktop

flp4.PNG


Mobile

flp5.PNG


Implementing a Custom Launchpad UI

https://help.sap.com/saphelp_nw74/helpdata/en/11/50eb43a3b34866bb184dd95d59d0eb/content.htm


Embedding SAPUI5 Applications into the SAP Fiori Launchpad Application Container

https://help.sap.com/saphelp_nw74/helpdata/en/04/3ee7582b7e490ba79fe19174fc6d1d/content.htm?frameset=/en/89/6efc419d994463a7c148b69



To report this post you need to login first.

6 Comments

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

  1. Devisha Bhavik

    Is the UI theme Designer available on NW 7.40 SP08? because, When I login to the portal, I do not see UI theme Designer under Portal Display.

    If that is true, how do we change the theme for Fiori launchpad on portal for this version of the portal?

    -Bhavik

    (1) 
    1. Troy Cronin Post author

      Hi Bhavik

      Many thanks for the feedback and I hope you are keeping well.

      In terms of NW 7.40 SP8 this by default incorporates the UI Theme Designer and the Theme Designer itself became default several SP’s before this.

      Could you kindly provide me with a screenshot of your theme setup and what you are seeing?

      From a high level perspective the behavior you described would point to the UI Theme Designer not being activated.

      Kind Regards

      Troy Cronin – Enterprise Portal Support Engineer

      (0) 
  2. Devisha Bhavik

    Hi Troy,

     

    Thanks for the response and sorry for the delay.

     

    I did find out that UI theme designer was not activated by default. once I did it worked fine. So, I developed the theme for FLP on portal using it. I have transported the developed theme to QA portal.

     

    Now, my question is, in order to JUST use this FLP theme in QA portal, do I have to activate UI theme designer in QA portal as well?

     

    I tried without activating UI theme designer on QA portal but the FLP theme developed on DEV portal is not getting loaded correctly on QA portal.

     

    Thanks,

    Bhavik

    (0) 
    1. Troy Cronin Post author

      Hi Bhavik

      Many thanks for the response and absolutely no problem at all, I hope everything is going well on your side.

      Surrounding your update it is good news to hear you went about activating the UI Theme Designer and did not face any issues.

      In short to answer your query on using only this theme within the QA Portal. Existing themes may be transported by including them in a standard portal transport package. However, this will not migrate (convert) them for use with the UI Theme Designer. To do so, you must import them using Transport Themes.

      If you switch back (not to use the LESS mode) the themes that you created in the new UI Theme Designer will not be available. But the themes that you created before in the old Theme Editor will stay the same, and will not be deleted or distorted (they are kept in a different location).

      The custom themes created by the UI Theme Designer are stored in the WRR and are consist of less files and css files .

      Kind Regards

      Troy Cronin – Enterprise Portal Support Engineer

       

      (0) 
    2. Troy Cronin Post author

      Hi Bhavik

      Many thanks for the response and update and it is absolutely no problem at all, I hope everything is going well on your side.

      Surrounding the UI Theme Desinger it is great news to hear that you have managed to get this activated.

      In relation to your query on utilizing UI Theme Designer themes within the QA Environment kindly allow me to provide some clarification here.

      If you disable the underlying settings of the UI Theme Designer i.e. LESS Mode this revert back to the Theme Editor. Subsequently custom themes (created with the UI Theme Designer) will be removed.

      Kind Regards

      Troy Cronin

      Enterprise Portal Support Engineer.

       

       

      Kind Regards

      Troy Cronin – Enterprise Portal Support Engineer

      (0) 
  3. Devisha Bhavik

    Thanks Troy for the confirmation.

     

    It means while LESS mode is deactivated on other Portal systems (like QA), I wont be able to use the Fiori theme developed using UI theme editor from DEV portal system even I get that theme transported using the transport package to QA. In order to use custom developed UI theme editor based themes in any portal, I have to turn ON the UI theme editor.

     

    Is that right?

     

    If that is so, I have one question. SAP developed theme for the Fiori launchpad on Portal (FLP), it is based on the LESS. This theme still works on the portal without any issues even new UI theme editor is not turned ON. So, why custom developed theme should not work?

     

    I hope you got my point.

     

    -Bhavik

    (0) 

Leave a Reply