Support

Options Sets allow you to populate autocomplete, select, radio, or checkbox form elements with re-useable options or dynamic data from your own API. Option sets can also be used for calculations, form more on that check out the calculation article.

Creating an Option Set

Enter My Own

Option sets can be added on the specific element. This requires you to add a label a value and optionally a colour when the options are displayed as buttons (checkbox, radio button only). 

When option sets are added in this way they can be duplicated to other elements.

Freshdesk Fields

Instead of entering your own option set you can also pull options from your Freshdesk integration. 

Form more information on that check out the Freshdesk Integration article. 

Predefined Option Sets

To create a predefined option set open the option set menu. 

Custom

Custom option sets function similarly to entering your own option set on the form. You can either manually add your own options or you can upload a CSV. The benefit of adding the custom option set is that these can now be added to any form, and if the custom option set needs to be changed that change only needs to be made once, and the forms will automatically updated to use the new option set.

To copy a Custom Option set to another environment, you can use the "copy to environment" button. This will display a checklist of all other environments. Simply select the environments you want to copy the option set to and click copy.

Option Set CSV example

You can find the CSV attached to this article.

URL  and Hosted API

URL and Hosted API option sets can be configured via API, allowing you to integrate with an external data source to manage your option set. URL requires you to add your own URL. Hosted API will allow you to select from a Hosted API environment and route configured within the platform. For more on API option sets check out the section below.

API Option Sets

Expected Payload

Your API should return a payload in JSON format. It should be an array, with each item allowing four keys:

• value: the value that will be passed in the submission data (Required)

• label: the label that will be displayed to the user in the form (Required)

• colour: set the colour of your button when using radio buttons displayed as buttons (Optional)

• attributes: are used to filter dynamic lists, they contain their own label and value (Optional)

For more on attributes see Filtering below

Option Set JSON example

[
   {
      "value":"1",
      "label":"Pass",
      "colour":"#00DD00"
   },
   {
      "value":"0",
      "label":"Fail",
      "colour":"#DD0000"
   },
   {
      "value":"-1",
      "label":"N/A",
      "colour":"#CCCCCC"
   }
]

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />

    <add name="Access-Control-Allow-Methods" value="GET,OPTIONS,HEAD" />

    <add name="Access-Control-Allow-Headers"
      value="Accept,Authorization,Content-Type,If-None-Match,X-Amz-Date,X-Amz-Security-Token,X-Api-Key,X-OneBlink-User-Token" />

    <add name="Access-Control-Expose-Headers" value="Server-Authorization,WWW-Authenticate" />
  </customHeaders>
</httpProtocol>

For example, I have a list of users and each of those users have a supervisor. I am able to limit the list by selecting a specific supervisor.

Expected Attributes 

• label: the displayed name for the attributes in the forms builder — Required

• value: the value that will be filtered by a separate configured option set — Required

The option set will look like this:

    {
      value: 'ASmith',
      label: 'Alex Smith',
      attributes: [
        {
          'label': supervisor,
          'value': 'Lisa Daniels'
        },
        {
          'label': position,
          'value': 'Marketing' 
        }
      ]
    },
    {
        value: 'JCauthen',
        label: 'Mary Johnson',
        attributes: [
          {
            'label': supervisor,
            'value': 'Lisa Daniels'
          },
          {
            'label': position,
            'value': 'Operations' 
          }
        ]
    },
    {
        value: 'AWilliams',
        label: 'Alice Williams',
        attributes: [
          {
            'label': supervisor,
            'value': 'Liam Jackson'
          },
          {
            'label': position,
            'value': 'Sales' 
          }
        ]
    },
    {
        value: 'JDavis',
        label: 'Jacob Davis',
        attributes: [
          {
            'label': supervisor,
            'value': 'Liam Jackson'
          },
          {
            'label': position,
            'value': 'Marketing' 
          }
        ]
    }

Now when a supervisor is selected the list will be filtered so that it only include the users with that supervisor. See below:

When no supervisor is selected the entire list of users is shown. When Supervisor Lisa Daniels is selected the list is filtered to only display users assigned to Lisa.

Multiple Attributes

Attributes are an array, meaning you can have multiple attributes for the same option. 

When adding multiple attributes the options will display if ANY of the attributes are met.

So if we search on the position attribute to each of our users as well as the supervisor we will get the users who have ANY of those attributes.

As you can see, only Alex and Mary have Lisa as their supervisor, and Alex and Jacob are in the Marketing team so all 3 are being displayed.

Code Example

You can download code examples from our GitHub repo. This code is standard NodeJS, and can be used in a OneBlink Hosted API, or in your own code to get you started:

GitHub: Dynamic Form Elements

Setting Attributes

When implementing attributes you will assign the element which will be used as the filter.

Referring back to our Supervisor example you would conditionally base the users on the supervisor element as shown below. 

Testing

Once you’ve set up your endpoint in the OneBlink Console, you can click on the Test button. This will test your endpoint to ensure it is returning data in the expected format. If the test is successful it will return the number of records found, and allow you to view the response details.

Offline 

Your app users can often be in either intermittent coverage, or no coverage at all. In these cases your app will continue to operate as usual, using a cached version of your option set results.

When the app is first opened, all option sets in all of your forms will be automatically cached.

The app will work in a “connected first” assumption, where if your user has an internet connection then your options will be populated directly from your API. If, however, they have no internet connection, the cached version of your option sets will be displayed.

Get Help

If you have any question or would like assistance with setting up your option sets, please contact us via this support portal or email support@oneblink.io. We are happy to assist in any way we can.