How to Make Customizations in the SAP Fiori Logon Landing(Launch) Page?

[Former Member]

Making Changes to the Images associated with the SAP Fiori Logon Landing Page:

> The Path for accessing the SAP Fiori Logon - Landing Page MIME repository objects is:

  SAP > PUBLIC > BC > UI2 > logon > img > <logos>

here <logos> = list of image files provided below

> You can access MIME Repository by running T-code SE80(ABAP Development Workbench) and choosing the 'MIME Repository' tab on the right side with a paint like icon.

Figure 01 - Logo files via the MIME Repository in ABAP Workbench for Fiori Launch Page

Here is the list of logos,along with their purpose:

  > login_background_ie8.jpg(For Compatability with Internet Explorer 😎

  [Standard Image Resolution = 1600 x 1200]

  > login_background_mobile_land.jpg(Image for Mobile Phone in the Landscape Orientation)

  [Standard Image Resolution = 960 x 640]

  > login_background_mobile.jpg(Image for Mobile Phone in the Portrait Orientation)

  [Standard Image Resolution = 960 x 960]

  > login_background.jpg[Main Landing Page Background Image for Desktops]

  [Standard Image Resolution = 1200 x 1200]

  > On Chrome this image is shown on the following zoom levels:

  > 25%,33%,50%,67%,75%,90%,100%,110%. Does not show in higher zoom levels

  > sap_logo.png[This is company logo shown on the extreme left of the Landing Page]

  [Standard Image Resolution = 256 x 126]

  > Remember this is a .png file,allowing full transparency for logos to get a see through effect against the Background Image.

  > On Chrome it does not show logo on the following zoom levels:

      > 400%,500%

Standard Actual Images for the SAP Fiori Logon LaunchPad(Landing Page) that come as default:

favicon.ico	login_background_ie8.jpg	login_background_mobile_land.jpg	login_background_mobile.jpg	login_background.jpg	sap_logo.png

How the Default SAP Landing Page Looks like with Default Images as per images mentioned above:

Figure 1(a) - Default SAP Fiori Landing(Launch) Page

Methods for changing the Default Images of the Landing Page:

There are two ways in which default images of the Landing page could be replaced with your own custom images.

(01)Replacing Original Files with your own custom Images in the MIME repository path for the Landing Page:

You can right click on the path of the landing page specific images and choose from the menu path 'Upload / Download > Upload and Replace'. A Pop-up Dialog box will open up where you can select the image to be replaced with the existing image,select it and you will be prompted with a security warning,just click the [] button to replace it. If you are doing it for the first time,you will be asked for Transport Request Creation.

Figure 1(b)_1: Replacing Existing Image via MIME Repository's Context menu

Figure 1(b)_2: Dialog Box for Selecting an Image

Figure 1(b)_3: SAP GUI Security Dialog Box

(02)Uploading Custom Images in the MIME Repository and assigning there paths including the image name in the class '/UI2/CL_SRA_LOGIN' within its method 'INIT_DEFAULT_PROPERTIES':

You can add a new custom image in the MIME Repository by right clicking the directory and choosing the menu path 'Import MIME Objects'. You will be prompted with a pop-up from which you can select an image and the you will be prompted with a security warning,just click the [] button to upload the image. You will be prompted to create a Transport request.

Next step,would be in assigning the image path along with the image name in the class named '/UI2/CL_SRA_LOGIN' and within its method of ''INIT_DEFAULT_PROPERTIES'. There you will find a list of variables in the name / value pairs of variables as follows:

  set_property( iv_name = 'img_favicon' iv_value = '/sap/public/bc/ui2/logon/img/favicon.ico' ).
  set_property( iv_name = 'img_logo' iv_value = '/sap/public/bc/ui2/logon/img/sap_logo.png' ).
  set_property( iv_name = 'img_logo_width' iv_value = '64' ).
  set_property( iv_name = 'img_background' iv_value = '/sap/public/bc/ui2/logon/img/login_background.jpg' ).
  set_property( iv_name = 'img_background_mobile' iv_value = '/sap/public/bc/ui2/logon/img/login_background_mobile.jpg' ).
  set_property( iv_name = 'img_background_mobile_land' iv_value = '/sap/public/bc/ui2/logon/img/login_background_mobile_land.jpg' ).
  set_property( iv_name = 'img_background_ie8' iv_value = '/sap/public/bc/ui2/logon/img/login_background_ie8.jpg' ).

Just replace the 'iv_value' dataobject with the MIME repository path and the image with extension.

Changes that can be done in the Class associated with the SAP Fiori Logon Landing Page:

> Similary,apart from these logos,you can also change the copyright notice,provided at the bottom right of the Fiori Landing Page. This can be modified using the class named '/UI2/CL_SRA_LOGIN'. Its has attributes or properties that could be changed. The method where all properties that can be changed with regards to Main Fiori Logon Landing Page is 'INIT_DEFAULT_PROPERTIES', which are basically named-value pairs. Search for a property named 'label_copyright' and just beside their is a variable named 'iv_value'. This is where you can assign a copy right notice. Here is a Sample Code for copyright notice:

Figure 02 - ]Class '/UI2/CL_SRA_LOGIN' for Customizing Fiori Launch Page

