Create a Standalone Custom Lightning Web Component (Managed Package)

For the managed package runtime, enable custom Lightning web components to act independently from an Omniscript by adding it to the Omniscript as a standalone component.

Requirements:

Managed Package app icon This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see Omnistudio Help.

The component cannot extend an Omniscript element's Lightning web component.
The component cannot extend the OmniScriptBaseMixin component.
The component can only interact with Omniscript through the omniscriptaggregate event.
Custom Lightning web components built outside of the package cannot use any Salesforce Lightning web component that uses resources or affects the component at runtime. For more information, see Salesforce Modules.
To make the custom Lightning web component compatible with Vlocity Lightning web components, you must set two metadata tags in your XML configuration file:
- runtimeNamespace: If Lightning Web Security (LWS) is disabled, add the namespace of your Vlocity package to the XML metadata file in your component by using the runtimeNamespace metadata tag. Replace the NS variable in the code example with the namespace of your Vlocity package.
  
  Important If LWS is enabled, setting runtimeNamespace in your components causes errors similar to "Cannot use runtime namespace 'somename' in module c-someComponentName". To determine if LWS is enabled in your org, see Enable Lightning Web Security in an Org.
```
<runtimeNamespace>NS</runtimeNamespace>
```
- isExposed : Set the isExposed metadata tag to true.
```
<isExposed>True</isExposed>
```

For more information on extending Vlocity Lightning web components, see Extend an Omniscript Element's Lightning Web Component (Managed Package).

Create and Map Data Inside the Custom LWC Element

Beginning with Vlocity Insurance and Health and Vlocity CME Summer '20, 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.

For more information on events, see Create and Dispatch Events.

Create a custom aggregate function and set the omniaggregate event to a variable.
```
customAggregate() {
    const eventName = 'omniaggregate'
}
```

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

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

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'
    };
}

(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
    };
}

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.
```
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,
    });
}
```

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

Code Example Data JSON Result Example

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" } }`

// 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"
    }
}

What’s next: Add a Custom Lightning Web Component to a Custom LWC Element (Managed Package).