--- schema_version: "1" id: 7008d28e4ed1ea88bebc89962e264e61e40d99a76a32acbe30a5a92e59ee30f7 title: Extend the OmniscriptBaseMixin Component collection: admin version: current locale: en-us portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_extend_the_omniscriptbasemixin_component_17717.md canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_extend_the_omniscriptbasemixin_component_17717.htm&release=264.0.0&type=5 source_site: help.salesforce.com content_type: documentation content_hash: 5f6a3203e803046545331ed66e146c2a6df25f005ab5a9f4256603d881c1e433 description: 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. products: - Omnistudio release: "264" --- # Extend the OmniscriptBaseMixin Component 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. After extending the OmniscriptBaseMixin component, add a custom LWC input element to an Omniscript and specify the name of a component that extends the OmnIScriptBaseMixin. 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."). 1. **[Extend the Component](https://help.salesforce.com/s/articleView?id=xcloud.os_extend_the_omniscriptbasemixin_component_17717.htm&release=264.0.0&type=5)** Learn how a custom Lightning web component extends the OmniscriptBaseMixin component to wrap a Salesforce Lightning Element. 2. **[Validate the Component](https://help.salesforce.com/s/articleView?id=xcloud.os_extend_the_omniscriptbasemixin_component_17717.htm&release=264.0.0&type=5)** Learn how to add validation to the OmniscriptBaseMixin component by redefining the `checkValidity()` function. 3. **[Navigation Between Steps](https://help.salesforce.com/s/articleView?id=xcloud.os_extend_the_omniscriptbasemixin_component_17717.htm&release=264.0.0&type=5)** Learn which mixins you can set on the steps of an Omniscript so that users can navigate between those steps. 4. **[Data Save Inside of a Custom Component](https://help.salesforce.com/s/articleView?id=xcloud.os_extend_the_omniscriptbasemixin_component_17717.htm&release=264.0.0&type=5)** When the custom component doesn’t exist in the DOM, store the data in a state. To store data in a state, use the `omniSaveState()` function. The `omniSaveState` function accepts three arguments: a data object, a key, and a boolean. 5. **[Retrieval of Custom Component Data from an Omniscript](https://help.salesforce.com/s/articleView?id=xcloud.os_extend_the_omniscriptbasemixin_component_17717.htm&release=264.0.0&type=5)** Use the `omniGetSaveState()` function to retrieve custom component data from an Omniscript. 6. **[Clear a Saved State from a Previous Step](https://help.salesforce.com/s/articleView?id=xcloud.os_extend_the_omniscriptbasemixin_component_17717.htm&release=264.0.0&type=5)** When a Custom LWC's saved state relies on data from a previous step, you can conditionally clear the saved state of the Custom LWC whenever a user navigates to a previous step. After configuration, the Step element passes a boolean flag to the custom LWC. The code in your Custom LWC must use the boolean to determine whether to instantiate a new saved state or continue using the existing saved state. 7. **[Access the Layout of the OmniscriptBaseMixin Component](https://help.salesforce.com/s/articleView?id=xcloud.os_extend_the_omniscriptbasemixin_component_17717.htm&release=264.0.0&type=5)** Call the layout for your Custom LWC by passing the data-omni-layout parameter to the `getAttribute` method. 8. **[Remote Calls](https://help.salesforce.com/s/articleView?id=xcloud.os_extend_the_omniscriptbasemixin_component_17717.htm&release=264.0.0&type=5)** Enable users to make remote calls from a Custom LWC by using the `omniRemoteCall()` method. 9. **[Data JSON Update](https://help.salesforce.com/s/articleView?id=xcloud.os_extend_the_omniscriptbasemixin_component_17717.htm&release=264.0.0&type=5)** Update the custom Lightning web component element, map responses to the Omniscript’s data JSON, and create and map data inside the custom Lightning Web component element. #### See Also - [Create a Custom Lightning Web Component for Omniscript](https://help.salesforce.com/s/articleView?id=xcloud.os_create_a_custom_lightning_web_component_for_omniscript_17512.htm&release=264.0.0&type=5 "Add custom HTML, JavaScript, and CSS to an Omniscript by creating a custom Lightning web component. The Custom LWC element enables custom components to either interact with the Omniscript or to act as a standalone component. Standalone components do not interact with the Omniscript or the Omniscript's data JSON.") - [Create a Standalone Custom Lightning Web Component](https://help.salesforce.com/s/articleView?id=xcloud.os_create_a_standalone_custom_lightning_web_component_18102.htm&release=264.0.0&type=5 "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.") ## Extend the Component Learn how a custom Lightning web component extends the OmniscriptBaseMixin component to wrap a Salesforce Lightning Element. See this code example for extending the OmniscriptBaseMixin component: ``` import tmpl from './customLightningElement.html'; import { LightningElement } from 'lwc'; import { OmniscriptBaseMixin } from 'c/omniscriptBaseMixin'; export default class customLightningElementWithMixin extends OmniscriptBaseMixin(LightningElement) { handleBlur(evt) { this.omniUpdateDataJson(evt.target.value); } render() { return tmpl; } } ``` ## Validate the Component Learn how to add validation to the OmniscriptBaseMixin component by redefining the `checkValidity()` function. This code example contains a `checkValidity()` function that returns false when the sum is less than zero. ``` import { api } from 'lwc'; import { OmniscriptBaseMixin } from 'c/omniscriptBaseMixin'; export default class MyCustomLwc extends OmniscriptBaseMixin(LightningElement) { sum = 0; // defining custom validation conditions @api checkValidity() { return this.sum < 100; } } ``` ## Navigation Between Steps Learn which mixins you can set on the steps of an Omniscript so that users can navigate between those steps. ### omniNextStep() Advances users to the next step in the Omniscript.
JS Example HTML Example 
nextButton(evt) {
        if (evt) {
            this.omniNextStep();
        }
    }
 
