Component

Most WireBootstrap components inherit from wire.ui.Component.  This class gives components the base functionality needed to take advantage of the capabilities of the WireBootstrap framework.  It internalizes much of the details for development teams building new components for WireBootstrap.  It also provides a standard interface for teams working with components as they develop applications using WireBootstrap.
Classes
Components that inherit from wire.ui.Component are JavaScript classes or functions which allow new instances of them to be created.  By convention, each is defined on the root global object wire although this is not a requirement.
In the example below, a new instance of the DataTables for WireBootstrap component is created.
1
const datatable = new wire.datatables();
Copied!
Larger collections of components from the same vendor may also create a root namespace on the wire global and then create components inside that root.
In the example below, an instance of the Gentelella Compare KPI component is created.
1
const kpi = new wire.gentelella.kpiCompare();
Copied!
Render
The render method is called to initialize a component which includes binding to data, applying any configuration, attaching to a DOM element, and then sending out event notifications that its finished initializing.  
The render method takes two parameters.  The first is the element id into which the component will be rendered.  The second parameter is the configuration for initialing the component.
The example below creates a new instance of the  DataTables for WireBootstrap component and renders it inside an element with the id table.
1
const datatable = new wire.datatables();
2
​
3
datatable.render("#table", {
4
    ...
5
});
Copied!
The render method returns the instance of the component so it can be chained with the component constructor for convenience.
1
const datatable = new wire.datatables().render("#table", {
2
    ...
3
});
Copied!
Config
Most components have default configuration settings that can be overridden by passing a configuration into the render method.  One of the operations performed in the render method is the merging of the configuration passed in with the components defaults. The config method on a component will return this merged configuration. 
In the example below, the configuration for an instance of the DataTables for WireBootstrap component is pulled and its selectAll value is written to the browser's developer tools console.
1
let config = datatable.config();
2
​
3
console.log(config.selectAll);
Copied!
Data
The data configuration for a component determines where the component will get its data.  Often times, this requires that a query be run in a data service.  Once this is resolved, the data is transformed into a WireBootstrap DataTable and made available to the component for presentation.  The data method on the component can be used to access this data table.
1
...
2
​
3
let table = datatable.data();
Copied!
Element
Use the element method of a component to get a reference to the DOM object to which the component is bound.  If the component uses jQuery for the element, you can get the jQuery version using the$element method.  
1
...
2
​
3
let el = datatable.element();
4
​
5
el = datatable.$element();
Copied!
Plugin
The WireBootstrap components that wrap the plugins used in themes expose references to the plugin used internally by the component so the methods and properties of the native plugin can be used directly.  
Use the plugin property of a component to get a reference to the internal plugin instance used by the component.
The following example sets the internal DataTables plugin instance used by the DataTables for WireBootstrap component into a variable called plugin.  It then gets an array of the currently selected rows using the native DataTables API.
1
const datatables = new wire.datatables({
2
    ...
3
});
4
​
5
const plugin = datatables.plugin;
6
​
7
const rows = plugin.rows({ selected: true }).data().toArray();
Copied!
Many of the plugin functions like the one above are simplified in the WireBootstrap components that extend them.  
In the example above, the same data can be accessed via the getSelectedRows method on the DataTables for WireBootstrap component directly.
1
...
2
​
3
const rows = datatables.getSelectedRows();
Copied!
​
Data Events
For components that send out data events, this behavior can be turned off by setting the dataevent property.
1
const select = new wire.select2();
2
​
3
select2.render("#select", {
4
    dataevent: false
5
});
Copied!
 For more information on WireBootstrap components, visit the wire.ui.Component reference page.

Custom

Next - Working with Components

Web Frameworks

Last modified 10mo ago

Copy link

Contents