Introduction:
SAP provides the flexibility to create our own custom SAPUI5 applications to implement the custom functionality. We can create the custom UI5 apps using SAP WEB IDE Full Stack and deploy it in SAP Cloud Platform and then use it in Portal site. But sometimes we also need to use the application deployed at Cloud Platform as standalone application. We have the option to logout from the Portal site but not from the Standalone application.
In this blogppost, we will see, how we can implement the custom logout page functionality to logout from the standalone application.
Content:
To Implement the logout functionality, we will use the Userapi Logout functionality provided by SAP. I will create a dummy project to create the logout Functionality. You can use it as per the requirement.
- First Of All, Create a SAPUI5 Project from template. I have created a project with name LogoutApp.
- In the View, Give a button which will perform the logout functionality:
<mvc:View controllerName="com.sap.LogoutApp.controller.View1" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
<Shell id="shell">
<App id="app">
<pages>
<Page id="page" title="{i18n>title}">
<content>
<Button text="Logout" press="onLogout"/>
</content>
</Page>
</pages>
</App>
</Shell>
</mvc:View>
- Create a logout.html page in the Webapp Directory with the following content:
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Log Out</title>
<style>
body, button{
font-family: 'Segoe UI Light', arial, sans-serif;
}
.logoutContent{
width:577px;
height:300px;
margin:auto;
margin-top:100px;
text-align:center;
}
h1,h3{
text-align:center;
width:577px;
margin: 0px;
color:#333;
}
h1{
font-size:36px;
margin-top:30px;
}
.logoutContent .link{
margin-top:30px;
}
.logoutContent a{
color:#0f6daa;
font-size:18px;
font-weight:bold;
}
</style>
</head>
<body>
<div class="logoutContent">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 272.03" width="500" height="300">
<defs>
<style>
.cls-1{fill:#939598;}
.cls-1,.cls-2,.cls-3{stroke:#fff;}
.cls-1,.cls-7{stroke-miterlimit:10;stroke-width:3px;}
.cls-2,.cls-3{fill:#d1d3d4;stroke-linecap:round;stroke-linejoin:round;}
.cls-2{stroke-width:6.9px;}
.cls-3{stroke-width:2px;}
.cls-4{opacity:0.91;}
.cls-5{fill:#076da4;}
.cls-6{fill:#0b7dc1;}
.cls-7{fill:none;stroke:#bcbec0;}</style>
</defs>
<path class="cls-1" d="M94.51,277.56a70.46,70.46,0,1,1,99.65-.54A70.54,70.54,0,0,1,94.51,277.56Zm90.09-91.08A57.65,57.65,0,1,0,185,268,57.71,57.71,0,0,0,184.6,186.47Z" transform="translate(-15.18 -27.36)"></path><path class="cls-2" d="M21.86,232a9.5,9.5,0,0,1-3.23-6.73c-.07-6.65,5.34-15.08,48.24-21.43l1.7,11.51c-25.58,3.79-34.45,8-37.31,9.86,8.72,5.92,51.38,13.21,115.12,12.46s106.23-9.05,114.8-15.17c-2.94-1.85-12.09-5.89-38.51-9.09l1.4-11.54c43.93,5.31,49.66,13.69,49.73,20.42.29,24.29-106,26.77-127.28,27C127.4,249.51,39.83,249.55,21.86,232Z" transform="translate(-15.18 -27.36)"></path><path class="cls-3" d="M21.86,232a9.5,9.5,0,0,1-3.23-6.73c-.07-6.65,5.34-15.08,48.24-21.43l1.7,11.51c-25.58,3.79-34.45,8-37.31,9.86,8.72,5.92,51.38,13.21,115.12,12.46s106.23-9.05,114.8-15.17c-2.94-1.85-12.09-5.89-38.51-9.09l1.4-11.54c43.93,5.31,49.66,13.69,49.73,20.42.29,24.29-106,26.77-127.28,27C127.4,249.51,39.83,249.55,21.86,232Z" transform="translate(-15.18 -27.36)"></path><g class="cls-4"><polygon class="cls-5" points="322.4 50.18 308.82 35.67 340.73 5.79 343.44 8.69 314.44 35.86 322.59 44.56 351.6 17.39 354.31 20.29 322.4 50.18"></polygon><polygon class="cls-6" points="339.07 56.35 330.92 47.65 333.82 44.93 339.25 50.73 344.59 45.74 349.36 28.16 353.19 29.2 348.13 47.87 339.07 56.35"></polygon><polygon class="cls-6" points="311.9 27.34 303.75 18.64 312.81 10.15 331.77 6.32 332.56 10.22 314.7 13.83 309.37 18.82 314.8 24.62 311.9 27.34"></polygon><rect class="cls-6" x="332.84" y="53.36" width="27.82" height="3.97" transform="translate(40.64 224.61) rotate(-43.12)"></rect><polygon class="cls-6" points="355.34 14.48 356.8 4.35 346.59 5.15 346.28 1.18 361.44 0 359.27 15.05 355.34 14.48"></polygon></g><line class="cls-7" x1="311.54" y1="63.16" x2="293.69" y2="81.02"></line><line class="cls-7" x1="295.05" y1="61.8" x2="277.2" y2="79.65"></line><line class="cls-7" x1="294.17" y1="46.81" x2="275.09" y2="64.66"></line>
</svg>
<h1>Goodbye</h1>
<h3>You have logged out</h3>
<div class="link">
<a href="#" onclick="logBack();return false;">Click here to log back on</a>
</div>
</div>
<script>
function logBack(){
window.location.href = "./index.html";
}
</script>
</body></html>
I Have copied the page content from the standard Logout page from SAP and modified it.. - Structure of the project should be like the following:
- Now register the event in controller for the view:
onLogout: function () {
sap.m.URLHelper.redirect("/logout.html", false);
}
- Add the below line in neo-app.json file:
"logoutPage": "/logout.html",
- The above line in neo-app.json file will tell the application that whenever the logout.html file is called, it needs to logout from the application, which we are doing from controller part.
- Now deploy the application to SAP Cloud platform and copy the url of the activated version.
- Run in another browser to test the application.
- Click on the logout button and it will log out from the Application.
Conclusion:
The user can use the above procedure to logout from the custom standalone application. It invalidates the current session by setting the cookie validation to back dated.
NOTE: When testing this it will only log you out of the application when it is deployed to HCP and in the active state. When testing within Web IDE it will just perform the redirect without logging you out.
GITHUB SOURCE CODE
Regards
Anmol
- SAP Managed Tags:
12 Comments
