Configuring Web UI

Objectives
After completing this lesson, you will be able to:

After completing this lesson, you will be able to:

  • Determine how to use the Web UI when designing CIAM flows.

Configuring Web UI

Customize CIAM User Experience using the Web UI Builder

The Web UI Builder is your tool for designing CIAM flows such as: customer Registration, Login, Profile Update, and Forgotten Password. These flows are utilized via Screen-Sets. SAP Customer Data Cloud gives you default out-of-box Screen-Sets for implementing your CIAM user experience.

The Web UI Builder is a What-You-See-Is-What-You-Get tool, that allows you to easily customize the default Screen-Sets using drag and drop functionality. You can also white-label the look-and-feel of your screen-sets to seamlessly match to your brand using CSS and JavaScript.

The Web UI Builder Designer

The SAP Customer Data Cloud UI Builder is a canvas to edit Screen-Sets, designed to implement Customer Identity in a fast and easy way.

Main features of the Web UI Builder include:

  • Drag-and-drop visual editing interface
  • Optimization for mobile screens and responsive design
  • Preview on multiple screen sizes and languages
  • Localization canvas for handling language translations
  • Direct field-mapping into the dynamic schema-based storage
  • Advanced editing using CSS and HTML editor
  • JavaScript editor for handling field and screen level events

Getting Started with Web UI Builder

Watch this demo to learn how to change an existing field on the Screen-Set.

Adding an Existing Field to a Screen - Web UI Builder

Watch this demo to learn how to add an existing field to the screen-set.

Setting a Field as Required - Web UI Builder

Watch this demo to learn how to set a field as required on the Screen-Set.

Adding a New Custom Field to a Screen - Web UI Builder

Watch this demo to learn how to create and add a custom field on the Screen-Set.

Adding a New Subscription Box to a Screen - Web UI Builder

Watch this demo to learn how to add a subscription check box to the Screen-Set.

Save progress to your learning plan by logging in or creating an account