---
schema_version: "1"
id: bd2d8525cad72010578b92f8c628c07564c82b07ff8b691a1b78199f7c611214
title: Extend 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_extend_vlocity_lightning_web_components.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_extend_vlocity_lightning_web_components.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 0d2b08c1576282a446b08d9cdb69b63aeeed4f23edde7b5d21027ddca18cfe8d
description: 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.
products:
  - Omnistudio
release: "264"
---
# Extend Vlocity Lightning Web Components (Managed Package)

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.

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

<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="d158615e49">
              <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="d158615e49 ">
              <p style="margin-bottom:0;">Available beginning with Vlocity Insurance and Health Summer '19 and
                Vlocity CME Fall '19.</p>
            </td>

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

![example](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)

example

In this code example, a custom Lightning web component extends the Button Lightning Web Component. Replace the **NS** variable in the code example with the namespace of the Vlocity package you are using.

//.js

```
import Button from "NS/button";

export default class buttonExtended extends Button {  
//override the property here so it gets triggered

    onclickbutton() {    
    this.label = "Button clicked";  

}}
```

//.js-meta.xml

```
<?xml version="1.0" encoding="UTF-8"?><LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>45.0</apiVersion>    
    <isExposed>true</isExposed>    
    <masterLabel>button_extended</masterLabel>    
    <description>Button extended</description>    
    <targets>      
        <target>lightning__RecordPage</target>      
        <target>lightning__AppPage</target>      
        <target>lightning__HomePage</target>  
    </targets>
    <runtimeNamespace>NS</runtimeNamespace>
</LightningComponentBundle>
```

//.html

```
<template>
//add HTML here to override the template layout
</template>
```

//\_slds.css

```
//add CSS to override or append the SLDS theme css
.slds-button {
    background: #cccccc;
    border-color: #dddddd;
}
```

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

Custom Lightning web components built outside of the package cannot use any Salesforce Lightning web component that uses Salesforce resources or affects the component at run time. For more information, see [Salesforce Modules](https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.reference_salesforce_modules).

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

Custom Lightning web components will not throw errors unless Debug Mode is enabled. For more information, see [Debug Lightning Web Components](https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.debug_intro).

1. Ensure you have IDX Workbench, or Salesforce DX set up locally.
2. Choose which component you want to extend.
3. To create a new Lightning web component, navigate to your **lwc** folder in your project and run the `lightning generate component` Salesforce CLI command. For example:
    
    ```
    sf lightning generate component --type lwc --name componentname_extended
    ```
    
    To learn more about creating a Lightning web component, see [Create Lightning Web Components](https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.create_components_introduction). For a complete list of available Salesforce CLI commands, see [Lightning Commands](https://developer.salesforce.com/docs/atlas.en-us.sfdx_cli_reference.meta/sfdx_cli_reference/cli_reference_lightning_commands_unified.htm).
4. In your JavaScript file, import and extend the Lightning web component. See code example on this page.
5. To make the custom Lightning web component compatible with Vlocity Lightning web components, you must set two metadata tags in your XML configuration file:
    
    If [Lightning Web Security (LWS)](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.security_lwsec_intro) is disabled, add the namespace of your Vlocity package using the **runtimeNamespace** metadata tag.
    
    ![Important](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_important.png)
    
    Important If LWS is enabled, setting **runtimeNamespace** in your components causes errors similar to "Cannot use runtime namespace 'somename' in module c-someComponentName". To determine if LWS is enabled in your org, see [Enable Lightning Web Security in an Org](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.security_lwsec_enable).
    
    Set the **isExposed** metadata tag to true. See code example on this page.
6. (Optional) Beginning with Vlocity Insurance and Health Winter ’20 and Vlocity CME Winter ’20, enable a custom Lightning web component to make remote calls by using the Common Action utility.