Displaying Sections Dynamically

It is possible to create form sections that appear only as the user enters relevant input. This can be helpful to direct the user to the next input. In other cases, inputs are dependent on each other and need to be entered in a specific order. This article will walk through the basics of building out a form that displays new fields based on user input. When the user enters data in one field, the next field will appear.

Creating the form

Create a simple form that looks like this:

Start by adding a Container to the web page. This container will hold the entire input form. Create a Label for the prompt. Create a container for the book title label and the text input. Create another Container for the star rating label and the input. Create a third container for the "write your review:" label and text area input. Create a submit button at the bottom. When completed, the Tree view should look like this:

Setting up inputs to appear in order

Components in the studio have a property called Is Visible. This is an expression that evaluates to TRUE or FALSE. If the expression evaluates to TRUE, the component will appear, if the expression evaluates to FALSE, then the component will be hidden. The Is Visible is dynamically recalculated so if the value of the expression changes from FALSE to TRUE, the component will appear. Using this, it is possible to have components appear on the page.

Start by going to the container that has the star rating. With the container selected, choose the Advanced tab in the inspector. Put the following code snippet into the Is Visible option:

ISNOTEMPTY(title)

Using ISNOTEMPTY() will hide the entire container, including the label until the user enters a title for the book. To understand more about empty states, check out the Airscript Empty States article. Selecting the container for the review text area, set the Is Visible value in the Advanced tab to:

ISNOTEMPTY(rating)

By putting visibility dependent on the rating, and the rating having the visibility dependent on the title, this field will start hidden, and only be displayed once the title and then the rating is selected. Modify the submit button in the same way by setting the Is Visible equal to:

ISNOTEMPTY(  
  review_text  
) 

Running the experience in preview should look similar to:

Submitting to the same page

While it is usually a best practice to space out a form experience through several web pages within a web flow, there are certain times where it might make sense to collect data on the same page. A page rendering search results is a good example of this pattern.

Create another container at the root of the Web Page containing the book review. Name it "Response Container". Add a Label to the container and enter some text like "Response Received". Click on the Web Page and a variable called response_sent of type Boolean. Then go back to the Response container and set the Is Visible to:

response_sent

this variable. Select the Input container and set the Is Visible to:

NOT(response_sent)

Go to the submit button. Add a Clicked action that sets the value of response_sent to TRUE. Now when the flow is run it should look like this:

Refreshing the page

What if the user wanted to submit another review? This section will walk through resetting the form. Go to the Response Container and add a button with the text "Write another review". Go to the Actions tab in the inspector for the button. Add four Set Variable actions for the Clicked event.

This is taking all of the inputs for the form and setting them back to the original starting point of the App, with all of them set to NULL. The final effect of the app is that once the user clicks the button to write another review, the Response Container will be hidden and the Input Container will be rendered. The fields are empty so the Input container will only have the book title container visible.