Extend the OmniscriptBaseMixin Component

Extend the Component

Learn how a custom Lightning web component extends the OmniscriptBaseMixin component to wrap a Salesforce Lightning Element.

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.

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.

nextButton(evt) {
        if (evt) {
            this.omniNextStep();
        }
    }

<button onclick={nextButton}>Custom Next Button </button>

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 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. When left empty or set to false, events can use the data. For more information on events, see 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 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

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.

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 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:

  <template if:true={omniSpinnerEnabled}>
        <div class="slds-spinner-container__wrapper">
          <c-spinner variant="brand"
                     alternative-text="Loading.."
                     size="medium">
          </c-spinner>
        </div>
  </template>

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

• 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.

  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.

  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.

  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
   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
   Apply responses from custom actions using the omniApplyCallResp() method.
3. 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..

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

• 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.

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

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

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