--- schema_version: "1" id: 8d071c8fef5542eeacc9cb7a36e90bcf06e2efd8bb23ff64424e4beba7b68c4e title: LWC Omniscript Designer Overview (Managed Package) collection: admin version: current locale: en-us portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_lwc_omniscript_designer_overview.md canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_lwc_omniscript_designer_overview.htm&release=264.0.0&type=5 source_site: help.salesforce.com content_type: documentation content_hash: a305cdc2f656a49a260ac8c6f3baecf59c202b31383ba3980456a54cfdb9b4c3 description: For the managed package runtime, beginning with the Vlocity Insurance and Health Spring '20, the Vlocity LWC Omniscript Designer enables you to preview dynamic web forms as you build them using a drag-and-drop interface with WYSIWYG editing. products: - Omnistudio release: "264" --- # LWC Omniscript Designer Overview (Managed Package) For the managed package runtime, beginning with the Vlocity Insurance and Health Spring '20, the Vlocity LWC Omniscript Designer enables you to preview dynamic web forms as you build them using a drag-and-drop interface with WYSIWYG editing. ![Managed Package app icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US). While building your script, preview elements inside steps, view property changes live, and access contextual guidance with in-product help to discover and learn about functionality without leaving your script. ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/images/icon_note.png) Note The LWC Omniscript Designer is optimized for use in the Google Chrome browser. ![image](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/lwcosdesigneroverview.png) ## LWC Omniscript Designer Highlights Notable features of the LWC Omniscript Designer include: - Building your scripts on a wide and adjustable Canvas and instantly view changes made to element properties. - Repositioning, cloning, and adjusting the width of step elements along a 12-column horizontal grid. - Accessing inactive elements and navigating between elements in high-level and detailed views from the Navigation Panel. - Configuring elements from the Properties panel. - Searching for and dragging elements onto the Canvas from the Build panel. - Configuring script-wide settings from the Setup panel. - Viewing contextual In-Product Help to discover and learn about elements and properties without leaving your script. - Previewing, testing, and debugging your script in Preview. ## Header (1) In the Header, view metadata and perform actions related to your script. View high-level metadata about your Omniscript such as **Type**, **SubType**, **Version**, **Language**, and **Activation** status. In the actions navigation, toggle between design and preview mode, create a new version, activate or deactivate the current version, edit basic settings, download your Omniscript, and get launch instructions. ## Navigation Panel (2) Access and navigate between active and inactive actions, steps, and step elements from the Navigation Panel.
image

The Slide View tab provides a high-level view of the structure of large and complex scripts. Click on a slide to open the Properties panel for a step or action.
image

