# Data Sources

In developing WireBootstrap applications, most application code and all components communicate with data services through a [DataSource](https://docs.wirebootstrap.com/wirebootstrap/reference/wire.data/wire.data.datasource) object.  This object is located at `wire.data.DataSource`.  

## Configuration

<pre class="language-javascript"><code class="lang-javascript">//
// Create a new data source object from a CSV file
//
<strong>const accountService = new wire.data.DataSource("local", {
</strong>    ...
    Provider: {
        Csv: { url: "./data/sales.csv" }
    }
});
</code></pre>

The data source constructor takes two parameters.  The first is the service provider key.  This tells the data source which [service provider](https://docs.wirebootstrap.com/wirebootstrap/data-connectors#service-providers) to use with the data service.&#x20;

The second parameter is the configuration for the data source.  This configuration has two parts.  The root properties are attributes of the data source object.  These settings are independent of any service provider.  One of the root parameters on the data source is the `Provider` attribute.  This attribute is the root of the configuration for the service provider.  Any configuration in this object will be specific to the service provider.

In the example above, the `Csv` configuration object is only valid for the [local service provider](https://docs.wirebootstrap.com/data-connectors/local-data) specified in the first parameter `local`.

## Data Models

Data models contain meta data about the data returned from a data service.  Data models are a convenient way to share data attributes such as friendly labels or numeric formatting across any queries that are run through a data source with a model set up.   This meta data is also available to any WireBootstrap component for display.

Data models are set up on a data source.  A data model is meta data about fields in the data service that will be added to result sets returned as [DataTable](https://docs.wirebootstrap.com/wirebootstrap/working-with-datatables/datatables) objects.  The meta data is set up by the data source once it receives the results from the data service.  Meta data for each field is stored in the `Columns` attribute on the data table.

In the following example, any query that returns the `Sales` or `Date` field from the data service will have meta data attached to the respective columns in any data table.

```javascript
const accountService = new wire.data.DataSource("local", {
    ...
    Model: new eb.data.DataModel({
        Fields: [
            
            // Use 'Revenue' as the UI label for this field
            // Format the field as currency with 2 decimal places
            { Entity: "Facts", Name: "Sales_Stage", Alias: "Revenue", Format: "C2" },
            
            // Use 'Date' as the UI label for this field
            // Format the field as a date using the the third party library 'moment.js'
            { Entity: "Facts", Name: "Date_Stage", Alias: "Date", Format: (value) => {
                return moment(value).format("MM/DD/YYYY");
            }}
            
        ]
    })
});
```

## Security

To set security on calls to a data service, set the Headers property on the data source configuration using standard [HTTP Authorization](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Authorization).

```javascript
const accountService = new wire.data.DataSource("custom", {
    Headers: {"Authorization": "Bearer " + "[accessToken]"}
}
```

Methods on the *DataSource* object can also be used to set authorization.

```javascript
accountService.useBearerAuth("[accessToken]");
...
accountService.useBasicAuth("[user]", "[password]");
```

Visit the [wire.data.DataSource](https://docs.wirebootstrap.com/wirebootstrap/reference/wire.data/wire.data.datasource) reference for more on data sources. Visit the service provider documentation for details on configuration for a specific service provider.