Event Data

Sending event data to consumers is an important feature of the WireBootstrap data event system.

Basic Data Events

To pass a custom object as part of an event, use the data method on the data event.

const product = { sku: "SKU0001" }

const dataevent = new wire.data.DataEvent("myevent")
    .data(product);

dataevent.raise();

The data can then be retrieved from the object passed into the data event listener callback using the data attribute.

wire.data.listen().event("myevent").when((config) => {
   
   const data = config.data;
   
   console.log(data.sku);
      
});

Structured Data Events

The data event system is used extensively by WireBootstrap components to communicate with one another about the changes a user is making on a page as they interact with the components. Components can receive notifications of changes in other components and react accordingly if they are displaying data that may be affected by a user interaction.

Components receive their data as WireBootstrap data tables. The wire.data.DataEvent class contains methods that allow provider components to send out events with the components of their data that was changed or otherwise affected by a user interaction.

In the example below, a new dataselect.wire event is raised and the cell method on the data event is used to store an individual data point contained inside a data table.

const table = new wire.data.DataTable([
    {"product", "SKU001", month: "May", sales: "200"}
]);            

...
 
new wire.data.DataEvent()
    .dataselect()
    .cell("product", "SKU001")
    .raise();

Other methods allow the event to contain more data about the dataselect.wire event supplying the table column, the table row, and the table itself as additional context about the user's selection using methods with the same name.

...

ev.table(table);
 
ev.column(table.getColumn("product"));
 
ev.row(table.Rows[0]);

...

Listening for Structured Data

Consumers can qualify the events in which they are interested by specifying a number of data elements when setting up the listener.

In the example below, the consumer is listening for dataselect.wire events but only on ones that concern the product column on a structured data event. Also seen below, the callback method when parameter now contains the data elements sent by the provider that raised the data event.

wire.data.listen().dataselect().column("product").when((config) => {
   
   const data = config.data;     
    
   const cell = data.cell;
   const col = data.column;
   const row = data.row;
   const table = data.table;
      
   ...
      
})