Page Data

The sample application contains one page called index.html and exists in the root of the project directory.

The page data module handles the data access concerns for the page. In the sample application, the page data module for the index.html page is index.data.js.

DataSource

The data module defines a WireBootstrap DataSource object called datasource that is used to query databases using the query service.

 datasource = new wire.data.DataSource("sql", {
    ServiceRoot: "http://localhost:1895",
    Provider: {
        ServiceId: null,
        SecretKey: null,
        ConnectionId: null
    }
});

Properties on the object are bound to UI components in the Page Controller. If values are set on the object, they will be set in their respective components by default when the page loads. See Service Provider for setting the data source configuration Provider attributes when working with the query service.

Entities

The getEntities method on the page data module uses a data source discover method to retrieve a list of tables and views in the source database per the connection details entered in the UI and set on the datasource object.

getEntities(callback) {

    this.datasource.discoverEntitiesAsync().done((entities) => {
    
        const table = this.datasource.getResponseTable(entities);
        
        callback(table);

    });
    ...
}

Sample Data

The getSampleDataSet method on the page data module returns a dataset that uses the datasource and includes a query for the top N records from an entity that is passed in as a parameter the the method. This dataset is used as the data binding for the grid on the page controller module.

getSampleDataSet(entity) {

    return new wire.data.DataSet({
        Source: this.datasource,
        Query: wire.data.select().top(5).from(entity)
    });

}