Skip to Content
Author's profile photo Munna Mishra

SAPUI5 Application with Custom login and logout option


1.     Summary

2.     Pre-requisites.

3.     SAPUI5 Application.

4.     Login Screen configuration.

5.     Logout screen.

6.     Login screen Customization.

7.     Demo and testing.



    SAP provide Fiori Launchpad to launch all SAPUI5 application as a tile. But sometime Launchpad is not configured in the customer system, they don’t want to give access of Launchpad to some user, they don’t want to launch that application in Launchpad but still they want login screen and logout screen for that application.


1. Basic of SAPUI5 application.

2. Authorization for SICF.


Creation of demo SAPUI5 Application with demo data and deploy on server.

So here we create a demo application which we can run directly from index.html page. For time begin Forget about that logout button. Now we will discuss about how we can configure login page for this application.

  1. Login screen configuration.



  • Click on Edit Button.
  • Go to Logon data Tab.

  • Select “Alternative Logon Procedure” Logon procedure drop down

  • Now click on Error 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 launch-page/launchpad URL).

Now when you run that application, this login screen will come which is exactly the same as the Fiori Login screen.


Here we discuss about login page for sapui5 Application You can do future customisation for that login screen. First we will discuss about logout page. Than we will do further customisation for that login Page.

  1. Logout screen.

I already add one icon for logout process on press of that icon I want to logout from this application. We need to do some coding for logout process.


Code for Logout button:-


type: "GET",  
url: "/sap/public/bc/icf/logoff",  //Clear SSO cookies: SAP Provided service to do that  
}).done(function(data){ //Now clear the authentication header stored in the browser  
if (!document.execCommand("ClearAuthenticationCache")) {  
//"ClearAuthenticationCache" will work only for IE. Below code for other browsers  
type: "GET",  
url: "/sap/public/bc/icf/logoff", //any URL to a Gateway service  
username: '', //dummy credentials: when request fails, will clear the authentication header  
password: '',  
statusCode: { 401: function() {  
//This empty handler function will prevent authentication pop-up in chrome/firefox  
} },  
error: function() {  
//alert('reached error of wrong username password')  
var myVar = setInterval(function(oEvent){
window.location.replace("/sap/bc/ui5_ui5/sap/zdemo/index.html");}, 100);


Now deploy application to server and test logout functionality. It will work.

Login Page:-

On pressing of logout button:-



Tcode :SCIF->ServiceName

Go to Error tab->Configuration


Create Z copy of that class and make changes in that class.


Now change that class name in SICF.


Now we will change login screen based on our company requirement.

TCODE ->SE80->Select MIME Repository->PUBLIC->BC->UI2->CUSTOM(Create Folder).

Here we upload two images, one for company logo and second for background. Now we change this class to change company logo and background image.


Save and activate.


After making all the changes and run that application. Now we customize login screen and changes SAP logo to company logo.


On press of Logout icon.





Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Hi ,

      Thank you, a very good demo of the login screen. I have a question regarding how the username and password and verified in the login screen?



      Author's profile photo Munna Mishra
      Munna Mishra
      Blog Post Author

      Hi Nirmala,


      It will do all login validation which is follow by Fiori Launhpad. Basically /UI2/CL_SRA_Login classs will handle all validation.


      Thanks and Regards

      Munna Mishra


      Author's profile photo Klaus Reiner
      Klaus Reiner


      when I deploy the application from WebIDE to the on-Prem-System, a BSP application is created.

      When testing the BSP, the index.html is opened, same when I test the application from SICF. But
      not the component.js So how is it possible to start the application just the same way as if it would
      be called by the Fiori-Launchpad (component instead of index. html)?

      Thanks, Klaus

      Author's profile photo Klaus Reiner
      Klaus Reiner



      Hi, just had to change src=“../…/resources/sap-ui-core.js”  to
      src=“resources/sap-ui-core.js” in index. html

      Then it worked perfectly.

      Kind regards,

      Author's profile photo Dirk Wieland
      Dirk Wieland

      Hello Munra,

      thanks for the demo. We've tried to implement it for one of our UI5 apps. runnning on SCP Neo, but unfortunately it doesn't work (see link below). Do you think a problem could be, that our UI5 application is not on-prem. but running in cloud?

      Thanks in advance,