Creating a Dynamic User Interface by Hiding and Disabling Controls

A web application with dynamic structure can help declutter the web interface, simplify data entry process, and save your users time. Many controls in SpreadsheetWEB’s designer applications can be made hidden or disabled based on the outcome of another named range from your workbook. This means that you can set up pretty much any kind of logic, and tie some controls, certain sections, or even entire pages to those fields to control user access.

For interactive fields, all you need is a Boolean field to which you can tie a calculation logic and give it a named range. A Boolean field is a cell with TRUE or FALSE outcome, and this can be easily created using IF statements, or simply typing in “TRUE” or “FALSE” into a cell. You can then point a control to this Boolean field to hide or disable it when the conditions you’ve defined are met.

You will see the option By Value Of where this feature is applicable. This parameter will only be visible if your workbook contains at least one Boolean field.

Let’s see how this works on a simple sales application. This application consists of two pages – input and output sections. The input page captures user input, and then displays the pricing results on the output page. The List Sheet and Rate Tables are only used for calculations, and are not displayed in the UI.

Controls

Each control (input or output) in designer applications can be tied to a toggle for hiding or disabling. This can be done by pointing those controls to a Boolean named range. Going back to our example, let’s assume that we don’t want to display the business property deductible (Deductible-BP) dropdown option if the business property insurance amount (Bus. Prop. – Amount of Ins.) is below a threshold.

The named range BusPropAssess contains an IF statement which gives a TRUE result when the value entered for “Bus. Prop. – Amount of Ins.” is greater than $50,000, and FALSE otherwise. By targeting this field with a By Value Of pointer, we can disable the deductible option. To do this, we need to go to the user interface designer, and select the “Deductible-BP” field. Then, we need to select By Value Of from the Enabled menu and target the corresponding Boolean field.

The disabled input will be grayed out until the perquisites are met.

Sections

Sections define individual “rows” in the user interface. On the bottom of our application is a “Limits and Deductibles” section. The calculation logic will use the “default” values if no selections are made for these inputs, and let’s say we want to hide these fields to prevent cluttering. This will give our users fewer inputs to worry about and improve overall performance. We’re going to add a checkbox type of input on the bottom of the page, before the “Limits and Deductibles” section to hide this field if the user wants to use the default values.

To do this, we’re going to begin by adding a Boolean single named range in the workbook. This will be our checkmark for toggling the section.

Now, we need to create a checkbox type of input above this section and select the “LimitsAndDeductibles” Boolean named range.

Next, we need to point the “Limits and Deductibles” section to the Boolean field, by clicking it and then choosing By Value Of from the Visible dropdown. This will give us a second parameter where we can select the Boolean named range from the Named Range field.

The user interface will now hide the “Limits and Deductibles” section, unless the user enables the checkbox next to the “Change Limits and Deductibles?” question.

Pages

A progressive navigation structure can prove useful for making sure that your users finish on a page before moving onto the next one. You can disable any pages in your application depending on the outcome of a Boolean named range.

Our sample application consists of two pages – Input and Output. Let’s try creating a navigation logic where the users won’t be allowed to go to the output page unless they enter a building insurance value of $200,000 or higher. The named range “BldgAssess” in our workbook contains an IF statement that looks at the value entered for this field.