Set Up a Login Layout

Learn how to create a Point of Sale login layout with input fields and link it to an app config, ensuring seamless user authentication and a smooth login experience. Set up the login deep link to direct users to the correct page, enhancing user convenience and security.

Login Layouts are built with the Layout Editor. The easiest way to get started is with a template:

Create a Login Layout

  1. In the CMS, go to Layout Pages | All Layouts.
  2. Click Add From Template and select Login.
  3. Select a font and click SELECT.
    Note
    Note In addition to the dropdown list of fonts you can enter the font name manually. Out-of-the-box iOS supports many fonts. Go to iosfonts.com for the entire list.

Input Fields

The input fields are configured as form elements. To edit the login input fields:

  1. Double-click the input field to launch the form element editor.
  2. Make edits.
  3. Click SET FIELD.
    Note
    Note The JSON key values in the sign-up template are configured for Point of Sale demos. For a production application, the JSON key values for each input should be configured to match the values that the relevant backend systems expect. The possible values include: credentials.userId credentials.password

Login Button

The login button is configured as a form element with a "Login" button action. To edit the login button:

  1. Double-click the button to launch the form element editor.
  2. Enter the text to display on the button and select Login as the button action.
  3. Click SET FIELD.

Linking a Login Layout with an App Config

A Login Layout must be assigned to the app config before the login deep link will work.

  1. Click EDIT CONFIG.
  2. Go to ADVANCED | SIGNUP / FORM LAYOUTS.
  3. Select the Login Layout from the dropdown.

Editing a Login Layout

A Login Layout is assigned to the app config, so start by editing the app config:

  1. Click EDIT CONFIG.
  2. Go to ADVANCED | SIGNUP / FORM LAYOUTS.
  3. Click the Edit icon next to the Login Layout.