Vlocity Facts #45 || Pop-Up Screen and Navigating to the Next Step in Omniscript by using LWC

Consider one scenario where we need to show confirmation screen when user proceeding to next steps after updating details. 
To achieve this, you'll need to use a custom button: when a user clicks it, a pop-up screen will appear, which can be implemented using LWC.

Create LWC component 
1. HTML code

2. JS code

import { LightningElement, track } from 'lwc';

import { OmniscriptBaseMixin } from "omnistudio/omniscriptBaseMixin";

export default class ConfirmationScreenLWC extends OmniscriptBaseMixin(LightningElement) {

@track isOpen = false;

  handleShowPopUp() {

        this.isOpen = true;

    }

    handleOk() {

        this.omniNextStep();

    }

   handleClose() {

        this.isOpen = false;

    }

} Enable a custom Lightning web component to interact with OmniScript by extending the OmniScriptBaseMixin component. The OmniScriptBaseMixin includes methods to update OmniScript's data JSON, pass parameters, navigate to the Next or Previous step, and more.

omniNextStep(): Advances users to the Next Step in OmniScript.

3. xml code To make the custom Lightning web component compatible with Vlocity Lightning web components, you must set two metadata tags in your XML configuration file:         isExposed : <isExposed>true</isExposed>         runtimeNamespace: <runtimeNamespace>NS</runtimeNamespace> Replace the NS variable in the code example with the namespace of your package

<?xml version="1.0"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>60.0</apiVersion>

    <isExposed>true</isExposed>

    <runtimeNamespace>omnistudio</runtimeNamespace>

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__HomePage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__Tab</target>

    </targets>

</LightningComponentBundle> Navigate to omniscript and add recently created LWC by using input element 'Custom Lightning Web Component'.

Now navigate to step properties and choose range - 0 and remove label name for Next and Previous buttons.

Active the omniscript to preview the output.

Submit Changes button is LWC button. Once you click on that button Pop-up will displayed.

If user selects 'Ok' it will navigated to next step. [this.omniNextStep() helps you to navigate to next step]
If user selects 'Cancel' pop-up will be closed and stays in the same screen. -------------------------------------------------------------------------------- One more scenario: When we need to display next button based on Validations or Conditions we can use Custom LWC buttons by extending OmniscriptBaseMixin.