Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
claudiapacheco
Product and Topic Expert
Product and Topic Expert
7,390

Developers can use MAF Logon component to implement quickly the logon UI logic needed to onboard users with SMP 3.0. Although this component is very functional and easy to implement, companies would rarely use its default settings in mobile clients to go live. In this blog will explore some of the settings that can be modified in the MAF Logon component.

Prerequisites

The use of this component requires some dependencies that are described in this document How To... Setup MAF resources in Android Studio  Follow along and you will find that in this document we got an instance of the LogonUIFacade class and initialize it in the onCreate method of the LogonActivity as shown in the following code snippet


Code Snippet - initialize MAF Logon Component (with default settings)

   @Override

       protected void onCreate(Bundle savedInstanceState) {

              super.onCreate(savedInstanceState);

              // set context reference

        Context mContext = this;

              // get an instance of the LogonUIFacade

        LogonUIFacade mLogonUIFacade = LogonUIFacade.getInstance();

              //Initialize the Logon UI Facade

              mLogonUIFacade.init(this, mContext, <name of your application id>);

              // ask LogonUIFacede to present the logon screen

              // set the resulting view as the content view for this activity

        setContentView(mLogonUIFacade.logon());

       }

As a result, the mobile client will display the default screen flow of the MAF Logon component

Now with few more lines of codes in the onCreate method, you can customize the MAF logon component to simplify the registration process

Step 1-2: Hide MobilePlace Window and then initialize MAF Logon component

In order to hide the MobilePlace window we would need to get the logon core shared preferences settings and modify the mobile place shared property before we get an instance of the LogonUIFacade class.

Code Snippet - Hide MobilePlace window and initialize LogonUIFacade class


//STEP1: Hide MobilePlace window

SharedPreferences prefs = getSharedPreferences(LogonCore.PREFERENCE_FILE_NAME, Context.MODE_PRIVATE);

SharedPreferences.Editor pEditor = prefs.edit();

pEditor.putBoolean(LogonCore.SharedPreferenceKeys.PREFERENCE_ID_MOBILEPLACE.toString(), false);

pEditor.commit();

//STEP2: Get an instance of the LogonUIFacade and initialize it as in the original code

LogonUIFacade mLogonUIFacade = LogonUIFacade.getInstance();

mLogonUIFacade.init(this, this, "<your application id>");


Step 3: Set Default Values in login fields

Mobile clients require the SMP server URL and port in order to onboard the user with SMP 3.0. However, in most cases companies would like to set these fields with default values and hide them from the final user.  Developers can set default values with the setDefaultValue methods of the LogonUIFacade class as shown following code snippet.

Code Snippet - Set default values


//STEP3: Set Default values

mLogonUIFacade.setDefaultValue(LogonCore.SharedPreferenceKeys.PREFERENCE_ID_SUPSERVERURL, "<your smp server host>");

mLogonUIFacade.setDefaultValue(LogonCore.SharedPreferenceKeys.PREFERENCE_ID_SUPSERVERPORT, "<your smp server port>");

//type "true" if the mobile client is using HTTPS, type "false" otherwise

mLogonUIFacade.setDefaultValue(SharedPreferenceKeys.PREFERENCE_ID_HTTPSSTATUS, "<true|false>");


Step 4: Hide fields in the login details

Generally, users only know their username and passwords. Developers may want to hide the rest of the fields to simplify the registration process. By default, all fields are displayed, hence you only need to specify those fields that are going to be hidden as shown below.

Code Snippet - Hide fields


// STEP4: Hide Login details

mLogonUIFacade.isFieldHidden(LogonCore.SharedPreferenceKeys.PREFERENCE_ID_SUPSERVERURL, true);

mLogonUIFacade.isFieldHidden(LogonCore.SharedPreferenceKeys.PREFERENCE_ID_SUPSERVERPORT, true);

mLogonUIFacade.isFieldHidden(LogonCore.SharedPreferenceKeys.PREFERENCE_ID_SECCONFIG, true);

mLogonUIFacade.isFieldHidden(LogonCore.SharedPreferenceKeys.PREFERENCE_ID_SUPSERVERFARMID, true);

mLogonUIFacade.isFieldHidden(LogonCore.SharedPreferenceKeys.PREFERENCE_ID_URLSUFFIX, true);

mLogonUIFacade.isFieldHidden(LogonCore.SharedPreferenceKeys.PREFERENCE_ID_MOBILEUSER, true); mLogonUIFacade.isFieldHidden(LogonCore.SharedPreferenceKeys.PREFERENCE_ID_ACTIVATIONCODE, true); mLogonUIFacade.isFieldHidden(LogonCore.SharedPreferenceKeys.PREFERENCE_ID_HTTPSSTATUS, true);

mLogonUIFacade.isFieldHidden(LogonCore.SharedPreferenceKeys.PREFERENCE_ID_GATEWAYCLIENT, true);

mLogonUIFacade.isFieldHidden(LogonCore.SharedPreferenceKeys.PREFERENCE_ID_SUPSERVERDOMAIN, true);

mLogonUIFacade.isFieldHidden(LogonCore.SharedPreferenceKeys.PREFERENCE_ID_PINGPATH, true);

mLogonUIFacade.isFieldHidden(LogonCore.SharedPreferenceKeys.PREFERENCE_ID_GWONLY, true);


Step 5: Hide Splash Screen

In order to hide the splash screen, developers need to set the showSplashScreen to false. However, this change restores the default values, so it’s important to call it at the end.

Code Snippet - Hide Splash Screen


// ask LogonUIFacede to present the logon screen

// set the resulting view as the content view for this activity

setContentView(mLogonUIFacade.logon());

// Hide splash screen

mLogonUIFacade.showSplashScreen(false);



After these changes, the new mobile client will display the screen flow of the MAF Logon component  as follows

Hope this helps,

Claudia

14 Comments