ConfiForms

Space shortcuts

Expand all   Collapse all
Child pages
  • How to show and hide fields in the form conditionally

This is the documentation for ConfiForms Server/Data Center app

However, this might also work for ConfiForms cloud and in most cases it does. But please see this page to understand the differences between server and cloud versions of the ConfiForms app.

Simple tutorial on how to use ConfiForms Field Definition Rules#Showfield and it's counterpart ConfiForms Field Definition Rules#Hidefield ConfiForms Rules for Field Definitions to show and hide fields conditionally

Consider a form that has few fields like this


And the standard layout for the form

Implemented like

Custom layout for the same form

Implemented like

Configuration

As you can see, our form has 5 fields and 2 rules. Actually there are 4 rules, as each of the 2 rules has a "reverse rule" automatically created. That works for show/hide rules very well and you do not need to create an extra reverse rule yourself.

Our 5 fields are:

  • Field1 - simple text field (does not really needed here, but added to show a simplest field possible - no rules, no behaviour)
  • showDetails - is a checkbox field and that manages the visibility of the other field named "details"
  • details - textarea field that is shown only when the checkbox "showDetails" is checked
  • options - is a dropdown field with 4 options, 4th option manages the visibility of the "userOption" field
  • userOption - is a text field that is shown only when someone has selected an option with ID=4 in the "options" field

Now let's see the 2 rules that add the dynamics to our form:


Rule 1Rule 2 

First rule is "bound" to field "showDetails" and tracks for changes

It has a condition to check if showDetails field has value "false"

We set "actionable field" as "details", as this is the field we want to manage visibility for

Second rule is "bound" to field "option" and tracks for changes

It checks for "options" field to have a value 4 selected

Please note that the same could be achieved by using the following filter:

options.label:Let me provide my option

(checking the label of a dropdown instead)

We set "actionable field" as "userOption", as this is the field we want to manage visibility for

And we set "with reverse rule" to tell ConfiForms to create a reverse rule for us automatically. Reverse condition will be created and reverse action will be used (show → hide, and hide → show)


You can set multiple fields in the "actionable field name" parameter, by using comma separated value list: field1,anotherfield,field3

You can do the same with 1st parameter in the ConfiForms Rules for Field Definition macro - and "bound" your rule to track changes in multiple fields (1 rule on multiple fields). Similarly to "actionable field name" parameter you can provide a comma separated list of field names

Conditions are written as filters, more on ConfiForms filters you can find here: ConfiForms Filters and ConfiForms Filters by example


Full configuration for the form in storage format


<ac:structured-macro ac:macro-id="a356f4a8-bdfc-4f79-bc45-56c1abc82106" ac:name="confiform" ac:schema-version="1">
        <ac:parameter ac:name="formName">myform</ac:parameter>
        <ac:rich-text-body>
          <p>
            <ac:structured-macro ac:macro-id="94923a9b-bc51-4272-a4f3-e1711836ea84" ac:name="confiform-field-definition" ac:schema-version="1">
              <ac:parameter ac:name="fieldName">Field1</ac:parameter>
              <ac:parameter ac:name="fieldLabel">Field1</ac:parameter>
              <ac:parameter ac:name="type">text</ac:parameter>
            </ac:structured-macro>
          </p>
          <p>
            <ac:structured-macro ac:macro-id="faa26a33-b268-415f-bda2-ca26354f8237" ac:name="confiform-field-definition" ac:schema-version="1">
              <ac:parameter ac:name="fieldName">showDetails</ac:parameter>
              <ac:parameter ac:name="fieldLabel">Let me provide some details</ac:parameter>
              <ac:parameter ac:name="type">checkbox</ac:parameter>
            </ac:structured-macro> </p>
          <p>
            <ac:structured-macro ac:macro-id="cfde56ca-1d74-40f5-a437-105c7760d598" ac:name="confiform-field-definition" ac:schema-version="1">
              <ac:parameter ac:name="fieldName">details</ac:parameter>
              <ac:parameter ac:name="fieldLabel">Details</ac:parameter>
              <ac:parameter ac:name="type">textarea</ac:parameter>
            </ac:structured-macro>
          </p>
          <p>
            <ac:structured-macro ac:macro-id="602a7b0b-1968-4c3a-b9f3-89a41692c486" ac:name="confiform-field-definition" ac:schema-version="1">
              <ac:parameter ac:name="fieldName">options</ac:parameter>
              <ac:parameter ac:name="fieldLabel">Choose an option</ac:parameter>
              <ac:parameter ac:name="values">false[1=Option 1|2=Option 2|3=Option 3|4=Let me provide my option|]</ac:parameter>
              <ac:parameter ac:name="type">select</ac:parameter>
            </ac:structured-macro> </p>
          <p>
            <ac:structured-macro ac:macro-id="0ff45634-8fd7-4f78-a2ef-05e15bb033d8" ac:name="confiform-field-definition" ac:schema-version="1">
              <ac:parameter ac:name="fieldName">userOption</ac:parameter>
              <ac:parameter ac:name="fieldLabel">My option</ac:parameter>
              <ac:parameter ac:name="type">text</ac:parameter>
            </ac:structured-macro>
          </p>
          <p>
            <br/>
          </p>
          <p>// this rule will hide the "<em>details</em>" field when a checkbox field "<em>showDetails</em>" is unchecked and will show the "<em>details</em>" field otherwise</p>
          <p>
            <ac:structured-macro ac:macro-id="7299078c-2038-4881-976f-48dce42b8cc5" ac:name="confiform-field-definition-rules" ac:schema-version="1">
              <ac:parameter ac:name="condition">showDetails:false</ac:parameter>
              <ac:parameter ac:name="fieldName">details</ac:parameter>
              <ac:parameter ac:name="action">Hide field</ac:parameter>
              <ac:parameter ac:name="actionFieldName">showDetails</ac:parameter>
              <ac:parameter ac:name="withReverseRule">true</ac:parameter>
            </ac:structured-macro>
          </p>
          <p>// this rule shows an extra field when you select an "other" option in the "<em>options</em>" dropdown field (and hides it otherwise)</p>
          <p>
            <ac:structured-macro ac:macro-id="7b9d37e2-7f3a-4dff-a7b3-d88d3402b3b4" ac:name="confiform-field-definition-rules" ac:schema-version="1">
              <ac:parameter ac:name="condition">options:4</ac:parameter>
              <ac:parameter ac:name="fieldName">userOption</ac:parameter>
              <ac:parameter ac:name="action">Show field</ac:parameter>
              <ac:parameter ac:name="actionFieldName">options</ac:parameter>
              <ac:parameter ac:name="withReverseRule">true</ac:parameter>
            </ac:structured-macro>
          </p>
          <p>
            <br/>
          </p>
        </ac:rich-text-body>
      </ac:structured-macro>

To import via Atlassian Confluence Source Editor 

  • No labels