Dynamic Dropdown Options

In addition to providing a fixed array of valid options in the code snippet, it is also possible to dynamically pick the options to be shown in the dropdown. These options will be retrieved when the user clicks a cell in the dropdown-controlled column and can be determined in any way. Rather than providing an array for the `validOptions` attribute, it’s also possible to provide a function. This function has the following signature:
(rowValues: (string | null)[]) => Promise<string[]>
The single argument, `rowValues`, contains all of the current user-provided and generated fields for the output row that the user has selected.  
Here’s an example of a code snippet with two fields that builds upon the first.  It uses the existing “Payment Type” field from above, but adds on an additional “Payment Provider” column that should contain the issuer of the credit or debit card if the purchase was made using a card:
{
 name: 'a',
 displayName: 'Payment Type',
 description:
   'The medium of payment which was used to complete the transaction',
 validOptions: ['cash', 'credit', 'debit', 'paypal'],
},
{
 name: 'b',
 displayName: 'Payment Provider',
 description:
   'If the payment was made using a credit or debit card, contains the provider of that card',
 validOptions: async (rowValues) => {
   const paymentType = rowValues[0];
 
   // If the user hasn't yet filled out the first column, do not let them populate this field yet
   if (!paymentType) {
     return [];
   }
 
   // If the payment wasn't made with a card, force the user to fill this field with "N/A"
   if (paymentType !== 'credit' && paymentType !== 'debit') {
     return ['N/A'];
   }
 
   // Allow the user to pick from the set of available card providers
   return [
     'Discover',
     'Visa',
     'MasterCard',
     'Chase',
     'American Express',
   ];
 },
 // If the card provider is other than the list we have available, allow the user to pick a custom option for this field and override the dropdown options we present them with
 allowCustomOptions: true,
}
In this scenario, the “Payment Type” column is dropdown controlled using the snippet above.  Depending on the value the user enters (or the autocomplete engine synthesis) for the “Payment Type” column, the dropdown options available to the second “Payment Provider” will vary.
Following the logic provided in the custom `validOptions` provider function, the dropdown options for when “cash” is selected for “Payment Type” are limited to “N/A”:
 Dropdown options for when “cash” is selected for “Payment Type” are limited to “N/A”:
When “credit” is entered for “Payment Type”, the various card providers are populated instead:
When “credit” is entered for “Payment Type”, the various card providers are populated instead
Using this pattern, it’s possible to construct complex logic to represent whatever kind of business rules may exist for your uploader. Since the function that can be provided to `validOptions` is asynchronous, it’s even possible to do things like make API requests, look things up in a database, or perform other external operations to determine what values to show to users.

Osmos Uploader - Previous

Creating Dropdown-Controlled Fields

Next - Osmos Uploader

Dropdown Interaction with Validation Functions

Last modified 8mo ago

Copy link