Page tree
Skip to end of metadata
Go to start of metadata

All form components (including Page) can be in one of the following states: Required, Optional, Read Only, Hidden. 

By default every form component has "Use state of parent component" initial setting. Page component's parent is form and its initial state is Required. This means that if you've just created a form and started adding components to it, all the components will have Required state, and users will be expected to fill in all input fields. If you change Initial State for every form Pages to be Optional, none of the fields will be mandatory and users can submit an empty form. The truth lies somewhere in between these two cases. 

To assign Initial state to a form component:

  1. Open your form in the Visual DesignerIn the drop-down list ("Selected item") at the top of the Display Panel find and select the page on which the form component you want to assign Initial state to is located.



  2. On the page find the Input Field component you want to assign Initial state to and click on it. The component is now highlighted and its settings are displayed in the Properties panel.
    In this example we want to control the state of the the Amount field. Initially, when a user starts the form, it should be hidden.



  3.  In the Properties panel click on "More Settings..." link and then select "Dynamic State Management" 




    if you already have at least one initial or dynamic state assigned, use "Modify" button in the section that states "Component has initial state" or "Component has XX conditional state(s)" or both.


  4. In the Editor window that will open, select the state you want to assign in the drop-down list labelled "Initial" and save your change. 




    In the Properties panel there is now a section with "Component has initial state" label and two buttons: "Modify" button which will open the Editor again and "Delete" button that allows you to remove all states assigned. 

  5. Commit your changes by clicking on "Commit" button in Controls panel and then click "Preview Form" button to test the rule. Check that the component you assigned Initial state Hidden ("Amount") is not visible

To assign a state to a form component dynamically:

  1. Open your form in the Visual DesignerIn the drop-down list ("Selected item") at the top of the Display Panel find and select the page on which the form component you want to assign Dynamic state to is located.



  2. On the page find the Input Field component you want to assign Dynamic state to and click on it. The component is now highlighted and its settings are displayed in the Properties panel. 
    In this example we want to control the state of the the Amount field. Initially, when a user starts the form, it is hidden, as soon as the user selects package size we want the Amout to become visible.



  3.  In the Properties panel click on "More Settings..." link and then select "Dynamic State Management" 




    if you already have at least one initial or dynamic state assigned, use "Modify" button in the section that states "Component has initial state" or "Component has XX conditional state(s)" or both.


  4. In the Editor window that will open, drag "READONLY" box from "Available States" and drop it above Initial state. Define the state calculation rule/s, in this example it will be "Field Has Value" condition.



    Drag and drop the "Field Has Value" box into the conditions area, set the condition properties, in this example select "package.size" field from the drop-down list displaying all Input and Hidden Field components on your form. Save your changes.


    In the Properties panel there is now a section with "Component has XX conditional state(s)" label and two buttons: "Modify" button which will open the Editor again and "Delete" button that allows you to remove states assigned. 

    If you click "Delete" button in the Editor all Initial and all Dynamic States will be removed. To remove particular Dynamic State open the Editor by clicking "Modify" button and then click on "cross" icon next to the state. Changing state to "Use state of parent component" in the drop-down list labelled "Initial" will be treated as removing the assignment for Initial State. 
  5. Commit your changes by clicking on "Commit" button in Controls panel and then click "Preview Form" button to test your changes. When you start the form the Amount field is hidden, as soon as you select  package size, it becomes visible (and read-only). 


If you assign Required state to an Input Field component and a user leaves it blank, the default message "Field requires value" will be displayed when the form is validated. You can customise the text of the error message by assigning "Error for Required" rule, see Validation Rules

For mode details see Dynamic State Management.

Go to  Dynamic State Management Example to see state management in action.


  • No labels