Create a Standalone Custom Lightning Web Component

Create and Map Data Inside the Custom LWC Element

Construct additional data JSON nodes in the Custom LWC element and pass values down from the element into the new JSON nodes using the omniaggregate event.

1. Create a custom aggregate function and set the omniaggregate event to a variable.
   Example:

   customAggregate() {
       const eventName = 'omniaggregate'
   }

2. Create a variable to store the LWC element's input data.
   Example:

   customAggregate() {
       const eventName = 'omniaggregate'
       const data = {
           anyKeyName : 'myElementData'
       };
   }

3. Construct an object by mapping the data to the key data, and an element name to the key elementId.

   customAggregate() {
       const eventName = 'omniaggregate' 
       const data = {
           anyKeyName : 'myElementData'
       };
       const detail = {
           data: data,
           elementId: 'elementName2'
       };
   }

4. (Optional) In the detail object, include the key-value pair aggregateOverride: true to override all existing data in the Custom LWC element.

   customAggregate() {
       const eventName = 'omniaggregate' 
       const data = {
           anyKeyName : 'myElementData'
       };
       const detail = {
           data: data,
           elementId: 'elementName2',
           aggregateOverride: true
       };
   }

5. Create a new event object that passes the omniaggregate event and an object containing these four properties:
   • bubbles: A boolean that determines if the event bubbles up to the DOM.
   • cancelable: A boolean that determines if the event is cancelable.
   • composed: A boolean that determines if the event can pass through the shadow boundary.
   • detail: Data passed in the event.
   Example:

   omniAggregate() {
       const eventName = 'omniaggregate' 
       const data = {
           anyKeyName : 'myElementData'
       };
       const detail = {
           data: data,
           elementId: 'elementName2'
       };
       const myEvent = new CustomEvent(eventName, {
           bubbles: true,
           cancelable: true,
           composed: true,
           detail: detail,
       });
   }

6. Call this.dispatchEvent() and pass in the event object as a parameter.

   Code Example	Data JSON Result Example
   // code to call omniAggregate() { const eventName = 'omniaggregate' const data = { anyKeyName : 'myElementData' }; const detail = { data: data, elementId: 'elementName2' }; const myEvent = new CustomEvent(eventName, { bubbles: true, cancelable: true, composed: true, detail: detail, }); this.dispatchEvent(myEvent); }	"CustomLWC12": { "elementName1": { "prop": "prop1" }, "elementName2": { "anyKeyName": "myElementData" } }