Add an Omniscript Lightning Web Component to OmniOut (Managed Package)

For the managed package runtime, download and configure an Omniscript to use it off-platform in OmniOut. Download your Omniscript LWC from the LWC Omniscript Designer, add the component folder to the OmniOut project, and configure files for HTML and CSS.

1. Open an Omniscript in your Salesforce org, and click Activate.
2. Click the Download Off Platform LWC button and uncompress the downloaded file.
   

   

   Note

   If your Omniscript includes Custom LWCs from a managed package, the Custom LWCs may not work. Custom LWCs that exist in a managed package only work if they’re off-platform compatible.

3. Copy the component in the lwc folder of your downloaded component into the ./src/modules/vlocityomniscript folder of your OmniOut LWC project.
4. In an Omniscript Designer, copy the Omniscript tag using one of these options:

   • In the LWC Omniscript Designer, click the dropdown menu, click How To Launch, and copy one of the component tags.

     

   • In the Classic Designer, copy the LWC Omniscript component tag from the Script Configuration properties.

     

   • In the Classic Designer, copy the LWC Omniscript component code from one of the examples found in the How to Launch activated script section of the Omniscript.

     
5. In Visual Studio Code, open the ./src/index.html file and replace the component tag with your Omniscript component tag.
6. Edit your component tag by replacing c-- with vlocityomniscript- and save the file.
   
7. To import and define your component, open the ./src/index.js file and take these steps:

   1. Replace the sample component import with your component's file path.

      import VlocApp from 'vlocityomniscript/typeExampleSubtypeExampleEnglish';

      

   2. Replace the sample component tag with your modified component tag and remove the closing tag and angle brackets.

      customElements.define('vlocityomniscript-type-example-subtype-example-english', buildCustomElementConstructor(VlocApp));

      
8. (Optional) In the Omniscript component tag, remove the run-mode="localScriptDef" attribute to check if the Omniscript is active in Salesforce.
   

   Note

   When running a multi-language Omniscript, the run-mode="localScriptDef" attribute forces the Omniscript to use the locally defined custom labels. If run-mode isn’t present, a connection is made to retrieve the custom labels.

9. (Optional) In the Omniscript component tag, add dir="rtl" to force the Omniscript styles to load right-to-left regardless of the Omniscript language. Without this attribute, right-to-left languages still load with right-to-left styling. Omniscript provides beta support for right-to-left styling.

   <vlocityomniscript-type-example-subtype-example-english run-mode="localScriptDef" dir="rtl">    </vlocityomniscript-type-example-subtype-example-english>

10. (Optional) In Index.html, uncomment the Newport style sheets to apply Newport styling.

    <link rel="stylesheet" type="text/css" href="/newport/assets/styles/vlocity-newport-design-system.min.css">

11. In Index.html, uncomment the appropriate Script file for each of these elements that exist in your Omniscript:

    Element	Script File
    PDF Action	<script src="/vlocityresources/javascript/VlocityPdf.js"></script>
    Type Ahead Block using Google Maps	Uncomment this file, and in the key parameter, enter your API key. <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={YOUR_API_KEY_HERE}&libraries=places"> </script>

12. In Index.html, include the SLDS styles even when using Newport styles, if these elements exist in your Omniscript:

    Element	Style Sheets	Note
    File	<!-- SLDS styles --> <link rel="stylesheet" type="text/css" href="/slds/assets/styles/salesforce-lightning-design-system.css"> <link rel="stylesheet" type="text/css" href="/vlocityresources/slds/styles/OmniLwcUtilsCss.css">	LWC OmniOut supports file uploads up to 30 MB.
    Image	<!-- SLDS styles --> <link rel="stylesheet" type="text/css" href="/slds/assets/styles/salesforce-lightning-design-system.css"> <link rel="stylesheet" type="text/css" href="/vlocityresources/slds/styles/OmniLwcUtilsCss.css">	LWC OmniOut supports image uploads up to 30 MB.

13. Save your file.
14. To restart the server and view your Omniscript, run the command npm run watch in your terminal console.