--- schema_version: "1" id: e5a3b75390cd2d85c65e1fea6404bc9df1c88d47eda38ddb1eaa73712a731b6e title: Create a Standalone Custom Lightning Web Component 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_18102.md canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_create_a_standalone_custom_lightning_web_component_18102.htm&release=264.0.0&type=5 source_site: help.salesforce.com content_type: documentation content_hash: d416760da0fc028f9a1988559ed85c12101dd89ffc474eedac975d34f2f38fe1 description: Enable custom Lightning web components to act independently from an Omniscript by adding it to the Omniscript as a standalone component. Standalone custom Lightning web components cannot extend any Omniscript element component or the OmniscriptBaseMixin component. The standalone component supports custom functionalities, but cannot interact with an Omniscript or the Omniscript's data JSON. products: - Omnistudio release: "264" --- # Create a Standalone Custom Lightning Web Component Enable custom Lightning web components to act independently from an Omniscript by adding it to the Omniscript as a standalone component. Standalone custom Lightning web components cannot extend any Omniscript element component or the OmniscriptBaseMixin component. The standalone component supports custom functionalities, but cannot interact with an Omniscript or the Omniscript's data JSON. 1. Review and complete the requirements for creating a standalone custom Lightning Web component. See [Requirements for Custom Lightning Web Components for Omniscripts](https://help.salesforce.com/s/articleView?id=xcloud.os_requirements_for_creating_a_custom_lightning_web_component_for_omniscripts.htm&release=264.0.0&type=5 "Review the requirements for making a custom Lightning web component compatible with Omnistudio Lightning web components."). 2. 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. See [Create and Map Data Inside the Custom LWC Element](https://help.salesforce.com/s/articleView?id=xcloud.os_create_and_map_data_inside_the_custom_lwc_element_18140.htm&type=5&language=en_US). 3. Add the standalone custom Lightning web component to an Omniscript. See [Custom LWC Element](https://help.salesforce.com/s/articleView?id=xcloud.os_custom_lwc_element_17587.htm&release=264.0.0&type=5 "Add a custom Lightning web component that does not extend an Omniscript element component to an Omniscript using the Custom LWC element."). #### See Also - [Communicate from Omniscript to a Lightning Web Component](https://help.salesforce.com/s/articleView?id=xcloud.os_communicate_with_omniscript_from_a_lightning_web_component_18222.htm&release=264.0.0&type=5 "Send data from Omniscript actions and steps to other Lightning web components using the Publish and Subscribe property.") - [Custom LWC Element](https://help.salesforce.com/s/articleView?id=xcloud.os_custom_lwc_element_17587.htm&release=264.0.0&type=5 "Add a custom Lightning web component that does not extend an Omniscript element component to an Omniscript using the Custom LWC element.") - [Extend the OmniscriptBaseMixin Component](https://help.salesforce.com/s/articleView?id=xcloud.os_extend_the_omniscriptbasemixin_component_17717.htm&release=264.0.0&type=5 "Enable a custom Lightning web component to interact with an Omniscript by extending the OmniscriptBaseMixin component. The OmniscriptBaseMixin includes methods to update an Omniscript's data JSON, pass parameters, and more.") ## 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. For more information on events, see [Create and Dispatch Events](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.events_create_dispatch). Event: `omniaggregate` 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"
    }
}
What’s next: [Add a Custom Lightning Web Component to a Custom LWC Element](https://help.salesforce.com/s/articleView?id=xcloud.os_add_a_custom_lightning_web_component_to_a_custom_lwc_element_18892.htm&release=264.0.0&type=5 "Add custom Lightning web components that do not extend an Omniscript element's component by using the Custom LWC element.").