Show or Hide elements based on conditions

Visibility (cell) in the Advanced tab, as the name, suggests helps in displaying the element in the app or not based on a condition. In general, this feature helps the app creator to display the element based on the condition provided in a different cell in the excel. 

In this tutorial, we will learn how to use Visibility (cell) feature with a simple example.

DATA SOURCE PREPARATION

The app creation already starts in your Excel spreadsheet. The cleaner the columns and cells are formatted there, the easier you will turn this file into an app.

In this sample excel file, there are two products A and B and their total offer prices. Let's assume, the user wants to display the total offer price based on the selection (Offer 1 or Offer 2).

SELECT DATA SOURCE

In the "Choose your data source" step, select the file from your PC by clicking on ‘Choose file’ button.

After uploading the excel file in the platform, you will be automatically redirected to the next step in the app creation process.

After creating the app with two checkboxes and output fields "Total Offer Price 1" and "Total Offer Price 2" as shown in the screenshot.

To make the fields visible based on the selection,

1. Click on the "Total Offer price 1" output element,
2. In the Advanced tab, Visibility (cell) section, select the cell app!D4

The output field becomes hidden as shown in the screenshot. Repeat the same for the second output field and selecting the app!F4 cell in the Visibility (cell) section and click Save.

So, the app looks like the following in WebClient and mobile versions.

On selecting the first checkbox offer 1, the total offer price 1 field is displayed.

On selecting the second checkbox offer 2, the total offer price 2 field is displayed.

CONCLUSION

This feature will be really helpful when the app creator wants to show or hide the desired output based on some parameters, based on dropdown values, adding input fields only when needed, for mandatory fields in a survey - like enabling the "Next page" action button only when the user fills in all or particular input field and so on. Learn how to use action buttons to navigate between pages here: Add action button to jump from page to page