A demo was developed in WireBootstrap to highlight some of it's main features.  This demo contains widgets created from popular components and pages from templates currently available in WireBootstrap.

A WireBootstrap data model was defined on top of a sample database proving the data for the demo.

Click to login to the demo

User: demo@wirebootstrap.com

Password: LoveWire12!

Note, the demo account is not able to save anything and, as a result, the account is unable to create anything new.

Below are some notable points about the demo.

Data Model

A data model provides a way of telling WireBootstrap's query engine about the data entities and their relationships inside a database.

Several views were created from tables in the sample database.  These views isolate the data entities used in the demo.  Other tables and views were hidden in the model so that they don't appear in the dataset builder, components, or pages.

Friendly names for tables, views, and fields were substituted for the names used inside the database.

Each view has a Count field which returns the number 1 for each record.  Setting the Aggregation property on these fields to Sum provides an easy way to count the records returned from queries against the entity view.  Below is a screen shot of the setting for vwOrders.OrderCount.

Relationships between the tables and views that represent data entities in the database can be defined in the data model.  This tells WireBootstrap how to construct the queries as widgets and pages are built from data in the database.

For more information on data models, visit Data Models.


The DataSet step in the Widget wizard is where the query is assembled for a widget.  

Changes to a data element in one widget on a page can be picked up from another on the page that uses the same data element.  Most widgets in the demo do not contain Region and Category in their queries so these fields were added to the dataset for each in the Filter position.

For more information on dataset queries, visit DataSet - Query.

DataSet View

The DataSet View allows data returned from the server to be transformed locally on the client device before being returned to widgets that will use the dataset's query results.

DataSet Views are used extensively in the demo.  For example, in the Revenue KPI widget, the color coding for the widget is calculated using an arbitrary rule.  Here, a new column to contain the color is created on the resulting DataTable and a CSS class name is set based on the value of Revenue.

For more information on DataSet Views and DataTables, visit DataSet - View.

Component Options

The Component Options step in the widget wizard is where data from the dataset is bound to a presentation component.  It's also the place where any configuration options can be specified.

The Top Products chart widget uses the Advanced tab in this step to set a custom title on the chart.  Use the Advanced tab to set any configuration property on a component when its not available on the Basic tab.

For more information on Component Options, visit Component Options.