Configuring the Web User Interface (UI)

Objective

After completing this lesson, you will be able to customize the CIAM user experience using the Web UI Builder.

Customize CIAM User Experience Using the Web UI Builder

SAP Customer Data Cloud provides default out-of-box screen-sets for implementing your CIAM user experience.

There are five screen captures of the following: Registration /Login screen, Preferences / Profile Update, Security/Privacy Settings, Subscriptions, and Password Reset. These are system screen captures to illustrate how you can use the UI Builder to customize your site.

The Web UI Builder allows you to design CIAM user experiences such as:

  1. Registration and Login
  2. Preferences and Profile Update
  3. Security and Privacy Settings
  4. Subscriptions (Lite Registration)
  5. Password Reset

You to easily customize the default screen-sets using a drag-and-drop method. You can also brand the look and feel of your screen-sets to seamlessly match your company's brand using CSS and JavaScript.

The Web UI Builder Designer

This is the SAP Customer Data Cloud UI Builder.

UI Builder in SAP Customer Data Cloud.

The UI Builder allows you to customize screen sets in a quick and easy manner. The main features of the Web UI Builder include:

  • Drag-and-drop editing capabilities
  • Optimization for mobile screens and responsive design
  • Preview option to fit multiple screen sizes and languages
  • Localization option for handling language translations
  • Direct mapping from UI elements into the schema attributes
  • Customization using CSS editor 
  • JavaScript parameters for handling screen-set events

Note: Optional advanced HTML customizations are also available, however, it is not part of the UI Builder.

Screen Templates

This is the first step to customizing the user interface. This drop-down menu lists the available customizable template screens. You can also create a new screen by selecting the +New Screen option.

Screen capture of the Screen drop-down menu in the SAP Customer Data Cloud UI Builder. An orange highlight box highlights the screen drop-down menu and the add new screen button.

Standard Controls

This standard controls menu contains a variety of pre-configured standard UI elements you can use to customize the selected screen template. Simple controls are usually connected to an HTML element or a direct functionality within the SAP Customer Data Cloud. You can add a Textbox, Link, Dropdown menu, Checkbox, or button to highlight some of the few popular options. Once you select the standard control you can drag and drop to the screen area.

Screen capture of the standard control options and screen from the UI Builder page in SAP Customer Data Cloud. Orange highlight boxes point out the Standard widgets and screen.

Below the Standard controls, you’ll find additional customization items under the Captcha, Widgets, Passkey and TFA sections.

Screen capture of the Captcha, Widgets, Passkey and TFA options located on the left hand side menu of the UI Builder in SAP Customer Data Cloud.

Captcha: CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart), is one of the most popular methods of distinguishing between a human user vs. an automated attacker. SAP Customer Data Cloud enables adding a CAPTCHA challenge to the login and registration screens. The CAPTCHA service protects your site from automated hacking attempts.

Widgets: Within each screen-set, widgets play a pivotal role. These widgets are fully customizable, allowing you to tailor them to your specific requirements. For example, widgets can allow customers to add a phone number, connect to a social log-in or add a photo.

Passkey: FIDO represents a cutting-edge authentication solution that eliminates the need for passwords and mitigates phishing risks. It's compatible with both mobile devices and mainstream desktop web browsers. Alongside single-device credentials, FIDO introduces a novel technology called multi-device credentials, or passkeys. This innovation streamlines FIDO's authentication methods across various devices, platforms, and operating systems. Passkeys offer recover-ability, safeguard against device loss, and ensure accessibility whenever and wherever users require them, all without the dependence on traditional passwords.

TFA: Two-Factor Authentication (TFA) enhances the security of your user authentication processes by introducing an additional layer of verification. Following the input of log-in and password credentials, SAP Customer Data Cloud generates a unique code and dispatches it to the user through email or phone (via voice message/SMS). The user subsequently inputs this code to finalize the authentication procedure.

Properties Panel

The properties panel enables you to further customize the controls or widgets previously selected from the standard control and widgets menu. You can modify the field name, change the width or height, or make the field required to name a few options.

Screen capture of the Properties Panel options on the right-hand side of the UI Builder. The orange highlight box points out the various properties' options, such as Screen ID, Behavior, Internal Name, Caption, Success Screen, Width, and Height fields found within the designer tool.

Adding an Existing Field to a Screen

Log in to track your progress & complete quizzes