cancel
Showing results for 
Search instead for 
Did you mean: 

Kapsel Logon Plugin customization

Former Member
0 Kudos

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

Accepted Solutions (0)

Answers (1)

Answers (1)

midhun_vp
Active Contributor
0 Kudos

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

Former Member
0 Kudos

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

midhun_vp
Active Contributor
0 Kudos

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

Former Member
0 Kudos

Thanks Midhun

Dan

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

Dan_vL
Product and Topic Expert
Product and Topic Expert
0 Kudos

I believe there is a sample showing how to remove the SAPUI5 framework from the iab.html file.  I guess that would be the first step.

I have not myself used the ionic framework.

In a future release hopefully the API can be simplified for the Logon plugin.

Regards,

Dan van Leeuwen

Former Member
0 Kudos

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

former_member220979
Participant
0 Kudos

Hi Midhun,

Is it possible to skip the Passcode screen? If Yes, then How?

Thanks,

Chirag.

Former Member
0 Kudos

Hi Archana,

Even i'm trying to do something similar. Can you tell me ur progress so far.

former_member190010
Contributor
0 Kudos

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