______________[Copyright Notice Code Snippet][START]

  DATA:

        current_year type sy-datum,

        cpyr_not type string.

current_year = sy-datum+0(4).

CONCATENATE '©Copyright' current_year '.All Rights Reserved by <Company_Name>.' into cpyr_not SEPARATED BY space.

  set_property( iv_name = 'label_copyright' iv_value = cpyr_not ).

______________[Copyright Notice Code Snippet][END]

List of Properties that can be modified in the 'INIT_DEFAULT_PROPERTIES' method in the '/UI2/CL_SRA_LOGIN' class:

(01)header_visible(for displaying or hiding header section at the top of the Fiori Landing Page)

(02)img_favicon(MIME Directory Path to the favourite icon(.ico file))

(03)img_logo(MIME Directory Path to the Company logo to the left side of the Fiori Landing Page)

(04)img_logo_width(For Overriding the Width of the Logo)

(05)img_background(MIME Directory Path to the Desktop based Image Background)

(06)img_background_mobile(MIME Directory Path to the Mobile Size based Image Background)

(07)img_background_mobile_land(MIME Directory Path to the Mobile Land Size(Tablet based size) based Image Background)

(08)img_background_ie8(MIME Repository Directory for Image for Internet Explorer 😎

(09)label_copyright(For showing up the copyright notice at the right bottom of the Fiori Landing Page)

(10)label_user(For Changing the Label text of the User Input field)

(11)script_included(path of the Javascript file running within The Launchpage,for popping up messages and so on)

(12)style_confirmpwd_error()

(13)template_css(Cascading Style Sheet for styling the entire Fiori Launchpage)

(14)template_css_ie8()

(15)ui5_theme()

(16)text_error_user_initial()

(17)text_error_pwd_initial()

(18)text_error_client_initial()

(19)button_focus_color()

(20)button_submit_focus_color()

(21)message_error_background_color()

(22)message_error_border_color()

(23)message_error_focus_color()

(24)message_info_background_color()

(25)message_info_focus_color()

//For Context Specific Properties

//co_context_login:

(26)label_button_login()

(27)label_button_login_loading()

(28)label_change_password()

(29)label_client()

(30)label_language()

(31)label_password()

(32)label_title_login()

(33)template_login()

//co_context_changepwd:

(34)label_button_cancel()

(35)label_button_change()

(36)label_confirm_password()

(36)label_current_password()

(38)label_new_password()

(39)label_title_changepwd()

(40)template_changepwd()

//co_context_changepwd_end:

(41)label_button_continue()

(42)label_title_changepwd_end()

(43)template_changepwd_end()

//co_context_changepwd_cancel:

(44)label_button_changepwd_not_possible()

(45)label_title_changepwd_not_possible()

(46)template_changepwd_cancel()

//co_context_msg:

(47)script_msg_selfsubmit_error()

(48)script_msg_selfsubmit_info()

(49)script_msg_selfsubmit_ok()

(50)label_msg_class_error()

(51)label_msg_class_info()

(52)label_msg_class_ok()

(53)button_msg_class_error()

(54)button_msg_class_info()

(55)button_msg_class_ok()

(56)label_button_msg_error()

(57)label_button_msg_info()

(58)label_button_msg_ok()

(59)label_title_msg_error()

(60)label_title_msg_info()

(61)label_title_msg_ok()

(62)template_msg()

> Do also take not of the naming of these attributes. They do explain what the property does. for example:

> header(This is a Section)

> img(This is an image file,usually associated withlanding page)

> label(Labels of Logon Buttons)

> script(Script code)

> style(Cascading Style Sheets)

> template(for html landing page etc.)

> text(Properties associated with Input Fields)

> button(Buttons properties like states,labels etc.)

> message(Styles associated with messages)

> color(color code in Hexa notation e.g:  #d0d0d0 )

[Note(s):]

> Before we can modify these attributes or properties while using this class,you need to have a Developer License on Front-End System[SAP Gateway].

> Secondly,the launchpad needs to be assigned the class named '/UI2/CL_SRA_LOGIN',before it can utilize the features of the class such as changing copyright notice. We need to do this by going to the Launch page path in 'SICF'.

  'default_host > bc > ui5_ui5 > ui2 > launchpage'

and also this service needs to be activated.

Figure 03(a) - Launchpage service in SICF

Figure 03(b) - Custom Configuration for Customizing the Launch Page

Custom Configuration can be done for the 'launchpage' service by double clicking it in SICF,and then going to the 'Error Pages' tab and selecting the 'System Logon' radio button. Just beside the System Logon radio button[] is the 'Configuration'[] button for customizing. Click on it and this will show a pop-up menu,first you need to select the 'Define Service-Specific Settings' where you need to assign a class for customizing the Landing page named '/UI2/CL_SRA_LOGIN' by selecting the 'Custom Implementation' [] radio button and providing the class name mentioned above in the 'ABAP Class' Input field

[]

in the 'Logon Layout and procedure' Frame [].

Don't forget to click the save button [] to save this custom configuration.

There are further options with regards to the Input fields and their labels that are available in SAP Landing Page. These are available in the 'System Logon Settings' frame and then within the 'Select Display' frame.

Checking these Check Boxes 'System ID','Client','Language','System Messages' and 'Logon and System Information' will show the appropriate fields and behavior on the SAP Fiori Logon Landing Page.

Figure 03(c) - EnablingAdditionalLandingPageFields

> To test the Fiori Launch page,just go to the directory path of the 'launchpage' in T-Code SICF,right click on it and choose 'Test Service' from the context menu to test it. This launch page will open up in  a browser window. In case you are having trouble running the Fiori Launch page,check out this document titled

'How to Access SAP Fiori Launchpad and other Browser based Transactions in an SAP Fiori Deployment?' for setting up a host entry before you can run it. Here is the link for accessing that:

How to Access SAP Fiori Launchpad and other Browser based Transactions in an SAP Fiori Deployment?

[Note(s):]

Using the 'template_css.css' cascading style sheet to stylize changes in the Fiori Launchpad Page:

you can also change the styling of your Fiori Landing page using the Cascading Style sheet named 'template_css.css'. You can right click this file and choose the 'Change...' option from the context menu,which will open it in notepad or other default text file application.

> For changing the color of Buttons and others via the 'template_css.css' cascading stylesheet. I have used the following:

> @button_focus_color(change button background color)

> sapUiSraLoginPage(All CSS selectors associated with the Login page)

> you can also refer to following line in template_css.css file:

/* Login animation */

.sapUiSraLoginPage { opacity: 1; transform: scale(1); transition: all 0.5s cubic-bezier(0.420, 0.000, 0.580, 1.000); -webkit-transform: scale(1); -webkit-transition:

here changing these parameters also affect the animation,once the Fiori Launchpage Loads.

Customized Fiori Logon Landing(Launch Page):

Here is a customized version of the SAP Fiori Launch Page:

Figure 03(d) - Customized SAP Fiori Launch Page

The following techniques were used for implementing this customized SAP Fiori Launch Page.

> For Input field Labels,i have used the following properties:

    > label_user (For changing the Label for Input field User in this case the text is 'Enter in a User')

    > label_password (For changing the Label for Input field Password in this case the text is 'Enter Password')

    > label_language (For changing the Label for Input field Language in this case the text is 'Select Lang')

    > label_client (For changing the Label for Input field Client in this case the text is 'Select Lang')

> For Changing the Copyright text at the bottom right,the following property is assigned some text:

    > label_copyright(For changing the Copyright line Text e.g: ©Copyright 2016 Fahad Javed.All Rights Reserved.)

These properties are assigned in class '/UI2/CL_SRA_LOGIN' and within its 'INIT_DEFAULT_PROPERTIES' Instance Method.

> For the Logo,at the bottom left of the Fiori Launch page,i have replaced the 'sap_logo.png' image with an image of my own with the same file name.

> For the Background Image,i have replaced the 'login_background.jpg' image with my own,with the same file name.

Extras:

Tip[01][NEW] - How to assign Fiori Launchpage to Fiori Launchpad and redirecting to it when logging off from Fiori Launchpad:

For Handling Logon page and logon off page redirection when accessing Fiori Launchpad,access the document with the link below:

How to assign Fiori Launchpage to Fiori Launchpad and redirecting to it when logging off from Fiori ...