How to use the Look Up component

Last update:

Audience: Developers building Sapho micro apps

In a previous how-to article, we showed you how to use the Select component to allow users to choose from a list of values. A Select component is a great option when you don’t have a long list of possible values, but it can become unmanageable when there is a large number of values. For these cases, we recommend using the Look Up component.

Looking up values in large data sources

Once again, we will look at an example where you need to store contact information. However, instead of only entering US addresses, we will have a form for entering international addresses that are then stored in the table contacts. We’ll only want to store the ID of the country in that table, since country names, codes, and other information are stored in a separate table called countries. Since there are more than 200 countries to choose from, it is better to use a Look Up component instead of a Select component in your form.

  1. Add the Look Up component to your editable form page.

    The Placeholder Text property can be used to enter text that will be shown in the field before the user searches.

    Note: If the Label Position property of the component is set to Placeholder, the Placeholder Text will be ignored and the component’s label will be used instead.
  2. For the Data Column property, select the column where the information will be stored in the table. In our example,this is the column that will be used to store the country’s ID.
    The Data Source to Search is the data source where the table you want to search is located. Normally, this will be the same data source used to build the micro app, but you can use another data source for more complex data mashups.
  3. Under Data Table to Search, select which table you would like to use. In our example we’re going to be searching the countries table.
  4. The Data Column to Search contains the values that will be compared to the text that the user inputs and any matches will be populated in the component. In our example, we want the user to search by country name.
  5. In the Data Column to Use as Value, select what value from the target table you want to store in the Data Column selected earlier. This value can be the same as the one used in the Data Column to Search or you can opt to select a different value, such as the related primary key. In our example, it will be the selected country’s ID.

    If you select a different column to use as a value (like we did in our example), you also have the option to show it in the component by switching on Show Data Column to Use as Value. We’ll look at a case that utilizes this option in a later example.
  6. Preview the micro app. Users are able to search for a country by name and the country's ID will be stored in the database when the record is saved.

    If a user selects an item by mistake, they can clear the selected value using the ‘x’ on the right side of the component.

Allowing users to search for one value by using another

Another powerful feature of the Look Up component is that it can allow users to select a value by searching for something else. Let’s say that our form was for entering international phone numbers for the contact, instead of addresses. Users will first have to select the country dialing prefix and then enter the number. However, searching through a list of over 200 prefix numbers is not the best user experience. Instead, we’ll let the user find the appropriate prefix by searching by country name instead.

  1. Add the Look Up component to your editable form page.
  2. Enter the component’s Label and Placeholder Text so users know what value they will use to search.
  3. Select the the appropriate table and column where you want to store the country’s dialing prefix.
  4. Select the data source, table, and column to be searched. In our example, we’re searching the name column of the countries table.
  5. For the Column to Use as Value, select the column containing the country’s dialing prefix (prefix in our example) and then switch on Show Data Column to Use as Value.
  6. Preview the micro app. Both the country name and the associated dialing prefix will be shown in the component when the user executes a search.