The Development Framework for Web Site Themes

Make web site themes come to life with your data using WireBootstrap for free.


    <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.

Components Learn

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.

Themes Learn


    <!-- 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>


    <!-- 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.

Web Frameworks

Wire Data Connectors

Connect to and query any data service using the service provider architecture of WireBootstrap data connectors.

Data Connectors Learn


    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);

    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.

Integrations

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.

Demo Learn


    <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

The team at WireBootstrap will continue to add features to the platform that allow teams to build powerful applications with WireBootstrap.

As an extensible framework, WireBootstrap also allows anyone to also build for WireBootstrap.

More