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.