---
schema_version: "1"
id: 16d149aca35090f7a15cd4b58e675a46bd7e54e0093bfd3d9cc64ad2055acd8c
title: Vlocity Lightning Web Components (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_vlocity_lightning_web_components.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_vlocity_lightning_web_components.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: b0110b32bd331b2d249d8905f808ea2df7d7aa57548c347550fcfbd9bc02f837
description: For the managed package runtime, take advantage of Vlocity's declarative 'clicks not code' approach to building and modifying your applications with the Vlocity Lightning Web Components. With Vlocity Lightning Web Components, use standard JavaScript and HTML to modify and extend Vlocity products.
products:
  - Omnistudio
release: "264"
---
# Vlocity Lightning Web Components (Managed Package)

For the managed package runtime, take advantage of Vlocity's declarative 'clicks not code' approach to building and modifying your applications with the Vlocity Lightning Web Components. With Vlocity Lightning Web Components, use standard JavaScript and HTML to modify and extend Vlocity products.

![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).

Vlocity Lightning Web Components are:

- Fast and Lightweight. Runs natively in browsers and is independent from JavaScript frameworks.
- Reusable.Vlocity Lightning Web Components use [web components](https://www.webcomponents.org/introduction) to create reusable custom HTML elements. Custom elements wrap functionality, protecting components from other styles and scripts on the page.

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d277126e74">
              <p style="margin-bottom:0;">Required Versions</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Required Versions" class="slds-cell-wrap" style="vertical-align:top;" headers="d277126e74 ">
              <p style="margin-bottom:0;">Available beginning with Vlocity Insurance and Health Summer '19 and
                Vlocity CME Fall '19.</p>
            </td>

          </tr>
        </tbody>
      </table>

While some Vlocity Lightning web components appear in the Community and App Builders, they differ from the Vlocity Lightning Components that also appear in the builders. Vlocity Lightning Web Components follow the same standards as Salesforce's Lightning Web Components. For more information on Lightning Web Component standards, see [Lightning Web Components](https://developer.salesforce.com/docs/component-library/documentation/lwc).

## Vlocity Lightning Web Components Reference

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d277126e123">
              <p style="margin-bottom:0;">Component Type</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d277126e129">
              <p style="margin-bottom:0;">Description</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d277126e135">
              <p style="margin-bottom:0;">References</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Component Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d277126e123 ">
              <p style="margin-bottom:0;">Base</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d277126e129 ">
              <p style="margin-bottom:0;">Basic components used by the entire Vlocity platform. Extend or modify
                base components to customize appearance and behavior.</p>
            </td>

            <td data-label="References" class="slds-cell-wrap" style="vertical-align:top;" headers="d277126e135 ">
              <p style="margin-bottom:0;">ReadMes: <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_vlocity_lwc_readme_reference.htm&amp;release=264.0.0&amp;type=5" title="For the managed package runtime, view examples, and learn about available attributes, methods, and other functions from the ReadMes of each Base Vlocity Lightning web component.">Base Vlocity LWC ReadMe Reference</a>
              </p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Component Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d277126e123 ">
              <p style="margin-bottom:0;">Cards (Classic)</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d277126e129 ">
              <p style="margin-bottom:0;">Components specific to Vlocity Cards built in the Vlocity Card Designer
                when LWC is enabled.</p>
            </td>

            <td data-label="References" class="slds-cell-wrap" style="vertical-align:top;" headers="d277126e135 ">
              <ul>
                <li>
                  <p>
                    <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_lwc_cards.htm&amp;release=264.0.0&amp;type=5" title="For the managed package runtime, beginning with the Vlocity Insurance and Health Summer '19 and Vlocity Communications, Media, and Energy Fall '19 releases, Vlocity supports the Salesforce Lightning Web Component programming model.">Lightning Web Component Cards</a>
                  </p>
                </li>

                <li>
                  <p>ReadMes: <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_vlocity_cards_lwc_readme_reference.htm&amp;release=264.0.0&amp;type=5" title="For the managed package runtime, this page lists the Lightning web component ReadMes available for LWC Cards. For details about the layout for each card and card layout component, see Base LWC Card and Layout Templates.">Vlocity Cards LWC ReadMe Reference</a>
                  </p>
                </li>

              </ul>
            </td>

          </tr>
          <tr class="">
            <td data-label="Component Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d277126e123 ">
              <p style="margin-bottom:0;">Digital Commerce Lightning Web Components</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d277126e129 ">
              <p style="margin-bottom:0;">Components specific to Vlocity Communications, Media, and Energy.</p>
            </td>

            <td data-label="References" class="slds-cell-wrap" style="vertical-align:top;" headers="d277126e135 ">
              <p style="margin-bottom:0;">Digital Commerce Lightning Web Components </p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Component Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d277126e123 ">
              <p style="margin-bottom:0;">Omniscript</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d277126e129 ">
              <p style="margin-bottom:0;">Components specific to Omniscript.</p>
            </td>

            <td data-label="References" class="slds-cell-wrap" style="vertical-align:top;" headers="d277126e135 ">
              <p style="margin-bottom:0;">ReadMes: <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_omniscript_readme_reference.htm&amp;release=264.0.0&amp;type=5" title="For the managed package runtime, this page lists the Lightning web components ReadMes available for Omniscripts. Extend Lightning web components to add custom behavior and styling.">Omniscript ReadMe Reference</a>
              </p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Component Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d277126e123 ">
              <p style="margin-bottom:0;">Insurance</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d277126e129 ">
              <p style="margin-bottom:0;">Components specific to Health and Insurance products.</p>
            </td>

            <td data-label="References" class="slds-cell-wrap" style="vertical-align:top;" headers="d277126e135 ">
              <p style="margin-bottom:0;">Insurance Lightning Web Component UI Development Kit </p>
            </td>

          </tr>
        </tbody>
      </table>

Omnistudio Flexcards are built with the Lightning Web Components programming model and share base components. Flexcards are created in the Flexcard Designer.

- **[Set Up Lightning Web Components (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_set_up_lightning_web_components.htm&release=264.0.0&type=5)**  
    For the managed package runtime, to manage and develop Omnistudio Lightning web components, use Visual Studio Code with Salesforce DX or IDX Workbench. Both development approaches have source control. Salesforce DX integrates with Visual Studio Code. IDX Workbench lets you deploy components from one sandbox or dev org to another, such as a production org, and compare source and target files.
- **[Extend Vlocity Lightning Web Components (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_extend_vlocity_lightning_web_components.htm&release=264.0.0&type=5)**  
    For the managed package runtime, customize the behavior and styling of an application by extending Vlocity Lightning web components. For example, override properties, add other components, or insert HTML.
- **[Deploy Lightning Web Components (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_deploy_lightning_web_components.htm&release=264.0.0&type=5)**  
    For the managed package runtime, deploy new Lightning web components or change existing components from your local development environment with Visual Studio and Salesforce DX or IDX Workbench.
- **[Launch Lightning Web Component URLs with vlocityLWCWrapper (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_launch_lightning_web_component_urls_with_vlocitylwcwrapper.htm&release=264.0.0&type=5)**  
    For the managed package runtime, add the vlocityLWCWrapper to make Lightning web components in a Lightning page URL addressable. Lightning web components are not URL addressable by default. The vlocityLWCWrapper wraps the Lightning web component in a URL addressable aura component.
- **[Access Actions in a Lightning Page with the Power Launcher Component (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_access_actions_in_a_lightning_page_with_the_power_launcher_component.htm&release=264.0.0&type=5)**  
    For the managed package runtime, access all the available Actions in a Lightning Page using the Power Launcher component's typeahead functionality. Enable Lightning Record Pages and Lightning App Pages to use the Power Launcher component by adding the Power Launcher Lightning Web Component to a Lightning Page.
- **[Base Vlocity LWC ReadMe Reference (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_base_vlocity_lwc_readme_reference.htm&release=264.0.0&type=5)**  
    For the managed package runtime, view examples, and learn about available attributes, methods, and other functions from the ReadMes of each Base Vlocity Lightning web component.