Data Sources

Alpaca supports lazy loading of data from remote locations via data sources. Data sources are supported by a limited number of field types - including select, radio and checkbox fields.

To use a data source, specify the dataSource option for your field.

The dataSource option can be any of the following:

  • a set of datasource array elements directly supplied or a list of text items that will be converted to a data source array.
  • an object consisting of key/value pairs to be used to generate the data source array
  • the text URL for a remote GET endpoint where the datasource array will be loaded from.
  • a function to call to acquire the datasource array. The function has the signature f(callback) and the this reference is set to the field instance. You can use this field instance to get at the field's current value and any other values from other members in the form. You may opt to call out to your own backend and acquire data. Fire the callback to pass the datasource array results back to Alpaca.
  • a connector configuration (object) configuring data source array loading from a connector endpoint

The datasource array that is expected should be in the following format:

[{
  "value": "key 1", 
  "text: "display text 1"
}, {
  "value": "key 2", 
  "text: "display text 2"
}, {
  "value": "key 3", 
  "text: "display text 3"
}]

Using a Data Source Array

Nothing is dynamic and nothing is lazy loaded. Via this method, we can specify the text and value for each data source element.

{% raw %} {% endraw %}

Using a Data Source Array (text)

text and value for the data source array that is generates. Note that while this approach is simpler, it isn't equivalent to the previous approach in that you lose the display text.

{% raw %} {% endraw %}

Using an Object

supplying the value and text respectively.

Here is how we can achieve the same example using an object.

{% raw %} {% endraw %}

Using a Remote URL

If the URL starts with "/" as shown here, Alpaca automatically loads from the base path to the origin server.

The URL connection is assumed to be a GET and unauthenticated. If you need to control headers or access the underlying XHR object, consider using a custom function.

{% raw %} {% endraw %}

Using a Custom Function

data source array and pass it to the callback.

{% raw %} {% endraw %}

Using a Connector

on a configuration supplied.

For an example of connector usage within a data source, check out Connectors.