Drop Downs, Static APIs calls & Enums: Insights for better configuration in Unqork

Dropdowns are widely used components in any working application.

In unqork, we have two types

• Single dropdown

• Multiselect dropdown

The below image shows a single drop down and will use it further for our discussion.

Single dropdown component in Unqork

In Unqork we have 3 options to populate the dropdowns;

• Values

• URL

• Data Reference Key

Values

Values are straightforward, you add the options and reference value to it (if any). As per my observation, if you have values less than 100, go directly for adding values in the dropdown itself. It can only be possible if we use default values and no data manipulation is required—for example States, Country, ZipCode, etc.

The below example is the selection of 'Security Questions' in an application

Single dropdown with data source type selected as values in Unqork

Here, the option value is the one that is stored in the database.

URL

The second option is using a URL. We can use it to call directly any external APIs or data collection in the Unqork. I have created a data collection to be called in the URL as shown below;

Data Collection as Security Questions in Unqork

Single drop down with URL selected as the data source type for Unqork

On the page load, the data source URL is triggered by itself as can be seen in the express view

Drop down in the express view of the application in Unqork

An interesting element here is the filter query options, which can be used in parallel to check for data in another component and filter out the options already selected.

In our case, if we have selected one option in the First Security Question, we don't want the same option to be present in the Second Security Question. The filter query element easily handles this.

The filter query is written as shown in the image below;

Updating the filter query element in URL

Now in the express view, once you select a particular value from the dropdown, it won't show up in the second dropdown.

Verbal Password one is selected in the dropdown

Verbal password one is missing in the second security question

Note: All the input values are case-sensitive, hence take caution.

Now, one issue here is the multiple times the same static API call is triggered. For larger and more complex applications it can affect the performance. So you should be smart enough to figure out its right usage.

In the image below all the 'all' calls and 'all?Value' calls below 'usStates' are for calling the same API of data collection Security Questions.

Network call showing all the static APIs referring to Security Questions Data Collection

Date Reference Key

The last method we can use to have values in the dropdown is via the data reference key.

We get data via triggering plug-ins be it internal for data collection or external API calls. Then use it as a data reference for the dropdown. We also manipulate data as we want and pass it to a hidden component and they use that hidden component in the data reference key to show the required drop-downs.

The below image shows the data received via the plugin from the data collection Security Questions.

Plugin to call the data collection API in Unqork

The following shows the config in the dropdown

Single dropdown with the data reference key as the data source type in Unqork

The following is the express view of the application with a single API call for data collection and all the values displayed in the dropdown.

Dropdown with all the required values in Express view of the application in Unqork

Cautious Note on the Static APIs

When designing or coding the application, we should take care of the number of calls we are making to the same static API. I have observed in a larger or more complex application, the same API is called multiple times at multiple locations unnecessarily affecting the performance of the application without the need of it.

I would prefer, if we have drop-down values less than 100 without the need for any manipulation, then directly update in the component itself. It speeds up the application and makes it more efficient.

If in an application we intend to use the same component at multiple places or different screens like many pop-ups then use data collection which will be a single source of truth. Here we know that in the future the data will be updated frequently. So once anyone updates it, it updates in all the places such as document requirements, Phone labels, etc.

For the direct URL, generally prefer to use it when the value required is not spread across applications but to fulfill specific needs as we discussed in the above example for security questions. Here, the only concern is multiple triggering of the same static APIs.

Note on Multiselect dropdown

For the multi-select dropdown, the one thing that we need to take note of is the "Item Template". For choosing the required values to show in the dropdown, the item.label should refer to the required label in the database as in our case its item.Questions.

Multiselect dropdown in Unqork using data reference key as the source type

Multiselect dropdown with multiple value selected in the express view of Unqork

**END