Login page for custom sapui5 applications

[former_member9607]

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 :sad: ). 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. :smile:

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 :sad: . If you have any links related to Login screen enhancements using properties file, please share it in comments. :smile:

Now moving to the solution we decided for our custom SAPUI5 Application,One of our team member who is champ of sap portal :smile: , 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 )

• Under the UI5_UI5/Sap node double click on application

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

• 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

• 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

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

• 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 :smile:

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 )

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 :smile:

Regards,

Krishnakant Joshi