The Tree View tab provides a detailed view of the script's structure. Click on a branch to open the Properties panel for a step, element, or action.
## Canvas (3) (A) Build your scripts by dragging elements from the Build panel onto the Canvas. ![image](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/lwcosdesignercanvas.png) (B) Rearrange, clone, and delete elements as needed. (C) Adjust the width of the Canvas from either side. (D) Expand Steps to preview and configure elements. Adjust the width of elements on a 12-column grid, and drag elements next to each other to automatically take up the remaining width of the grid. (E) See how your scripts look with a Newport or Lightning theme without switching to Preview. ## Build panel (4) Drag action, display, function, group, and input elements, and entire Omniscripts from the Build panel onto the Canvas to build your scripts. ## Properties panel (5) In the Properties panel, configure properties for action, display, function, group, input, and embeddable Omniscript elements in the UI, or edit properties as JSON. ## Setup panel (6) Configure optional script-wide settings in the Setup panel. Configure basic settings, **Step Chart Options**, **Save Options**, **Knowledge Options**, **Error Messages**, **Messaging Framework**, and **Lightning Design System Tokens** in the UI, or edit properties as JSON. ## In-Product Help In the Build, Properties, and Setup panels, access In-Product Help to view contextual information and instruction about elements and properties without leaving your script. ![image](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/lwcosdesignerinproducthelp.png) (A) Access in-line information about properties with tooltips. (B) View detailed documentation about element functionality with slide-out help panels. ## Preview (7) (A) Preview your script in real-time with real data. ![image](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/lwcosdesignerpreviewmode.png) (B) Enter a record Id into the **Context Id** field and click refresh to preview your form with test data. (C) Preview how an Omniscript appears on different devices, such as mobile, desktop, and tablet, with the **Preview Device** feature. (D) With the **Theme** dropdown, see how your Omniscript looks with a Lightning or Newport theme. If a custom Newport style sheet is in the org, it overrides the out-of-the-box Newport style sheet. (E) Reload the Canvas to reset data, and update the Data JSON and Action Debugger. (F) The **Data JSON** provides an easy-to-read JSON format, which updates when you enter values in data fields on the Canvas. Also, copy the entire JSON with just one click. (G) The **Action Debugger** enables you to debug action requests and response data. Search for actions, copy specific nodes in one click, and clear the console logs. - **[LWC Omniscript Designer Changes and Enhancements (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_lwc_omniscript_designer_changes_and_enhancements.htm&release=264.0.0&type=5)** For the managed package runtime, beginning with the Vlocity Insurance and Health Spring '20, the Vlocity LWC Omniscript Designer includes new features and changes to existing features. - **[LWC Omniscript Designer Considerations (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_lwc_omniscript_designer_considerations.htm&release=264.0.0&type=5)** For the managed package runtime, the Vlocity LWC Omniscript Designer does not support all of the elements, functionality, and deployment options available in the Classic Omniscript Designer. - **[Create an LWC Omniscript in the LWC Omniscript Designer (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_create_an_lwc_omniscript_in_the_lwc_omniscript_designer.htm&release=264.0.0&type=5)** For the managed package runtime, create an LWC Omniscript to build a script in the LWC Omniscript Designer. - **[Set Up an Omniscript in the LWC Omniscript Designer (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_set_up_an_omniscript_in_the_lwc_omniscript_designer.htm&release=264.0.0&type=5)** For the managed package runtime, configure optional settings for your Omniscript in the Setup panel of the LWC Omniscript Designer, such as making your Omniscript reusable or enabling tracking. - **[Create the Script Structure (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_create_the_script_structure.htm&release=264.0.0&type=5)** For the managed package runtime, create the logic that executes when the script runs, by building a hierarchical structure of Actions and Steps. - **[Build an LWC Omniscript with Elements in the LWC Omniscript Designer (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_build_an_lwc_omniscript_with_elements_in_the_lwc_omniscript_designer.htm&release=264.0.0&type=5)** For the managed package runtime, drag elements and entire Omniscripts from the Build panel onto the canvas to build your scripts in the Omniscript Designer. - **[Configure Elements in the LWC Omniscript Designer (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_configure_elements_in_the_lwc_omniscript_designer.htm&release=264.0.0&type=5)** For the managed package runtime, configure elements for your Omniscript in the Properties panel of the designer when an element is selected, such as the name, label, and instructions for a step element. - **[Activate Elements in the LWC Omniscript Designer (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_activate_elements_in_the_lwc_omniscript_designer.htm&release=264.0.0&type=5)** For the managed package runtime, activate an inactive element by selecting the element in the Navigation Panel of the Omniscript Designer. - **[Preview an Omniscript in the LWC Omniscript Designer (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_preview_an_omniscript_in_the_lwc_omniscript_designer.htm&release=264.0.0&type=5)** For the managed package runtime, view the LWC Omniscript's appearance and functionality by previewing the Omniscript in the LWC Omniscript designer. - **[Test Data in the LWC Omniscript Designer (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_test_data_in_the_lwc_omniscript_designer.htm&release=264.0.0&type=5)** For the managed package runtime, test your Omniscript in the LWC Omniscript Designer by adding test data, viewing the data JSON, and debugging action requests and response data. - **[Upgrade an LWC Omniscript's Property Set (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_upgrade_an_lwc_omniscript_s_property_set.htm&release=264.0.0&type=5)** For the managed package runtime, when using an existing Omniscript in the LWC Omniscript Designer, create a new version of the Omniscript to update the Omniscript's property set.