- 
                Notifications
    
You must be signed in to change notification settings  - Fork 362
 
Update flow docs. #5646
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Update flow docs. #5646
Changes from all commits
7f0d73f
              b753d80
              0ff11eb
              1a7447f
              1cf2065
              a45b8de
              e2740ca
              e652422
              903726e
              File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | 
|---|---|---|
| @@ -0,0 +1 @@ | ||
| {% include "../../../../../includes/guides/flows/troubleshooting.md" %} | ||
| 
         Check failure on line 1 in en/identity-server/next/docs/guides/flows/troubleshooting.md 
    
   | 
||
| Original file line number | Diff line number | Diff line change | 
|---|---|---|
| @@ -0,0 +1 @@ | ||
| {% include "../../../../../../includes/guides/organization-management/inheritance-in-organizations/flow-inheritance.md" %} | 
| Original file line number | Diff line number | Diff line change | 
|---|---|---|
| @@ -1,90 +1,89 @@ | ||
| # Get started with flows | ||
| 
     | 
||
| A **flow** defines the sequence of steps a user goes through during a specific interaction with your application. This guide introduces the **Flow Builder**, a visual environment with all the necessary elements to build flows that meet both security requirements and user experience goals. | ||
| A **flow** defines the step by step journey a user takes during a specific interaction with your application, like signing up or resetting a password. This guide introduces the **Flow Builder**, a visual canvas where you can design and customize these journeys to meet your security and user experience goals without writing complex code. | ||
| 
     | 
||
| Using the flow builder in {{product_name}} you can fully customize the following flows. Click on a flow to view a sample scenario built using the flow builder. | ||
| The Flow Builder allows full customization of the following user journeys. Click on a flow to view a sample scenario built using the flow builder. | ||
| 
     | 
||
| - [Self-registration]({{base_path}}/guides/flows/self-registration/) | ||
| - [Self registration]({{base_path}}/guides/flows/self-registration/) | ||
| - [Password recovery]({{base_path}}/guides/flows/password-recovery/) | ||
| - [Invited user registration]({{base_path}}/guides/flows/invited-user-registration/) | ||
| 
     | 
||
| ## Access the flow builder | ||
| ## Create and enable a flow | ||
| 
     | 
||
| You can access the flow builder by following the steps below: | ||
| The following sections outline the process for creating and publishing a custom flow. | ||
| 
     | 
||
| 1. On the {{product_name}} Console, go to **Flows**. | ||
| ### Step 1: Access the flow builder | ||
| 
     | 
||
| 2. Click on the card corresponding to the flow you want to build. | ||
| To access the flow builder: | ||
| 
     | 
