on 05-24-2015 9:17 AM
Hi,
I am trying to style the login screens with Ionic framework in the kapsel logon plugin .The fields in the logon plugin are stored in StaticScreens.js, when changing some fields to 'visible:false', the field is not visible anymore but the server is not connecting, so, if the field is hidden, the plugin is not getting the information. I want only to display "username" and "password" on the main page with a specified background.
The logon plugin is using ui5 to display the screens, but I need to style that with a different framework .
Is there anyway that I can customize the screen and send the information to the plugin on clicking the event of the login screen?
Could anyone please help me to resolve this.
Thanks ,
Archana Vasudevan
Hi Archana,
The application should be able to connect to your server even when you hide the fields on the screen. I have tried it.
If some of the fields are mandatory for the registration pass it from context as given below.
var appId = "com.sap.policydemo"; // Change this to app id on server
var smpServerProtocol = "https";
var smpServerHost = "hcpms-p123456trial.hanatrial.ondeman";
var smpServerPort = "443";
// Optional initial connection context
var context = {
"serverHost": smpServerHost, //Place your SMP 3.0 server name here
"https": smpServerProtocol == "https",
"serverPort": smpServerPort,
"user": "smpAdmin", //user name for registration and OData Endpoint
"password": "s3pAdmin", //password for registration and OData Endpoint
//once set can be changed by calling sap.Logon.changePassword()
"communicatorId": "REST",
"passcode": "password", //note hardcoding passwords and unlock passcodes are strictly for ease of use during development
//once set can be changed by calling sap.Logon.managePasscode()
"unlockPasscode": "password",
"passcode_CONFIRM":"password",
"ssoPasscode":"Password1"
};
Given below is the changed code in staticscreen.js
'SCR_REGISTRATION': {
id: 'SCR_REGISTRATION',
nav: {
submit: {
},
cancel: {
}
},
fields: {
serverHost : {
uiKey:'FLD_HOST',
editable:true,
visible:false
},
user : {
uiKey:'FLD_USER'
},
password : {
uiKey:'FLD_PASS',
type: 'password'
},
resourcePath : {
uiKey:'FLD_RESOURCE_PATH',
visible:false
},
https: {
uiKey:'FLD_IS_HTTPS',
type: 'switch',
'default':false,
visible:false
},
serverPort : {
uiKey:'FLD_PORT',
type: 'number',
editable:true,
visible:false
},
farmId : {
uiKey:'FLD_FARMID',
visible:false
},
communicatorId : {
uiKey: 'FLD_COMMUNICATORID',
'default':'REST',
visible:false
},
securityConfig: {
uiKey:'FLD_SECCONF',
visible:false
},
}
},
With the above code the login screen should look like this:
The logon plugin uses SAPUI5 library. There is an example on how to customise the SAPUI5 libraries -
Regards,Midhun
SAP Technology RIG
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Midhun,
Thanks for your response.
Is there any possible way to integrate with another framework( Ionic ) instead of ui5 ?
If not, is it a good idea to style the staticscreen.js
For eg: I want my screen to look something like this ,as of now I havn't added any background image to the screen.
Thanks ,
Archana
Hi Archana,
I don't know about the possibility of using Ionic framework instead of UI5. May be Dan could help you.
Regards,Midhun
SAP Technology RIG
Thanks Midhun
Hi Daniel,
Could you please help me on this .
I want to customise my screens in ionic framework instead of ui5 and can I know where the registration screen is designed in the plugin other than staticscreen.js .
Thanks,
Archana
Hi Daniel,
Yes, I have removed all SAPUI5 and added Ionic framework under www folder , then I have modified the index.html . Now, I am able to integrate with Ionic Framework but still facing some issues on registration . Right now I am debugging and understanding the logon plugin code.
Thanks for your update.
Thanks & Regards,
Archana
Yes, it's possible to skip the passcode screen.
You can find the information in the following post:
Extracted from the post:
In SP03, a method was added that enables a developer to further customize the screens shown by the Logon plugin. The following example code can be added to register3.html. This code will enable the Registration screen and the passcode screen to be skipped. Specifically replace the call to sap.Logon.init with the below code.
//The Logon UI can be customized by adding a custom method to handle showScreen var logonView = sap.logon.IabUi; logonView.onShowScreen = customShowScreen; logonView.onShowNotification = customShowNotification; sap.Logon.init(logonSuccessCallback, logonErrorCallback, appId, context, logonView);
Add the following two methods.
function customShowScreen(screenId, screenEvents, currentContext) {
if (screenId =="SCR_SSOPIN_SET") {
screenEvents.onskip();
return true;
}
else if (screenId =="SCR_UNLOCK") {
var context = {
unlockPasscode: "Password1@"
}
screenEvents.onsubmit(context);
return true;
}
else if (screenId =="SCR_REGISTRATION") {
screenEvents.onsubmit(currentContext.registrationContext);
return true;
}
else if (screenId =="SCR_SET_PASSCODE_MANDATORY") {
var context = {
passcode: "Password1@",
passcode_CONFIRM: "Password1@"
}
screenEvents.onsubmit(context);
return true;
}
else if (screenId =="SCR_SET_PASSCODE_OPT_ON") {
screenEvents.ondisable();
return true;
}
else if (screenId =="SCR_SET_PASSCODE_OPT_OFF") {
var context = {};
screenEvents.onsubmit(context);
return true;
}
return false; //skip the default value
}
function customShowNotification(screenId, notificationKey) {
if (screenId == "SCR_SSOPIN_SET" || screenId == "SCR_UNLOCK" || screenId == "SCR_REGISTRATION" || screenId == "SCR_SET_PASSCODE_MANDATORY" || screenId == "SCR_SET_PASSCODE_OPT_ON" || screenId == "SCR_SET_PASSCODE_OPT_OFF" ) {
alert(notificationKey);
return true;
}
return false;
}
Best Regards,
Emanuel
User | Count |
---|---|
84 | |
24 | |
11 | |
9 | |
7 | |
6 | |
5 | |
5 | |
5 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.