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.

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

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.

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.

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.

Pattern

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.

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.

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.

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.

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.

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.