How to hide and show controls

A how-to guide for hiding/showing controls and setting control properties with a decision table.

Introduction

This guide will show you how to hide and show controls based on previous control values with a decision table. You can also use the decision table to set dropdown options and min and max values based on previous control values.

Decision tables
Decision tables are a visual representation for specifying which actions to perform given conditional user “decisions”. Think of the decision table as an actual Excel table. The columns represent the “influencing” controls (for making decisions) and “dependent” variables. The rows represent valid combinations of variable values, which are used for actions. When a “decision” is made, the table is filtered resulting in a sub-set of rows. The values in those remaining rows are then used to peform an action (e.g. set visibility, set dropdown choices etc.).

You can actually make an Excel table to test your decision logic.

Prerequisites

You have an existing solution with all the relevant controls.

1. Add a decision table EntityDataStore

Create a EntityDataStore for your decision table.

Add a new EntityDataStore
The properties represent the column titles of your decision table and must match the corresponding control names.

💡If you’re setting the visibility of a control, then set the property to nullable: true and default: null.

  my-entity-data-store:
    kind: EntityDataStore
    properties:
      space:
        type: String
      finish:
        type: String
      product-code:
        type: String
      price:
        type: Number
      quantity-min:
        type: Number
      quantity-max:
        type: Number
      corrosion-protection:
        type: Boolean
        nullable: true
        default: null

2. Define your decision table

The entities represent the decision table rows and can either be configured as a list of entities or imported from a CSV file.

List of entities:

Add a list of entities

💡The keys in the entities must match the properties.

For example the EntityDataStore below has different paint types as entities with varying prices.

  my-entity-data-store:
    kind: EntityDataStore
    entities:
      - space: indoor
        finish: matte
        product-code: "I-M-0000"
        price: 5
        quantity-min: 5
        quantity-max: 15
        corrosion-protection: null
      - space: outdoor
        finish: glossy
        product-code: "O-G-0000"
        price: 10
        quantity-min: 10
        quantity-max: 20
        corrosion-protection: visible
      ...
    properties:
      ...

Imported from a CSV file:

Create and export a CSV file from your preferred spreadsheet editor.
Save your .csv file to the solution folder.
Define entities with the fromCsvFile tag and refer to your CSV file.

💡The columns in the CSV file must match the properties.

❗To save a new version of the CSV file with updated content, you need to rename your file (e.g. “my-csv-file-2.csv”).

For example the table below has different paint types in each row with varying prices.

space	finish	product-code	price	quantity-min	quantity-max	corrosion-protection
indoor	matte	I-M-0000	5	5	15
indoor	glossy	I-G-0000	10	10	20
outdoor	glossy	O-G-0000	10	10	20	visible
outdoor	matte	O-M-0000	10	10	25	visible

The configuration should look similar to the example below:

my-entity-data-store:
  kind: EntityDataStore
  properties:
    ...
  entities:
    fromCsvFile: my-csv-file-1.csv

3. Define valid default values

Set your default values to match a valid decision table entity, so the web-app works as expected when loaded for the first time and when a data entity is created for the first time.

If you’re using a data EntityDataStore for storing the user input values, then adjust your data EntityDataStore:

Set the property defaults to match a valid decision table entity.
Set properties to nullable: true if the control value can be null.
Do not set default values in the ControlPanel.

If you just have a ControlPanel and you don’t store the user input values, then adjust your ControlPanel:

Set the default control values to match a valid decision table entity.

The entities in the decision table EntityDataStore need to be filtered based on the user inputs.

Subscribe the EntityDataStore to the relevant ControlPanel(s).
Define the source and frame .
Add the relevant “influencing” control names to the filterByControls.

my-entity-data-store:
  kind: EntityDataStore
  entities: [ ... ]
  properties: { ... }
  subscribe:
    - kind: ControlPanel
      frame: my-home-frame
      source: my-control-panel
      filterByControls:
        - space
        - finish
        - product-code

The ControlPanel must be aware of what rows are left in the decision table, in order to perform the necessary actions.

Subscribe the relevant ControlPanel to the decision table EntityDataStore.
Define the source and frame.
Specify the setControls actions to be performed for the relevant controls.

my-control-panel:
  kind: ControlPanel
  controls:
    space:
      kind: Dropdown
      label: Space
      choices: []
    finish:
      kind: Dropdown
      label: Finish
      choices: []
    product-code:
      kind: Dropdown
      label: Product family
      choices: []
    quantity:
      kind: NumberInput
      label: Quantity
    corrosion-protection:
      kind: Toggle
      label: Corrosion Protection?
      value: false
  subscribe:
    - kind: EntityDataStore
      frame: my-home-frame
      source: my-entity-data-store
      setControls:
        space:
          type: setDropDownChoices
        finish:
          type: setDropDownChoices
          filterChoices: [space]
        product-code:
          type: setDropDownChoices
          filterChoices: [space,finish]
        quantity:
          type: setMinMax
          minProperty: quantity-min
          maxProperty: quantity-max
          filterBy: [space, finish, product-code]
        corrosion-protection:
          type: setVisibility
          filterBy: [space, finish, product-code]

Run your Grasshopper model with the remaining entities in the filtered decision table.

Subscribe your Model to the decision table EntityDataStore .
Define the source and frame .
Define the model input name to receive the (remaining) filtered entities with the setInput property.
Define the names of the “influencing” controls in the filterEntities property.

my-model:
  kind: Model
  modelFile: my-gh-model.gh
  subscribe:
    - kind: EntityDataStore # subscribe model to entity data store to get filter set
      frame: my-home-frame
      source: my-entity-data-store
      setInput: my-gh-input
      filterEntities: [space, finish, product-code]

See the image below as an example.

Configuration

See the EntityDataStore configuration docs and ControlPanel configuration docs for more information.