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.
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
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;
On the page load, the data source URL is triggered by itself as can be seen in the express view
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;
Now in the express view, once you select a particular value from the dropdown, it won't show up in the second dropdown.
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.
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.
The following shows the config in the dropdown
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.
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.
**END
Comments