<button onclick={nextButton}>Custom Next Button </button>
### omniPrevStep() Takes users to the previous step in the Omniscript.
JS Example HTML Example 
prevButton(evt) {
        if (evt) {
            this.omniPrevStep();
        }
    }
 
<button onclick={prevButton}>Custom Prev Button </button>
### omniNavigateTo(step) Takes users to a specific step in the Omniscript by passing an argument. The argument passed into the function can be a number that refers to the step's index in the Omniscript or a step's element name passed as a hardcoded string. The index for the current step is accessible using the property `this.omniScriptHeaderDef.asIndex`. ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio-264-0-0-production-enus/f526eaa8-ae05-487a-8944-4bb99b0b78ac/images/icon_note.png) Note You can’t auto-advance to a step more than one step ahead.
JS Example HTML Example 
goToStep(evt) {
        if (evt) {
            this.omniNavigateTo(this.omniScriptHeaderDef.asIndex - 2);
        }
    }
 
<button onclick={goToStep}>Custom Step Button </button>
## Data Save Inside of a Custom Component When the custom component doesn’t exist in the DOM, store the data in a state. To store data in a state, use the `omniSaveState()` function. The `omniSaveState` function accepts three arguments: a data object, a key, and a boolean. Method: `omniSaveState(input,key,usePubSub=false)`: Arguments: - `input`: The data to be saved. ``` let mySaveState = {"my":"data"}; this.omniSaveState(mySaveState); ``` - `key`: (Optional) A string value that the object parameter maps to as a key-value pair. If a key isn’t sent as a parameter, the key defaults to the name of the component. ``` let mySaveState = {"my":"data"}; let key = 'customLwcKey'; this.omniSaveState(mySaveState, key); ``` - `usePubSub`: (Optional) Set the boolean to true to store data for use in a pubsub pattern. For more information on pubsub patterns, see [pubsub events](https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.events_pubsub). When left empty or set to false, events can use the data. For more information on events, see [LWC Events](https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.events). When `omniSaveState` is in a `disconnectedCallback`, `usePubSub` must be set to `true` to pass the event in the pubsub instead of event bubbling. Optionally save the state within a disconnected callback. Saving the state within a disconnected callback enables the state of the element to save when users leave the element automatically. In disconnected callbacks, the `usePubSub` argument must be set to `true`. Events in disconnected callbacks can only be passed using pubsub. ![Example](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio-264-0-0-production-enus/f526eaa8-ae05-487a-8944-4bb99b0b78ac/images/icon_example.png) Example `omniSaveState` being called in a `disconnectedCallback`: ``` disconnectedCallback() { let mySaveState = {"my":"data", "here" : 8}; let key = 'customLwcKey'; let usePubSub = true; this.omniSaveState(mySaveState, key, usePubSub); } ``` ## Retrieval of Custom Component Data from an Omniscript Use the `omniGetSaveState()` function to retrieve custom component data from an Omniscript. `omniGetSaveState(key)`: The omniGetSaveState accepts a key as an optional argument. If a key is not sent, the key defaults to the name of the custom component. The key stores the data from the `omniSaveState()` function. ![Example](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio-264-0-0-production-enus/f526eaa8-ae05-487a-8944-4bb99b0b78ac/images/icon_example.png) Example With a key argument: ``` let key = 'customLwcKey'; const state = this.omniGetSaveState(key); ``` With no key: ``` // assumes the data is inside of the same custom component const state = this.omniGetSaveState() ``` ## Clear a Saved State from a Previous Step When a Custom LWC's saved state relies on data from a previous step, you can conditionally clear the saved state of the Custom LWC whenever a user navigates to a previous step. After configuration, the Step element passes a boolean flag to the custom LWC. The code in your Custom LWC must use the boolean to determine whether to instantiate a new saved state or continue using the existing saved state. 1. In Omniscript, determine the Step that clears the Custom LWCs saved state. 2. In the Step's properties, click **Edit as JSON**. 3. Enter the property `"omniClearSaveState": [ ]`. 4. In the **omniClearSaveState** property, enter the name of one or more custom LWC elements `"omniClearSaveState": [ "CustomLWC1"]`. The Step sends data to the Custom LWC enabling the Custom LWC to determine if the Step rendered. 5. In your Custom LWC's code, retrieve the current state. ``` const state = this.omniGetSaveState() ``` 6. In your Custom LWC's code, set a variable equal to `this.omniGetSaveState(this.omniJsonDef.name + '-$Vlocity.cleared'`. The function evaluates whether the previous Step containing the omniClearSaveState property rendered and returns a boolean. ``` let stateCleared = this.omniGetSaveState(this.omniJsonDef.name + '-$Vlocity.cleared'); ``` 7. Modify your code by using the boolean value to determine whether to keep the current saved state or instantiate a new saved state. ## Access the Layout of the OmniscriptBaseMixin Component Call the layout for your Custom LWC by passing the data-omni-layout parameter to the `getAttribute` method. Use this method: ``` this.getAttribute('data-omni-layout') ``` ## Remote Calls Enable users to make remote calls from a Custom LWC by using the `omniRemoteCall()` method. Method: `omniRemoteCall(params, boolean)` Arguments: - The first argument must be an object with the properties input, sClassName, sMethodName, and options. The values of each of the properties must be in String data type. ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio-264-0-0-production-enus/f526eaa8-ae05-487a-8944-4bb99b0b78ac/images/icon_note.png) Note Methods called within a package must have the namespace prepended with ${this.\_ns}. For example, `` `${this._ns}IntegrationProcedureService` ``. ``` const params = { input: JSON.stringify(this.omniJsonData), sClassName: 'SomeApexClass', sMethodName: 'someApexMethod', options: '{}', }; ``` - The second argument for omniRemoteCall is an optional boolean value that links a tracked property called `omniSpinnerEnabled`. The HTML must have some code to check the boolean's value. Here’s an HTML example: ``` ``` After omniRemoteCall executes, the response callback returns an object containing the two properties `result` and `error`. - `result`: The result property contains a raw response from the server. - `error`: The error property stores an error value from the Vlocity's GenericInvoke2 class. Omnistudio provides properties that, when passed in the options, enable jobs to be queuable, future, chainable, and continuable. ![Use Case Examples](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio-264-0-0-production-enus/f526eaa8-ae05-487a-8944-4bb99b0b78ac/images/icon_example.png) Use Case Examples - Remote call invoking an Apex class ``` const params = { input: this.omniJsonDataS, sClassName: 'SomeApexClass', sMethodName: 'someApexMethod', options: '{}', }; this.omniRemoteCall(params, true).then(response => { window.console.log(response, 'response'); }).catch(error => { window.console.log(error, 'error'); }); ``` - Integration Procedure call ``` const params = { input: this.omniJsonDataStr, sClassName: `${this._ns}IntegrationProcedureService`, sMethodName: 'test_RemoteAction', this will need to match the VIP -> type_subtype options: '{}', }; this.omniRemoteCall(params, true).then(response => { window.console.log(response, 'response'); }).catch(error => { window.console.log(error, 'error'); }); ``` - Chainable Integration Procedure call passing the property `chainable: true`. Use chainable when an Integration Procedure exceeds the Salesforce CPU Governor limit. ``` const options = { chainable: true, }; const params = { input: this.omniJsonDataStr, sClassName: `${this._ns}IntegrationProcedureService`, sMethodName: 'test_RemoteAction', this will need to match the VIP -> type_subtype options: JSON.stringify(options), }; this.omniRemoteCall(params, true).then(response => { window.console.log(response, 'response'); }).catch(error => { window.console.log(error, 'error'); }); ``` - Queueable remote call passing the property `useQueueableApexRemoting: true` . For more information on how queueable works, see [Queueable Apex](https://developer.salesforce.com/docs/atlas.en-us.apexcode.meta/apexcode/apex_queueing_jobs.htm). ``` const options = { input: this.omniJsonDataStr, vlcClass: 'SomeApexClass', vlcMethod: 'someApexMethod', useQueueableApexRemoting: true, }; const params = { input: this.omniJsonDataStr, sClassName: `${this._ns}VFActionFunctionController.VFActionFunctionControllerOpen`, sMethodName: 'runActionFunction', options: JSON.stringify(options), }; this.omniRemoteCall(params, true).then(response => { window.console.log(response, 'response'); }).catch(error => { window.console.log(error, 'error'); }); ``` - Future remote call passing the property `useFuture: true`. For more information on how Future Methods work, see [Future Methods](https://developer.salesforce.com/docs/atlas.en-us.apexcode.meta/apexcode/apex_invoking_future_methods.htm?). ``` const options = { useFuture: true, }; const params = { input: this.omniJsonDataStr, sClassName: 'SomeApexClass', sMethodName: 'someApexMethod', options: JSON.stringify(options), }; this.omniRemoteCall(params, true).then(response => { window.console.log(response, 'response'); }).catch(error => { window.console.log(error, 'error'); }); ``` - Continuation remote call passing the parameter `useContinuation: true`. For more information on how continuation works, see [Continuation Class](https://developer.salesforce.com/docs/atlas.en-us.apexcode.meta/apexcode/apex_class_System_Continuation.htm). ``` const options = { input: this.omniJsonDataStr, vlcClass: 'SomeApexClass', vlcMethod: 'someApexMethod', useContinuation: true, }; const params = { input: this.omniJsonDataStr, sClassName: 'SomeApexClass', sMethodName: 'someApexMethod', options: JSON.stringify(options), }; this.omniRemoteCall(params, true).then(response => { window.console.log(response, 'response'); }).catch(error => { window.console.log(error, 'error'); }); ``` ## Data JSON Update Update the custom Lightning web component element, map responses to the Omniscript’s data JSON, and create and map data inside the custom Lightning Web component element. 1. **[Update of the Custom Lightning Web Component Element's Data](https://help.salesforce.com/s/articleView?id=xcloud.os_extend_the_omniscriptbasemixin_component_17717.htm&release=264.0.0&type=5)** Apply the response of a Custom LWC callout to the Custom LWC element by using the `omniUpdateDataJson` method. 2. **[Mapping of Responses to the Omniscript's Data JSON](https://help.salesforce.com/s/articleView?id=xcloud.os_extend_the_omniscriptbasemixin_component_17717.htm&release=264.0.0&type=5)** Apply responses from custom actions using the `omniApplyCallResp()` method. 3. **[Create and Map Data Inside the Custom LWC Element](https://help.salesforce.com/s/articleView?id=xcloud.os_extend_the_omniscriptbasemixin_component_17717.htm&release=264.0.0&type=5)** 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.. ### Update of the Custom Lightning Web Component Element's Data Apply the response of a Custom LWC callout to the Custom LWC element by using the `omniUpdateDataJson` method. Method: `omniUpdateDataJson(input, aggregateOverride = false)` Arguments: - `input`: The first argument, input, accepts data in an object or primitive data type. Undefined isn’t accepted. The input data either replaces the current value or merges with the existing data depending on the setting of the second argument, `aggregateOverride`. - `aggregateOverride`: The second argument, aggregrateOverride, controls how the data saves to the data JSON. It’s an optional argument that is set to false by default. When set to false, the input data merges with the existing data. If the data is not an object it doesn’t merge into the data JSON. When set to true, the input data overrides any existing data in the Custom LWC element. ![Example](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio-264-0-0-production-enus/f526eaa8-ae05-487a-8944-4bb99b0b78ac/images/icon_example.png) Example - Pass the `input` argument with the default `aggregrateOverride` behavior: ``` let myData = "myvalue" // any kind of data that is a string, object, number, etc this.omniUpdateDataJson(this.myData); ``` - Pass the `input` argument with the `aggregateOverride` argument set to **false**: ``` // 1. first call to omniUpdateDataJson // input for omniUpdateDataJson when aggregateOverride = false { "prop1" : "data1" } // 2. output of data JSON after the first call // { "Step1" : { "CustomLWC1" : { "prop1": "data1" } } // 3. second call to omniUpdateDataJson // input for omniUpdateDataJson when aggregateOverride = false { "prop2" : "data2" } // 4. output of data JSON after the second call // notice that the value of CustomLWC1 contains both prop1 and prop2 // because the data is merged instead of replaced when aggregateOverride is set to false { "Step1" : { "CustomLWC1" : { "prop1": "data1", "prop2": "data2" } } ``` ### Mapping of Responses to the Omniscript's Data JSON Apply responses from custom actions using the `omniApplyCallResp()` method. The method accepts an object that it passes into the Omniscript's data JSON. If the root data node name in the response matches an element name in the Omniscript, that data prefills the element, and any nested elements, when it renders in the Omniscript. If the root node name does not match an element in the data JSON, the node inserts into the data JSON immediately. Applying the response works similar to the Send/Response property. For information, see [Manipulate JSON with the Send/Response Transformations Properties](https://help.salesforce.com/s/articleView?id=xcloud.os_manipulate_json_with_the_send_response_transformations_properties_22367.htm&release=264.0.0&type=5 "Specify and transform the input and output JSON of Omniscripts or Integration Procedures with the Send and Response Transformation properties. The Send properties transform the input; the Response properties transform the output."). ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio-264-0-0-production-enus/f526eaa8-ae05-487a-8944-4bb99b0b78ac/images/icon_note.png) Note The method can't support proxy objects. To include proxy inputs, you must first clone the input object by using JSON.parse and JSON.stringify and then pass it to the method, as shown in this example. ![Example](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio-264-0-0-production-enus/f526eaa8-ae05-487a-8944-4bb99b0b78ac/images/icon_example.png) Example ``` input = JSON.parse(JSON.stringify(input)); this.omniApplyCallResp(input); ``` Method: `omniApplyCallResp(response, usePubsub = false)` Arguments: - `response`: Object that merges into the data JSON. - `usePubSub`: Controls how the response passes up to the Omniscript header to merge into the data JSON. This boolean is set to false by default. When set to **false**, `response` is sent to the Omniscript header via javascript events. When set to **true**, `response` is sent to the Omniscript header by the pubsub module. The usePubSub argument enables users to call `omniApplyCallResp` asynchronously. When running asynchronously, the UI is not blocked waiting for the response. Optionally perform a remote call by using the omniNextStep() method and calling the `omniApplyCallResp()` method asynchronously. ![How the omniApplyCallResp() method updates Data JSON](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio-264-0-0-production-enus/f526eaa8-ae05-487a-8944-4bb99b0b78ac/images/icon_example.png) How the omniApplyCallResp() method updates Data JSON 1. View the current data JSON before running omniApplyCallResp(). ``` { "Step1" : { "Currency1" : 12345, "Text1" : "data1" }, "Step2" : { "Text3": "data3" } } ``` 2. Call omniApplyCallResp and pass data as an argument. ``` let myData = { "Step1" : { "CustomLWC1" : "newprop" }, "Anotherprop" : { "prop1" : "anothervalue" } } this.omniApplyCallResp(myData); ``` 3. View the updated data JSON. ``` { "Step1" : { "Currency1" : 12345, "Text1" : "data1", "CustomLWC1" : "newprop" }, "Step2" : { "Text3": "data3" }, "Anotherprop" : { "prop1" : "anothervalue" } } ``` ### 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**. Example: ``` 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. Example: ``` 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"
    }
}