How to populate select components

Last update:

Audience: Developers building Sapho micro apps

When you need users to choose from a set list of values, you can use the select component. The select component can be populated by data from the source system or you can enter the list of values manually. In both cases, the actual values associated with the items in the select can be different than the labels that you use in your micro app.

Values taken from the source system

Let’s say you have a basic form for entering US addresses, which are then stored in the table contacts. In that table, you want to keep only the ID of the US state since you have state names and abbreviations in a related table, states.

  1. Add the select component to your editable form page.
    Select_Auto_1.png
  2. For the DB Column property, select the column where the information will be stored in the table. In our example this is the column we’ll use to store the state ID.
    Select_Auto_2.png
  3. For the Select Type, choose Select from Database.
    Select_Auto_3.png
  4. The Fetch Limit property can be used to limit the amount of values you pull from the source system. For this example, we need to increase the value to 50 in order to get all of the states.
    Select_Auto_4.png
  5. In the Table to Search to Fill the Select property, select the table where you have the labels and values you want to use to populate the select. In our example it is the table where you have the state names and abbreviations. Sapho also lets you use a table from a different connector, if you need to do some more complex data mashups.
    Select_Auto_5.png
  6. For the Column to Show in the Select property, select the column you want to use for the labels in the select component. We are going to display the names of the states in our example.
    Select_Auto_6.png
  7. Select the state ID for the Column to Use as Value property. These are the values that correspond to each label. If you don’t need to store different values, you can select the same column as you used for the labels.
    Select_Auto_7.png
  8. Preview the app. The select will now be populated with state names but will store the corresponding IDs into the database.
    Select_Auto_8.png

Manually entered values

There may be cases when you do not have a table available in the source system that contains your list of values. In such cases it is still possible to use the values already stored in the destination table, but there is a risk that not all possible options will be present. For this situation, it is better to enter the list of values manually to ensure users can select from all possible options.

As a basic example, we’ll add a select to our form so users can set the type of address, commercial or residential.

  1. Add an additional select component to the form.
    Select_Manual_1.png
  2. For the DB Column property, select the column where the information will be stored in the table. In our example this is the column we’ll use to store the address type.
    Select_Manual_2.png
  3. Keep the Select Type property set to Enter Values Manually.
    Select_Manual_3.png
  4. Click the + button to add an item.
    Select_Manual_4.png
    For each item, you can enter a Key as well as a Label. This is useful for when you need to map values to codes that may be used elsewhere in the source system or database.
    Select_Manual_5.png
  5. Add the other value(s) by clicking on the + button again.
    Select_Manual_6.png
  6. Preview the app. Users can now select an address type and the corresponding Key value will be stored in the table.
    Select_Manual_7.png