Data Connectors

WireBootstrap connects to a data service using a Data Connector. The architecture of a data connector can be as simple as a JavaScript class that makes calls to a data service or as complicated as the WireBootstrap Query Service which includes both server and client-side components in its architecture.

Visit www.wirebootstrap.com for a list of available data connectors and their supporting data services available in WireBootstrap. If you are using a data service that is not supported today, it's easy to build your own service provider. Visit Building a Data Connector for details.

Service Providers

The client side of a data connector uses a JavaScript class called a service provider that translates queries into syntax understood by a specific data service.

Most client application code, including components, connect to data services through a DataSource object. In turn, a data source uses a service provider created specifically for the target data service in order to execute queries. Service providers send queries to the data service on behalf of a data source. When a service provider gets a response from the data service, it passes the response back to the data source. For those familiar with the Microsoft .NET framework, this relationship is similar to the one between ADO.NET and an OLE DB provider.

Provider Key

Service providers register themselves with the WireBootstrap framework using a unique key. Use this key as the first parameter to constructing a new data source class.

To create a new data source, pass the service provider key into the constructor along with the configuration for the data source.

The example below creates a new data source that will make calls to a custom web service to get data.

//
// Create a new data source object pointing to a custom account 
// web service at a relative Url location.
//
const accountService = new wire.data.DataSource("custom", {
    ServiceRoot: "./account"
});

Provider Config

When creating a data source, the second parameter to the constructor is it's configuration. Use the Provider property on this configuration to specify settings specific to a service provider.

The example below is the sample data source used in the WireBootstrap Gentelella theme being created using the local data service provider key specifying that data be sourced from a JSON file.

const sampleDataSource = new wire.data.DataSource("local", {
    Provider: { 
        Json: {url: "../../data/sampleData.json" } 
    }
});

Allow

Service providers are able to tell consumers about the functionality they support through an allow property. Below is a list of the functionality that service providers can support. See the service provider documentation for details.

Name	Default	Description
delete	false	Allows deleting data from the data service.
discover	false	Provides a way to get entity, field listings, and other meta data from the data service.
storedProcedure	false	Allows executing SQL stored procedures in a relational database.
tableQuery	false	Allows select queries for two dimensional data using a TableQuery the class. See TableQuery for details.
test	false	Allows testing a connection to a data service.
write	false	Allows writing data to a data service.

In the example below, service provider support for testing a connection to the data service is checked before actually testing the connection.

const accountService = new wire.data.DataSource("custom", {
    ServiceRoot: "./account"
});

if(accountService.allow().test)
   accountService.test(); 

TableQuery

If allow.tableQuery is set to false then the service provider does not support select queries against a data service. If set to true, the defaults below all apply for service provider support for this feature. If set to an object, each property will specify the details of how this feature is implemented in the service provider.

Name	Default	Description
orderBy	null	Order by sorts the data returned from a data service. This property determines how the order by clause in the select query operates within the data services. Setting this property to 1 means the order by clause only supports 1 field for sorting data. A value 2 means the order by clause supports multiple order by fields for sorting data. A value of 0 or null means the service provider does not support this feature.
groupBy	false	Group by aggregates metric data across entities or dimensions of the metrics. This boolean attribute determines whether this feature is support by a data service.

The following example checks for tableQuery support and then executes a query against the account data service for customer entities.

const accountService = new wire.data.DataSource("custom", {
    ServiceRoot: "./account"
});

if(accountService.allow().tableQuery) {
    const query = wire.data.select().from("customers");
    const table = accountService.exec(query);
    ...
}   

Provider Extensions

Service providers must implement a minimum number of methods in order to be used by a data source to execute queries against a data service. However, they are free to add additional functionality as well.

A service provider can be accessed directly from a data source using the serviceProvider method.

In the example below, the service provider for the WireBootstrap SharePoint Data Connector can return the current user as a native SharePoint object using the getCurrentUser method directly on the service provider.

const accountService = new wire.data.DataSource("sp", {
    ServiceRoot: "https://sharepoint-server/mysite"
});

const user = await accountService.serviceProvider().getCurrentUser();

Provider Config

When creating a data source, the second parameter to the constructor is it's configuration. Use the Provider property on this configuration to specify settings specific to a service provider.

The example below is the sample data source used in the WireBootstrap Gentelella theme being created using the local data service provider key specifying that data be sourced from a JSON file.

const sampleDataSource = new wire.data.DataSource("local", {
    Provider: { 
        Json: {url: "../../data/sampleData.json" } 
    }
});