||
| 3. [Build the flow](#build-a-flow) and [enable](#enable-a-flow) it. | ||
| 1. On the {{product_name}} Console, go to **Flows**. | ||
| 
     | 
||
| ## Build a flow | ||
| 2. Click on the corresponding flow you want to build. This opens the Flow Builder canvas for that specific flow. | ||
| 
     | 
||
| The **Flow builder** provides all the building blocks you need to create user journeys. | ||
| ### Step 2: Build the flow | ||
| 
     | 
||
| For a selected flow, you can start building it using one of the methods below and use [flow elements](#reference-flow-elements) to customize it to your requirements. | ||
| The **Flow builder** provides all the building blocks you need to create user journeys. To start building, you can choose one of the following methods and use [flow elements](#flow-elements) to customize it. | ||
| 
     | 
||
| {% if product_name == "Asgardeo" %} | ||
| 
     | 
||
| ### Generate with AI | ||
| - **Generate with AI** | ||
| 
     | 
||
| With **Generate with AI**, you can use plain language instructions to build a complete flow, allowing you to start with a minimal effort and customize components as needed. | ||
| Describe your flow in plain language, and let the generative AI engine automatically build it for you. You can then customize and refine the components as needed. | ||
| 
     | 
||
| {: width="auto" style="display: block; margin: 0;"} | ||
| {: width="auto" style="display: block; margin: 0;"} | ||
| 
         Check warning on line 33 in en/includes/guides/flows/build-a-flow.md 
    
   | 
||
| 
     | 
||
| {% endif %} | ||
| 
     | 
||
| ### Use a starter template | ||
| - **Use a starter template** | ||
| 
     | 
||
| Starter templates offer commonly used starting points, so you don’t have to begin from scratch. Click the `+` button next to a template to add it to the flow. | ||
| Select from a list of pre-built templates for common use cases to avoid starting from scratch. Click the `+` icon next to a template to add it to the canvas. | ||
| 
     | 
||
| {: width="auto" style="display: block; margin: 0;"} | ||
| {: width="auto" style="display: block; margin: 0;"} | ||
| 
         Check warning on line 41 in en/includes/guides/flows/build-a-flow.md 
    
   | 
||
| 
     | 
||
| ### Build from scratch | ||
| - **Build from scratch** | ||
| 
     | 
||
| If you prefer to take complete control of the building process, you can start with a blank canvas and add steps, widgets, and components to build your flow. | ||
| For complete control, start with a blank canvas and build the flow by dragging and dropping the required [flow elements](#flow-elements). | ||
| 
     | 
||
| {: width="auto" style="display: block; margin: 0;"} | ||
| {: width="auto" style="display: block; margin: 0;"} | ||
| 
         Check warning on line 47 in en/includes/guides/flows/build-a-flow.md 
    
   | 
||
| 
     | 
||
| ## Enable a flow | ||
| ### Step 3: Enable the flow | ||
| 
     | 
||
| {{product_name}} provides default sequences for every flow in the flow builder. You can design and refine your customized flow at your own pace, keeping it disabled until you’re ready to share it. While your customized flow is disabled, users continue to experience the default flow. Once enabled, your users will seamlessly change to the customized experience you’ve created. | ||
| You can enable a flow using the toggle on the top right corner of the Flow Builder. Your flows behave as follows based on their state: | ||
| 
     | 
||
| To enable a flow, | ||
| - If disabled, | ||
| 
     | 
||
| 1. On the {{product_name}} Console, go to **Flows**. | ||
| - You can build your flow and save it as a draft. The flow won't be active for users until you enable it. | ||
| 
         Check failure on line 55 in en/includes/guides/flows/build-a-flow.md 
    
   | 
||
| - This is the default state for any new flow. | ||
| 
         Check failure on line 56 in en/includes/guides/flows/build-a-flow.md 
    
   | 
||
| 
     | 
||
| 2. Select the flow you want to enable. | ||
| - If enabled, | ||
| 
     | 
||
| 3. On the top-right corner of the screen, turn the toggle ON to enable the flow. | ||
| - The flow becomes immediately available for users. | ||
| 
         Check failure on line 60 in en/includes/guides/flows/build-a-flow.md 
    
   | 
||
| - You can continue to make changes and improvements to the flow even after enabling it. Until you publish those changes, users will continue to experience the last published version. | ||
| 
         Check failure on line 61 in en/includes/guides/flows/build-a-flow.md 
    
   | 
||
| - You can disable the flow at any time to remove it from user access temporarily. | ||
| 
         Check failure on line 62 in en/includes/guides/flows/build-a-flow.md 
    
   | 
||
| 
     | 
||
| !!! Note | ||
| ## Flow elements | ||
| 
     | 
||
| The Flow Builder provides a library of reusable, no-code elements to create user journeys. The following sections describe the key flow elements. | ||
| 
     | 
||
| If you disable a customized flow, your users will automatically continue with the default experience until you’re ready to publish it again. | ||
| ### Steps | ||
| 
     | 
||
| ## Reference: Flow elements | ||
| Steps function as the core building block and represent a distinct part of the login process. A flow can contain one or more steps. | ||
| 
     | 
||
| Flow elements work together to create the user journey. They define the structure, functionality, and appearance of each step in the flow. | ||
| {: width="auto" style="display: block; margin: 0;"} | ||
| 
     | 
||
| ### Widgets | ||
| 
     | 
||
| Widgets are reusable components that enhance the flow. Drag and drop widgets into your desired view to build a flow. | ||
| Pre-built login and identity verification components that you can drag and drop into a step. | ||
| 
     | 
||
| {: width="auto" style="display: block; margin: 0;"} | ||
| 
     | 
||
| ### Steps | ||
| 
     | 
||
| Steps are the core building blocks of a flow. Drag and drop steps to create a multi‑step user journey. | ||
| 
     | 
||
| {: width="auto" style="display: block; margin: 0;"} | ||
| 
     | 
||
| ### Components | ||
| 
     | 
||
| Components are atomic UI elements that you can add to a step. Drag and drop components inside a step. | ||
| Components are the individual UI elements placed inside a step, such as input fields, buttons, and paragraphs. | ||
| 
     | 
||
| !!! Note | ||
| 
     | 
||
| Field components such as **Text Input** and **Email Input** etc. have the following contraints: | ||
| Field components such as **Text Input** and **Email Input** etc. have the following constraints: | ||
| 
     | 
||
| - Only a **Form** component can contain them. | ||
| 
     | 
||
| 
        
          
        
         | 
    @@ -94,4 +93,4 @@ | |
| 
     | 
||
| - From the **Attribute** dropdown, select the relevant attribute. Only attributes **displayed in user profiles** are available for mapping. Learn how to [display attributes in user profiles]({{base_path}}/guides/users/attributes/manage-attributes/#configure-attributes). | ||
| 
     | 
||
| {: width="auto" style="display: block; margin: 0;"} | ||
| {: width="auto" style="display: block; margin: 0;"} | ||
| 
         Check failure on line 96 in en/includes/guides/flows/build-a-flow.md 
    
   | 
||
| Original file line number | Diff line number | Diff line change | 
|---|---|---|
| @@ -1,17 +1,20 @@ | ||
| # Flows | ||
| 
     | 
||
| A flow defines the sequence a user follows during a specific interaction with your application. These can include forms, verification actions, conditional logic, and other components that guide users from start to finish. | ||
| Design and customize key user journeys in your application with Flows. A flow defines the step-by-step journey a user takes during a specific interaction, such as registering for your service or recovering a password. | ||
                
      
                  ImalshaD marked this conversation as resolved.
               
          
            Show resolved
            Hide resolved
         | 
||
| 
     | 
||
| {{product_name}} lets you build fully customizable sequences for the following user interactions. | ||
| {{product_name}} lets you build fully customizable flows for the following user interactions. | ||
| 
     | 
||
| - **Self-registration** - Create registration experiences for new users, with support for multi step forms, validations, and identity verification. | ||
| - **Self registration** - Create seamless registration experiences for new users, with support for multi-step forms, data validation, and identity verification checks. | ||
| 
     | 
||
| - **Password recovery** - Build secure recovery flows to help users regain access, using steps such as email verification or one time passwords (OTP). | ||
| - **Password recovery** - Build secure recovery processes to help users regain access, using steps such as email verification or one-time passwords (OTP). | ||
| 
     | 
||
| - **Invited user registration** - Build flow that allows new users to securely set their password when an administrator creates their account, including steps to verify the user's identity. | ||
| - **Invited user registration** - Let new users complete creating their accounts when administrators invite them. Design secure flows to verify their identities and set their passwords. | ||
| 
     | 
||
| You can build flows using starter templates, widgets, steps, and components, giving you complete control over how users interact with your application. To get started with building flows, refer to [Build a flow]({{base_path}}/guides/flows/build-a-flow/). | ||
| Building with starter templates, widgets, and other components provides complete control over how users interact with the application, all without writing complex code. | ||
                
      
                  ImalshaD marked this conversation as resolved.
               
          
            Show resolved
            Hide resolved
         | 
||
| 
     | 
||
| For specific examples of building flows, refer to [Self-registration]({{base_path}}/guides/flows/self-registration/), [Password recovery]({{base_path}}/guides/flows/password-recovery/) and [Invited user registration]({{base_path}}/guides/flows/invited-user-registration/). | ||
| ## Start building flows | ||
| 
     | 
||
| {: width="auto" style="display: block; margin: 0;"} | ||
| - To learn the fundamentals of building a flow, refer to the [get started]({{base_path}}/guides/flows/build-a-flow/) guide. | ||
| - For detailed examples of specific use cases, see the guides on [Self registration]({{base_path}}/guides/flows/self-registration/), [Password recovery]({{base_path}}/guides/flows/password-recovery/) and [Invited user registration]({{base_path}}/guides/flows/invited-user-registration/). | ||
| 
     | 
||
| {: width="auto" style="display: block; margin: 0;"} | ||
| 
         Check warning on line 20 in en/includes/guides/flows/index.md 
    
   | 
||
Uh oh!
There was an error while loading. Please reload this page.