Choicefields

Choicefields are a powerful way to attach additional data to a particular option.

When the user selects a choice on the form, behind the scenes user-defined JSON data is collected which represents that object. This is really useful if the object selected has a lot of data associated with it.

To see how this works lets consider the choice option as a user selecting a house, there are number of houses to choose from and the address of the house is the information the user will see.

The houses are:

  • 4 Privet Drive
  • Buckingham Palace
  • The White House
  • Playboy Mansion

The houses have some properties we'd like to define:

  • Square feet
  • Price
  • Number of windows
  • Number of doors
  • Its association
  • The name of the object

Before we define each choicefield let's create a category to group these choices in which we'll call "popular houses".

To do this first create the category by navigating to Create>Choicefield Category

Create Choicefield Category

Screenshot

The name of the category is: "popular houses". Note that the name must be unique. There is also the option to define the data structure of the JSON for each choicefield, but for now we will leave that blank.

Screenshot

Submit to save the category then navigate to Create>Choicefield

For each of the houses we'd like to define the data associated with them.

So let's do that!

Create Choicefields

Screenshot

Likewise for buckingham palace...

Screenshot

And so on and so fourth for the rest of the houses.

View Choicefields in Choicefield Dashboard

Navigating to Dashboard>Choicefields, the available options are visible and can be filtered by the choicefield category. Screenshot

Using Choicefields in Designs

After creating a design and navigation to the design area, the following code is written in the python editor:

def main(form_data):
    data_string = (f' The selected house: {form_data["house"]["name"]}<br><br>'
                   f' Is associated with {form_data["house"]["association"]}<br><br>'
                   f' It (might) have {form_data["house"]["number_of_windows"]} number of windows<br><br>'
                   f' And (might) have {form_data["house"]["number_of_doors"]} number of doors<br><br>'
                   f' And (might) cost £{form_data["house"]["price"]}<br>'
                  )
    return {'output': {'action': 'update', 'value': data_string}}

Note that a reference field input type was used, which should make reference to the choicefield class/ category name. The HTML design looks like:

Screenshot

Rendering this page gives the following: Screenshot

Upon submitting the following data is shown to the user: Screenshot