SAPUI5 Application with Custom login and logout option

[former_member222282]

CONTENT

1.     Summary

2.     Pre-requisites.

3.     SAPUI5 Application.

4.     Login Screen configuration.

5.     Logout screen.

6.     Login screen Customization.

7.     Demo and testing.

 

1. SUMMARY

    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.

2. PRE-REQUISITES

1. Basic of SAPUI5 application.

2. Authorization for SICF.

3. CREATE SAPUI5 APPLICATION.

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.

4. Login screen configuration.

SICF->APPLICATION NAME(SERVICE NAME)





 

• 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.

5. 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:-

 

_handleLogout:function(oEvent){

$.ajax({  

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  

$.ajax({  

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

 

6. LOGIN SCREEN CUSTOMIZATION.

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.

6. DEMO AND TESTING.

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.