WireBootstrap
HomeDocsBuySupport
  • Introduction
  • Overview
  • Getting Started
  • Installation
  • Connecting to Data
    • Data Connectors
      • SQL Data
      • Custom Web Services
      • Local Data
      • Other Sources
    • Data Sources
    • Discovery
    • Building a Data Connector
  • Working With Queries
    • Select Queries
      • Query Extensions
    • Stored Procedures
    • Custom Web Services
    • Executing Queries
    • ORM
  • Writing Data
  • Updates
  • Deletes
  • Working with DataTables
    • Introduction
    • Filter and Sort
    • Select and Calculate
    • Joins
    • Rows
    • Columns
  • Working with DataSets
  • Introduction
  • Executing Queries
  • Transforms
  • Writing Data
  • Data Events
  • Working with Components
    • Introduction
    • Encapsulation
    • Configuration
      • Data
      • Events
      • Observables
      • Validation
      • Display
      • Vendor
      • Custom
    • Component
    • Web Frameworks
    • Building a Component
      • Hello World
      • Data Events
      • DataSets
  • Working With Data Events
    • Introduction
    • Event Basics
    • Event Data
    • Event Actions
  • Working with Themes
    • Introduction
    • Sample Data
    • Libraries
    • Pages
    • Building a Theme Project
  • Utilities
    • Formatting
    • Expressions
    • Collections
    • Spinners
    • Copy and Merge
    • Validation
    • Loading Assets
    • Service Calls
    • Download Files
    • Browser Location
    • Types
    • Promise
  • Reference
    • wire
      • wire.Collection
      • wire.download
      • wire.validate
    • wire.data
      • wire.data.DataEvent
      • wire.data.DataModel
      • wire.data.DataPromise
      • wire.data.DataSet
      • wire.data.DataSource
      • wire.data.DataTable
        • Columns
        • Rows
      • wire.data.StoredProcedure
      • wire.data.TableQuery
    • wire.ui
      • wire.ui.Component
      • wire.ui.validate
Powered by GitBook
On this page
  • Data
  • DataMap
  • DataRow
  • DataSet
  • DataConfig
  • Data Method

Was this helpful?

  1. Working with Components
  2. Configuration

Data

PreviousConfigurationNextEvents

Last updated 3 years ago

Was this helpful?

The most common configuration feature when working with third-party components is data-binding. WireBootstrap components are bound with data using the data configuration parameter. This parameter can be set to any number of standard data structures.

Data

In the example below, the component is bound to an array of objects.

const users = [
    { value: "jkratz", label: "Jamie Kratz" },
    { value: "pdougherty", label: "Pat Dougherty" }
];

const select = new wire.bsSelect().render("#select", {
    data: users
});

Components can also be data bound to a WireBootstrap .

const userTable = new wire.data.DataTable([
    { value: "jkratz", label: "Jamie Kratz" },
    { value: "pdougherty", label: "Pat Dougherty" }
]);

const select = new wire.bsSelect().render("#select", {
    data: userTable
});

DataMap

Many components require a specific set of fields in order to render data. A chart for example will need to know which fields to use to render the axis labels as well as which ones contains the metric data to plot on the chart.

The Bootstrap Select component expects the data passed in to contain a field called value and another called label. If these field names don't exist in the data, use the datamap attribute to specify which fields should be used.

In the example below, the UserName field in the data is to be used as the value field and the FullName field as the label field.

const users = [
    { UserName: "jkratz", FullName: "Jamie Kratz" },
    { UserName: "pdougherty", FullName: "Pat Dougherty" }
];

const select = new wire.bsSelect().render("#select", {
    data: users,
    datamap: { value: "UserName", label: "FullName" }
});

DataRow

Some components require a single record. Use datarow to specify the row in the data if it contains more than one row. This is a zero index reference.

In the following example, the component will be bound to the second rowFred Flintstone.

const users = [
    { value: "Barney Rubble" },
    { value: "Fred Flintstone" }
]

const input = new wire.bsInput().render("#input", {
    data: users,
    datarow: 1
});

DataSet

const accountService = new wire.data.DataSource("table", {
    Provider: {
        Server: "query-server"
    }
});

const query = wire.data.select("UserName", "FullName").from("Users");
    
const dataset = new wire.data.DataSet({
    Source: accountService,
    Query: query
});

const select = new wire.bsSelect().render({
    data: dataset,
    datamap: { value: "UserName", label: "FullName" }
});

DataConfig

const dataset = new wire.data.DataSet({
    ...
    Transform: (data, callback) => {

     let table = data.table;

      if (data.config.removeFred) {
          table.delete().eq("value", "Fred Flintstone").table();
      }        
      
      callback(table);
      
    }
});

...

const input = new wire.bsInput().render("#input", {
    data: dataset,
    dataconfig: { removeFred: true }, 
});

Data Method

...

const select = new wire.bsSelect().render({
    data: dataset,
    datamap: { value: "UserName", label: "FullName" }
});

...

const datatable = select.data();

Binding a component to a WireBootstrap allows the component to be updated with new data whenever a field in its query is changed.

When using a dataset as data for a component, custom data can be passed to the method using the dataconfig property. This can be helpful in custom shaping the resulting datatable sent to the UI after a data service call.

Especially helpful when using a data set, the data method can be used to pull the actual data being displayed in the component. In the case of a dataset, this will usually be a returned from a data service.

DataTable
DataSet
Transform
data table