---
schema_version: "1"
id: e31bb84d55fbbc1eb12260c1206485973f80835cba4d4f08eb0a59cab0788d70
title: Create a Standalone Custom Lightning Web Component (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_create_a_standalone_custom_lightning_web_component.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_create_a_standalone_custom_lightning_web_component.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: b7bf028cd70fd9d1527812f82314f7e94e17f534a9f98a58b483bd00919eb30e
description: 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.
products:
  - Omnistudio
release: "264"
---
# 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](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US).

- 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](https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.reference_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)](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.security_lwsec_intro) 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](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/images/icon_important.png)
        
        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](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.security_lwsec_enable).
        
        ```
        <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)](https://help.salesforce.com/s/articleView?id=xcloud.os_extend_an_omniscript_element_s_lightning_web_component.htm&release=264.0.0&type=5 "For the managed package runtime, add custom behavior and styling to an Omniscript element while maintaining its core functionality. Replace an Omniscript element’s Lightning web component with a component that re-creates its properties and adds new ones.").

## 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](https://developer.salesforce.com/docs/platform/lwc/guide/events-create-dispatch.html).

1. Create a custom aggregate function and set the `omniaggregate` event to a variable.
    
    `customAggregate() {     const eventName = 'omniaggregate' }`
2. Create a variable to store the LWC element's input data.
    
    `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.
    
    `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.
    
    <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
              <colgroup>
                <col style="width:50%">
                <col style="width:50%">
              </colgroup>
              <thead class="slds-text-title_caps ">
                <tr class="">
                  <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d206409e251">Code Example</th>
                  <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d206409e254">Data JSON Result Example</th>
                </tr>
              </thead>
              <tbody>
                <tr class="">
                  <td data-label="Code Example" class="slds-cell-wrap" style="vertical-align:top;" headers="d206409e251 ">
                    <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x" id="task_gth_mk1_ldc__codeblock_rth_mk1_ldc"><a name="task_gth_mk1_ldc__codeblock_rth_mk1_ldc"><!-- --></a><code class="language-json">// 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);
}   </code></pre>
                  </td>

                  <td data-label="Data JSON Result Example" class="slds-cell-wrap" style="vertical-align:top;" headers="d206409e254 ">
                    <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x" id="task_gth_mk1_ldc__codeblock_sth_mk1_ldc"><a name="task_gth_mk1_ldc__codeblock_sth_mk1_ldc"><!-- --></a><code class="language-json">"CustomLWC12": {
    "elementName1": {
        "prop": "prop1"
    },
    "elementName2": {
        "anyKeyName": "myElementData"
    }
}</code></pre>
                  </td>

                </tr>
              </tbody>
            </table>

What’s next: [Add a Custom Lightning Web Component to a Custom LWC Element (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_add_a_custom_lightning_web_component_to_a_custom_lwc_element.htm&release=264.0.0&type=5 "For the managed package runtime, add custom Lightning web components that don’t extend an Omniscript element's component by using the Custom LWC element.").