Featured Components
<wire-datatables
wr-import-data-='./sales-dataset.js'>
</wire-datatables>
<wire-chartjs wr-import-data='./sales-dataset.js'
datamap-labels="product"
datamap-series="sales"
type='line'>
</wire-chartjs>
Wire Components
Web site themes come with dozens of third party components each with their own unique configurations and nuances.
WireBootstrap provides a framework for extending these components providing a simple and consistent way to use them in building data-driven applications.
Wire Themes
Web site themes are created by talented UI/UX designers. They are great starting points for custom web and mobile application development.
WireBootstrap turns the static HTML in themes into data-aware components that can easily be re-used and dynamically change based on user inputs on a page.
<!-- This ... -->
<div class="kpi theme-header">
<div class="theme-label">Sales</div>
<div class="theme-bold">20,000</div>
<div class="theme-success icon-increase"></div>
</div>
<!-- ... becomes this -->
<kpi wr-data="sales"></kpi>
Featured Web Frameworks
<!-- Web Commponents -->
<wire-datatables><wire-datatables>
<!-- Angular -->
<div wire-component="wire.datatables"><div>
<!-- React -->
return <WireComponent component="wire.datatables"><WireComponent>;
<!-- Vue.js -->
<div wire-component="wire.datatables"><div>
Web Frameworks
There is no need for component authors to create separate versions for popular web frameworks.
WireBootstrap allows these same components to be used directly with any number of web frameworks.
Featured Data Connectors
Wire Data Connectors
Connect to and query any data service using the service provider architecture of WireBootstrap data connectors.
const salesforce = new wire.data.DataSource("salesforce");
const contacts = await wire.data.select().from("Contact")
.execAsync(salesforce);
const sql = new wire.data.DataSource("sql");
const customers = await wire.data.select("Customers")
.distinct().from("SalesTable")
.execAsync(sql);
Featured Integrations
const powerBI = new wire.data.DataSource("power-bi");
const dashboards = await wire.data.select().from("dashboards")
.execAsync(powerBI);
const dashboard = dashboards.first();
const tile = new wire.pbiTile().render("#tile", {
dashboardId: dashboard.id,
tile: "Opportunity Size"
});
Wire Integrations
WireBootstrap integrates with other technologies through its open component design and data connector architecture. This makes it simple to build custom solutions with application platforms.
Query a SQL database from a product list in SharePoint or use a Salesforce contact list to filter a Power BI chart. Once these platforms are connected to WireBootstrap, the combinations are endless.
Wire Dashboards
Dashboard or Admin themes are a great way to start development of applications that require filters, charts, KPIs, and other data visualizations.
WireBootstrap components can automatically talk to one another on a page dynamically changing service queries and redrawing visualizations as users interact with data.
<wire-select2
wr-import-data-='./sales-dataset.js'
datamap-value='product'>
</wire-select2>
<wire-chartjs
wr-import-data='./sales-dataset.js'
datamap-labels="product"
datamap-series="sales"
type='line'>
</wire-chartjs>
Extend WireBootstrap