Contents x
    Conditions
      • PDF
      Contents

      Conditions

        • PDF
        Article summary

        Article Overview

        The following article describes how to set behavioral conditions with examples.

        What are Behavioral Conditions?

        Behavioral conditions are used for showing, hiding, or disabling parts of a digital process. The parts can be:   

        • Fields
        • Sections
        • Entire pages

        Setting Behavioral Conditions

        (See Figure 1)

        Conditions are implemented on Webflow components. When clicking a component, the Behavior tab appears on the right section.

        The Behavior tab includes the + Add Condition option (1).

        Figure 1: Behavior Tab

        After clicking the option, the Edit Condition window appears.

        The Edit Condition Window

        (See Figure 2)

        The Edit Condition window enables you to build a logical expression of one condition or more. A logical expression contains the following:

        • Outcome (1):
          • Show if
          • Hide if
          • Read-only if
        • Is True Trigger (2)
        • Condition parameters:
          • Selector - a component name or metadata item. A Selector is added in one of three ways:
            • Using the Behavior tab of a component to copy and paste its path into the Selector field (see Figure 3).
            • Start typing a component's path according to the physical structure and logical hierarchy - starting with the Page component and moving down the hierarchy by inputting a dot (.), for example, page_5.container_6.textField_7. In this example, the desired component, the Text Field, is inside a Container that is placed on a Page (see Figure 4)
            • Start typing the path of a Metadata item starting with metadata and moving down the hierarchy by inputting a dot (.), for example, metadata.global.currentTime (see Figure 5). To read more about Metadata items, click here.
        • Comparison Operators (4):
          • Equal to
          • Is not
          • Greater than
          • Less than
          • Is Empty
          • Is Not Empty
        • Value (5):
          • Textual or numeric for string-type components:
            • Text Area
            • Text Input
            • Date Input
            • Radio Group
            • Dropdown
          • True or False in case the added Selector is a boolean-type component - Checkbox.

        A logical expression can include more than one condition. After clicking the + Add Condition button (6) another condition row appears.

        NOTE

        When adding more than one condition it is mandatory to set the operation between them: Or/And.

        Figure 2: Edit Condition Window

        Figure 3: Behavior Tab - Copy Path

        Figure 4: Physical Structure and Hierarchy

        Figure 5: Metadata Items

        Usage Examples

        The following sections describe condition usage examples.

        Displaying a Page According to a Radio Group Option Selection

        (See Figure 6 to Figure 10)

        Overview:

        This example describes how to create a condition based on a Radio Group option selection. According to the selection, a whole Page component will be displayed or hidden.

        Physical Structure:

        The Webflow includes Page components. The first Page contains a Radio Group component with two options Yes and No.

        The second Page contains a Static Text and a Grid with three Text Fields components and a Date Input component to input information about a spouse. 

        Figure 6: Physical Structure

        Condition Usage:

        If the end-user indicates they have a spouse the second page will appear. If a spouse is not involved the second Page will be hidden.

        Building the Condition:

        To build the condition, perform the following steps:

        Figure 7: Radio Group Component

        1. Click the Radio Group component (1).
        2. Click the Behavior tab (2).
        3. Click the icon to copy the path of the component (3).
        4. Click the second Page (4).

        Figure 8: + Add Condition

        1. Click the Behavior tab (5).
        2. Click the + Add Condition option (6).

                 Result:

                 The Edit Condition window appears:

        Figure 9: Edit Condition Window

        1. Paste the Radio Group component path as the Selector (7).
        2. Verify the comparison operator is set to Equals to (8).
        3. Set the Value to Yes (9).
        4. Click the second Save button (10).

                  Result:

                  The condition is set (11):

        Figure 10: Set Condition

        Displaying a Section According to Multiple Dropdown Selections

        (See Figure 11 to Figure 15)

        Overview:

        This example describes how to create a condition based on two dropdown selections. According to the selections, a section will be displayed or hidden.

        Physical Structure:

        The Webflow includes a Page component. The Page contains a Grid with two Dropdown components. Underneath the Grid is a Container with a second Grid containing three Text Field components and a Radio Group component.  

        Figure 11: Physical Structure

        Condition Usage:

        If the end-user indicates they have a spouse and at least one child under the age of 18, the section will appear. If only one of the conditions is true or both are false, the section will not appear.

        Building the Condition:

        To build the condition, perform the following steps:

        Figure 12: Dropdown Component

        1. Click the first Dropdown component (1).
        2. Click the Behavior tab (2).
        3. Click the icon to copy the path of the component (3).
        4. Click the Container component (4).

        Figure 13: + Add Condition

        1. Click the Behavior tab (5).
        2. Click the + Add Condition option (6).

                 Result:

                 The Edit Condition window appears:

        Figure 14: Edit Condition Window

        1. Paste the Dropdown component path as the Selector (7).
        2. Verify the comparison operator is set to Equals to (8).
        3. Set the Value to Yes (9).
        4. Click the + Add Condition button (10).
        5. Click the new Selector field, select page_6 input dot (.), and select dropdwon_95 (11).
        6. Set the comparison operator to ls Not (12).
        7. Set the Value to 0 (13).
        8. Click the second Save button (14).

                  Result:

                  The condition is set (15):

        Figure 15: Set Condition

        Disabling an Array According to a Checkbox Input

        (See Figure 16 to Figure 20)

        Overview:

        This example describes how to create a condition based on a Checkbox input. According to the input, an array will become read-only.

        Physical Structure:

        The Webflow includes a Page component. The Page contains a Checkbox and an Array with a Gird and two Text Fields.

        Figure 16: Physical Structure

        Condition Usage:

        If the end-user indicates they have a spouse the second page will appear. If a spouse is not involved the second Page will be hidden.

        Building the Condition:

        To build the condition, perform the following steps:

        Figure 17: Radio Group Component

        1. Click the Checkbox component (1).
        2. Click the Behavior tab (2).
        3. Click the icon to copy the path of the component (3).
        4. Click the Array (4).

        Figure 18: + Add Condition

        1. Click the Behavior tab (5).
        2. Click the + Add Condition option (6).

                 Result:

                 The Edit Condition window appears:

        Figure 19: Edit Condition Window

        1. Set the outcome to Read-only if (7).
        2. Paste the Checkbox component path as the Selector (8).
        3. Verify the comparison operator is set to Equals to (9).
        4. Set the Value to True (10).
        5. Click the second Save button (11).

                  Result:

                  The condition is set (12):

        Figure 20: Set Condition

        Was this article helpful?
        What's Next

        Can’t find what you’re looking for?

        Let us know what you need and we'll help you as soon as possible.

        Contact support