Skip to Content
Author's profile photo Krishnakant Joshi

Login page for custom sapui5 applications

Hello friends, In this blog I am sharing my experience with Login page requirements in SAP Fiori custom development. we have created a SAPUI5 application and added it in Launchpage ( Yes it is Launchpage not Launchpad 🙁 ). Things were running great. Everything was fine as per the Fiori flow.

Login >> Tile Catalog >> Application

One day our client asked us to remove the middle interface of Tile Catalog from the flow. They wanted us to bring the user directly on application view instead of Tile Catalog after successful Login.

They also wanted to change the Login page background and company logo.

For first requirement we thought of creating a custom login page and manage everything by calling methods of standard login class or create a Z solution to mange login if possible. Now if we are doing so, we have to provide a solution for Logoff also. I read many blogs related to login issues on SCN, so first decided to search on SCN then take a call for the best suited solution. For me SCN is always the first choice to solve any problem related to any kind of issue in SAP. 🙂

For second requirement we searched on SCN and found that ”/UI2/SRA_LOGIN” class will handle everything we just need to enhance the respective methods.

Meanwhile one of my colleague was reading the Extend SAP Fiori Applications (https://help.sap.com/saphelp_fiori/fiori10_extend_en.pdf) guide and he found something by which we can mange login page changes just by creating only a single properties file in our application. This was something new for me. I have never found any blog on SCN regarding this and didn’t go through configuration guide till the end 🙁 . If you have any links related to Login screen enhancements using properties file, please share it in comments. 🙂

Now moving to the solution we decided for our custom SAPUI5 Application,One of our team member who is champ of sap portal 🙂 , used his experience and gave a solution to use standard SAP Fiori login page for our application without writing a single line of code or any custom login page. We manged the login page changes as per the solution given in the extened guide. For Logoff, we created a button in our application to call the logoff method of shell.

Steps followed:

Requirement #1: SAP Fiori Login page for custom application

  • Go to transaction SICF
  • Search for your service name (BSP Directory Name )

/wp-content/uploads/2014/06/1_479670.png

  • Under the UI5_UI5/Sap node double click on application

/wp-content/uploads/2014/06/2_479671.png

  • Click on the edit button
  • Go to Logon Data tab

/wp-content/uploads/2014/06/3_479690.png

  • Select “Alternative Logon Procedure” in Logon procedure dropdown (as per the SAP documentation by choosing this option we can change the sequence of the procedures or remove individual one).
  • Now click on Error Pages tab and select the Logoff page Tab

/wp-content/uploads/2014/06/4_479691.png

  • Here you can change the redirect URL on logoff ( When user press the logoff button in your application)
  • Now select the Logon Errors tab under same Errors Pages tab


/wp-content/uploads/2014/06/5_479692.png

  • Select the System Logon radio button at the bottom to let the system handle/generate the error pages
  • Click on the Configuration Button

/wp-content/uploads/2014/06/7_479694.png

  • Here you can make changes as per your need
  • Click on save button in main window and save your service changes
  • Run your application in browser (use application url not launchpage/launchpad url)
  • You can see the Fiori Login page 🙂



Requirement #2: Change Login page Background and Logo


Create a login.properties file as shown in below image and add it to your BSP directory or in your application WebContent Folder. Please read more about Customizing Login Page at https://help.sap.com/saphelp_fiori/fiori10_extend_en.pdf ( 4.1 )


/wp-content/uploads/2014/06/8_479695.png


Requirement #3: Logoff button


We provided a logoff button in our application which triggers the logoff event of shell. Please see the code below.



new sap.m.Button("btnLogoff",
                  {icon:"sap-icon://log",
                   press:function()
                    {
                                     var shell = sap.ui.getCore().byId("mainShell");
                     shell.attachLogout(function()
                      {
                          jQuery.ajax({url:"http://server:8000/sap/public/bc/icf/logoff",
                                       async:false}).complete(function (){location.reload();
                                      });         
                      });
                    shell.fireLogout();
                   }
                })

If you have any suggestions or if you find something wrong in above blog, please share your comments.

Happy Learning 🙂

Regards,

Krishnakant Joshi

Assigned Tags

      17 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo balaji bodagala
      balaji bodagala

      Very useful stuff 🙂 ,Thanks for Sharing your efforts.

      Author's profile photo Syam Babu
      Syam Babu

      Excellent Stuff... 🙂

      Author's profile photo Former Member
      Former Member

      Great Stuff.. Thanks for Sharing

      Author's profile photo Former Member
      Former Member

      This is great, thanks a lot ...

      Author's profile photo Former Member
      Former Member

      The login works fine, however, after a while a session timeout occurs and I get a popup with the login details (instead of being forwarded to the login page).

      Does anybody know how to configure being forwarded to the login page in case of session timeouts?

      Author's profile photo Vicente Veiga
      Vicente Veiga

      Got the same behavior after following this tutorial.

      Author's profile photo Jibin Joy
      Jibin Joy

      Hi ,

      Might help if WWW-Authenticate header is overridden. Since that popup because of this header.

      Author's profile photo Apoorv Bhargava
      Apoorv Bhargava

      Useful

      Author's profile photo Former Member
      Former Member

      Thank for sharing

      Author's profile photo Sagar Patil
      Sagar Patil

      Hi,

      Krushnakant Joshi

      Thanks for sharing..Really usefull stuff..

      Now I am able to lprovide login page for my sapui5 app. After successful log in, Is there any procedure to show logged in user in the Application Header of custom sapui5 app?

      Thanks and regards,

      Sagar M Patil

      Author's profile photo Former Member
      Former Member

      Hi Sagar Patil

      Please refer below given link to show logged in user.

      Best way to design the return of an Employee Entity for current logged in User?

      Regards,

      KK

      Author's profile photo Former Member
      Former Member

      Hi All,

      I have followed the same steps. But not able to get fiori login page and still redirected to my UI5 application Home page. Can anyone please help me ?

      Author's profile photo Vicente Veiga
      Vicente Veiga

      Hi,

      I've followed the "Requirement #2: Change Login page Background and Logo" and now, everytime I open Fiori Lauchpage, both Backgroud and Logo images are not loaded unless I fill the login browser popup with correct user and password.

      It seems that this is related with some kind of permissions to load those images files.

      Can anyone please suggest a fix for this issue?

      Thanks

      Author's profile photo Sreehari V Pillai
      Sreehari V Pillai

      Good one 🙂 Thank you

      Author's profile photo Jenish Prabhu
      Jenish Prabhu

      Nice Blog ! Thanks for sharing 🙂

      Author's profile photo Former Member
      Former Member

      can we give LDAP authentication for the login for the deployed SAPUI5 app on ABAP ?

      Author's profile photo David Fryda
      David Fryda

      Hi, thanks for your tutorial.

      I tried to change the login page but without success.

      For example, I want to add another link and text to this page.

      can you help?

       

      Thank you,

       

      Regards