Using Custom LWC inside Vlocity Omniscript

Create a custom Radio Group inside vlocity Omniscript

NEVER GIVE UP

Problem- Due to omniscript limitations, it happens you need to use custom LWC to achieve the requirements.

Solution:- 

• Get the custom LWC from the salesforce Lightning web components (in our example we are using radio group)

• <template>
      <lightning-radio-group name="radioGroup"
                            label="Radio Group"
                            options={options}
                            value={value}
                            type="radio"></lightning-radio-group>
  </template>
  

• Omniscript Designer > Inputs > drag “Custom LWC” inside step
• Map the custom LWC (radio group in our case ), under “Lightning Web Component Name“

• For passing any custom data, lets say coming from dataraptor, and use it in custom LWC

• In Custom LWC, .meta.xml file make 2 changes

runtimeNamespace is dependent on the vlocity vertical you are using say Communucation use vlocity_cmt (namespace) or vlocity_ins(for insurance)

• Inside your custom lwc .js file use the below lines of code to create omnscript wrapper

import { OmniscriptBaseMixin } from "vlocity_ins/omniscriptBaseMixin";

export default class customLWCRadioGroup extends OmniscriptBaseMixin(
  LightningElement
) {
//your lwc code here for radio group as shown above
}

• Deploy your changes to your sandbox for custom lwc, activate the omnscript,  Enable LWC(on script configuration), perview the LWC