Screens

This document covers the configurations of Descope screens. This guide covers the screen builder as well as the basic components and how you can customize their behavior to fit your desired flow results. The sidebar for this section also contains detailed articles on some of the more complex components.

Note

Translations of configured component items, such as labels, placeholders, etc, are configurable within the Localization section of the Descope Console.

Screen Builder

The Screen Builder is a widget-based interface that enables you to build user-facing login and sign-up screens from the Descope UI. Whenever you add a Screen Step while creating Flows, you can design the associated screen using the Screen Builder.

You can easily create screens with widgets such as:

  • Inputs that capture user details like email IDs and phone numbers
  • Buttons for users to select actions such as login methods (SSO, Social Logins, etc.)
  • Text boxes that can display login errors and success messages
  • Links that can point to your privacy policy, terms of service, or other destinations
  • Images that can display your brand's logo or other custom images
  • Containers that help you layer and position other widgets

Descope screen builder example

Alignment And Direction

Buttons, texts, icons, and other inputs support alignment and direction. Alignment can re-organize elements in three screen positions - left, center, and right. Configuring direction is used for input elements to support RTL (Right To Left) languages such as Hebrew, Arabic, Farsi, etc. Clicking on the component will reveal the options available.

Descope Text Direction and Align example

Available Configurations

  • In Text, Link, and error messages, you can control text alignment and direction.
  • In all other components, text alignment is defined according to text direction and alignment available in the component configuration.
  • The button's text is always aligned to the middle, so only the Oauth logo changes direction.
  • Text in a divider is always aligned to the middle.
  • Inputs and boolean have only left or right alignment to make it easier for development.

General Component Configurations

Some Descope screen component configurations apply to most if not all, components. This section will cover these generic configurations.

Context Key

The context key relates to Descope input and selection components; this is the key that the item is stored in for later use within the flow.

Alignment and Direction

Buttons, texts, icons, and other inputs support alignment and direction. Alignment can re-organize elements in three screen positions - left, center, and right. Configuring direction is used for input elements to support RTL (Right To Left) languages such as Hebrew, Arabic, Farsi, etc. Clicking on the component will reveal the options available. For more details, see the Customize Flows Documentation.

Fill Container

The Fill Container option will stretch the component to fill the parent container with the element.

Size

You can configure a component's size to one of four sizes; the slider works from left to right, with the left being the smallest.

Mandatory

Many Descope components, like input fields and selection components, can be marked as mandatory. When marked as mandatory, the flow will only allow a user to continue past that screen once the field has been filled or selected.

Input Field Configurations

Input fields can be out-of-the-box items like email, given name, etc., but they can also be custom input fields or custom user attributes. This section will generally cover the available configurations of input fields.

Note

When a field is marked mandatory, there is a generic "Missing Value" error message that can be translated within the Localization section of the Descope Console.

Configuring an input field component within Descope screen

Label

The label is the displayed input field's label; this can be configured to whatever you'd like or configured as empty to have no label.

Placeholder

The placeholder is the displayed input field's placeholder; this can be configured to whatever you'd like or configured as empty to have no placeholder. The placeholder will disappear as the user enters data into the input field.

Copy to Clipboard

By toggling the Allow copying value field on the input configuration setting, a copy icon is visible and the content of the input field can be copied to clipboard. This way, input component can be configured to allow copying their value.

Configuring copying value for input field

Validation Regex

You can configure a regex pattern to match data within an input field. Configuring a regex for the input field can be helpful if you want to match a specific format, length, etc., of the input field.

For example, if you want to allow only characters and not numbers or special characters, you can configure the pattern with ^[A-Za-z]+$; this configuration will fail validation unless the given data is only characters a-z.

Configuring a regex pattern for a Descope input field component within Flows

Demo of regex pattern check within a Descope input field in flows

Validation Error Message

You can configure a custom validation error message to pair with the regex pattern to match data within an input field. When this is configured, the configured message will be displayed when field validation fails.

Note

When this message is configured, you can translate the message within the Localization section of the Descope Console.

Configuring a custom validation message for a Descope input field component within Flows

Demo of custom validation message within a Descope input field in flows

Password Matching Error Message

You can add a custom error message on the confirm password field by turning on the toggle for Password Confirmation. When you have this configured, the message will be displayed when both the passwords fields do not match.

Configuring password validation error message

A thing to note, if the Policy previewer is turned on, only after the new password satisfies the policy, this validation message will be triggered. If policy is not satisfied, the policy validation message is displayed first.

Demo of custom password validation message within Descope flows

Note

When this message is configured, you can translate the message within the Localization section of the Descope Console.

Was this helpful?

On this page