Remote select options
This topic describes how to populate a select list with available options via a function in your app using Optimizely Connect Platform (OCP).
select
and multi-select
form elements can be populated by a hard-coded list of values or an external data source.
For example, to allow the user to select one or more Mailchimp lists that are retrieved from Mailchimp using the customers API credentials, you would specify a dataSource
on the select element:
sections:
- key: config
label: Configuration
elements:
- type: select
key: list_id
label: List Name
help: Name of your list in Mailchimp with contacts to sync Zaius Insights to. If this does not populate, your API key is likely not entered correctly.
dataSource:
type: app
function: get_lists
App DataSource
By specifying app
as the dataSource type, you can have the form call a function defined in your app to get the list of options available. In the example above, the mailchimp app get_lists function is called any time the list should be populated or shown to the user. The app now has access to all the other form data, including the user's mailchimp API key. The function is responsible for returning a json list of options in the following format:
[
{
"text": "Text to show the user",
"value": "internal value"
},
...
]
Example implementation:
import {Schema} from '@zaius/app-forms-schema';
import * as App from '@zaius/app-sdk';
import {logger} from '@zaius/app-sdk';
import {MailChimp} from '../lib/MailChimp';
export class GetLists extends App.Function {
public async perform(): Promise<App.Response> {
logger.info(this.request.body);
const mc = new MailChimp();
const lists = await mc.getLists();
const options: Schema.SelectOption[] = [{text: 'None', value: null}];
lists.forEach((l) => {
options.push({text: l.name, value: l.id});
});
return new App.Response(200, options);
}
}
HTTP DataSource
If your select options are available publicly over HTTP, you can alternatively use an HTTP data source by specifying http as the dataSource type in the form.
...
dataSource:
type: http
function: https://example-site.io/data/options.json
Keep in mind the options must still be in the same JSON format expected to be returned by an app function. If they are not, you can always use the app data source instead to fetch the options from your app's function and format them correctly instead of going direct to the source.
Updated about 1 year ago