Managing User Interfaces with UI Builder

SAP Customer Data Cloud offers out-of-the-box registration, login, and other flows that cater to most user scenarios. These flows are presented as sets of successive screens, known as Screen-Sets. You can customize these flows to match your specific requirements.

Screen-Sets are a collection of screens that guide users through various processes, such as registration, login, and profile updates. These sets can be tailored to fit your specific needs.

You can customize these flows in several ways:

• Modify the appearance of screens, including adding or removing fields and setting fields as mandatory.
• Alter the flow by adding new screens or changing the sequence.
• Modify user-facing error messages to provide clearer guidance.

By default, all Screen-Sets are responsive, automatically adjusting their size to fit the device they are displayed on. Screen-sets are displayed on your page after loading the SAP Customer Data Cloud SDK by calling accounts.showScreenSet.

SAP Customer Data Cloud offers a variety of flows, including:

• Registration Flows
• Login Flows
• Passwordless Registration Flows
• Passwordless Login Flows
• Update Profile Flow
• Link Accounts Flow
• Re-Authentication Flow
• Forgot Password Flow
• Subscriptions Flow
• Lite Registration Flow
• Organization Registration Flow
• Communications Flow
• IdentifierFirst Flows

For more information, refer to Screen-Setsin the SAP Help Portal.

The Update Profile flow allows users to view and edit their profile information. This flow can be initiated by users or triggered under certain conditions, such as in a progressive profiling scenario.

The update profile screen is initiated by calling:

123
gigya.accounts.showScreenSet({
     screenSet: ‘Default-ProfileUpdate’,
});

You can add fields to this screen and additional screens to the Update Profile flow.

• Privacy and Communication Screens
• Change Password
• Phone Number Update
• Email Update
• TFA Authentication Flows

In addition to standard flows, several advanced options can be triggered during registration, depending on your implementation.

This screen appears when information is missing from the user's profile, ensuring all required fields are completed. Make sure you include any necessary fields in this screen, otherwise users cannot complete their registrations.

Here are situations where this screen is needed:

• Users register with a social network that doesn’t provide required schema fields.
• Your site requires customer consent, and the user has not provided it.
• A schema field is mandatory but the user has not yet entered data for it.

This flow is triggered when a user attempts to create a new site account or register with a social network, but an existing account is found with a different login method (for example, the email is already associated with a social network-based registration).

If your site policy requires email verification, this flow is automatically initiated upon registration.

Users can initiate a password reset flow from any registration or login screen.

The UI Builder is a web-based tool that allows you to create and manage user management workflows through an easy-to-use drag-and-drop interface.

The UI Builder gives you the flexibility to match the look and feel of your site, tailor your implementation in terms of design, structure, fields, and content, and optimize screens for mobile environments to collect unique data from mobile users.

The UI Builder is a WSIWYG canvas that offers:

• Drag-and-drop visual editing
• Preview on multiple devices
• Localization canvas for handling language translations
• Field mapping that supports a dynamic schema
• CSS and HTML editor for custom designs
• JavaScript Parameters for handling screen-set events

You can customize and edit screen-sets in the UI Builder by modifying their properties in the right-hand menu. Select a screen from the dropdown or click within an open screen to access its properties.

You can edit a screen's behavior to create custom registration and login flows. Options include:

• Behavior - Define the screen's behavior, useful when cloning or creating new screens.
• Success Screen - Determine which screen to display or end the flow upon completion of the current screen. You can call screens from other screen-sets if needed.

For more information, refer to Screen Properties in the UI Builderin the SAP Help Portal.

Conditional workflows allow you to dynamically change screens based on user responses. This can be achieved via the UI Builder or Markup Extensions.

The Visible When field allows you to attach a JavaScript expression to a field, determining whether it should be displayed to the user. If the expression evaluates to true, the field is shown; otherwise, it is hidden. You can specify that this evaluation should occur only prior to the element being displayed; that way, if the evaluation result changes during the screen session, the field will not disappear.

This property is not available for screens that do not contain account information.

A condition is written as: mapping.field === true/false. Fields with conditions have a dashed yellow border.

For more information, refer to Conditional Workflowsin the SAP Help Portal.

The UI builder features standard controls that you can manage on your screen. These controls are available in the left menu of the UI Builder.

• Header: Adds a custom text line to the top of the screen-set dialog window.
• Label: Adds a custom text line with a smaller font than in a header control.
• Link: Adds a custom hyperlink to the current screen.
• Textbox: Adds a text input field for collecting or displaying data.
• Image: Adds an image placeholder to the screen.
• Login ID: Adds a Login ID input field.
• Password: Adds a password input field.
• Metadata: Adds a hidden field for collecting, storing, or writing data relevant to the user’s interaction with the screen.
• Dropdown: Adds a drop-down Select input field control.
• Option Group: Adds a radio button selection control.
• Checkbox: Inserts a single checkbox that returns a true or false response.
• Form Error: Adds an empty area to display general form errors.
• Spacer: Adds a space divider to separate screen sections.
• Button: Adds a button to the screen.

For more information, refer to Standard Controls Available in the UI Builderin the SAP Help Portal.

Each screen in the screen-set is comprised of widgets. You can edit these widgets and add them to your screens. The widgets are available in the bottom-left menu of the UI Builder. Drag and drop the widgets you want included onto the editing window.

• Phone Widget - Enables the user to enter a phone number.
• Array Manager - Adds a dynamic array to a screen.
• LoginID Availability: Adds a graphical popup to indicate username availability.
• Google reCAPTCHA - Adds a CAPTCHA to deter bots from account harvesting.
• Social Login: Adds the ability to log in via supported social networks.
• My Photo - Adds and displays the user's profile photo.
• 2-Factor Authentication - Adds a widget that allows enabling Two Factor Authentication.
• Subscription - Adds a subscription checkbox (if the Legacy Account Model is used).
• Consent - Displays the current status of specific consent statement and the date on which their status was modified

For more information, refer to Widgets Available in the UI Builderin the SAP Help Portal.

When you edit and save an existing screen-set, it is saved as a new version, allowing you to revert to previous configurations.

Open the Version Control screen by selecting Version Control from the Actions menu.

You can view all the versions of the current screen and who edited (saved) each version. Select a previous version from here and re-save it to roll back your active screen-set.

• Once a screen-set is saved from the Advanced Customization window, you can no longer use the UI Builder on that screen-set or any later version.
• To regain UI Builder functionality, revert to a previous version that is still accessible via the UI Builder and re-save it.
• Rolling back a screen-set will remove any changes made since the previous screen-set was active.

Manage your screen-set's translations using the UI Builder Localization canvas. SAP Customer Data Cloud provides default translations for 40 languages (including regional and informal variants, that’s 48 locales).

When using the localization tool, you must add the new locale(s) to every screen set in the Screen-Set Collection used on your site and provide any missing translations (the localization page warns you of missing translations). You may also add custom locale codes; if you do, you’re entirely responsible for providing appropriate translations.

The Localization table already includes the default locale, English, which cannot be deleted, edited, or imported.

• To add a new supported locale, select Add Locale and choose the locale from the table.
• To add a custom locale, scroll to the bottom of the list.

For more information, refer to Managing Screen-Set Localizationin the SAP Help Portal.

The following video will provide a quick tour of the SAP Customer Data Cloud UI Builder.