Remote select options

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.