Data
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.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
});
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
});
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" }
});
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 row
Fred Flintstone
.const users = [
{ value: "Barney Rubble" },
{ value: "Fred Flintstone" }
]
const input = new wire.bsInput().render("#input", {
data: users,
datarow: 1
});
Binding a component to a WireBootstrap DataSet allows the component to be updated with new data whenever a field in its query is changed.
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" }
});
When using a dataset as data for a component, custom data can be passed to the Transform method using the
dataconfig
property. This can be helpful in custom shaping the resulting datatable sent to the UI after a data service call.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 },
});
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 data table returned from a data service....
const select = new wire.bsSelect().render({
data: dataset,
datamap: { value: "UserName", label: "FullName" }
});
...
const datatable = select.data();
Last modified 1yr ago