---
schema_version: "1"
id: a5e07122d8c0fe804cd281673601de73bd0613c8c1922c9aa199e13380d026c1
title: Extend Omnistudio Lightning Web Components
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_extend_omnistudio_lightning_web_components_58224.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_extend_omnistudio_lightning_web_components_58224.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: a850fcbbd8dc3ee508ee5d770c3186199a7c4932f8c4c51497b7fdd88ff2133b
description: Customize the behavior and styling of an application by extending Omnistudio Lightning web components. For example, override properties, add other components, or insert HTML.
products:
  - Omnistudio
release: "264"
---
# Extend Omnistudio Lightning Web Components

Customize the behavior and styling of an application by extending Omnistudio Lightning web components. For example, override properties, add other components, or insert HTML.

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio-264-0-0-production-enus/f526eaa8-ae05-487a-8944-4bb99b0b78ac/images/icon_note.png)

Note If you turn off Managed Package Runtime in Setup and use the standard runtime, we recommend that you don't extend Lightning web components such as Block or TypeAhead. Changing these components can cause incompatibilities between Omnistudio and Omnistudio for Managed Packages.

In this code example, a custom Lightning web component extends the Button Lightning Web Component. Replace the namespace variable in the code example with the namespace of the Omnistudio package you’re using. For Omnistudio in standard runtime, the namespace is `omnistudio`.

//.js

```
import Button from "namespace/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>namespace</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-264-0-0-production-enus/f526eaa8-ae05-487a-8944-4bb99b0b78ac/images/icon_note.png)

Note

Custom Lightning web components built outside of the package can’t 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-264-0-0-production-enus/f526eaa8-ae05-487a-8944-4bb99b0b78ac/images/icon_note.png)

Note

Custom Lightning web components don’t 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. For information on setting up IDX Workbench or Salesforce DX, see [Set Up Lightning Web Components](https://help.salesforce.com/s/articleView?id=xcloud.os_set_up_lightning_web_components_58209.htm&release=264.0.0&type=5 "To manage and develop Omnistudio Lightning web components, use Visual Studio Code with Salesforce DX and the SF CLI. Use to deploy components from one sandbox or dev org to another, such as a production org.").
2. Choose which component you want to extend. For a list of Lightning web components, see [Omnistudio Lightning Web Components](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_lightning_web_components_58153.htm&release=264.0.0&type=5 "Take advantage of Omnistudio's declarative 'clicks not code' approach to building and modifying your applications with the Omnistudio Lightning Web Components. With Omnistudio Lightning Web Components, use standard JavaScript and HTML to modify and extend Vlocity products.").
3. To create a 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 Omnistudio 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 Omnistudio package using the **runtimeNamespace** metadata tag. See the code example on this page. For more information on finding the namespace of your package, see [View the Namespace and Version of Managed Packages](https://help.salesforce.com/s/articleView?id=xcloud.os_viewing_the_namespace_and_version_of_the_omnistudio_vlocity_package_8315.htm&release=264.0.0&type=5 "Omnistudio can be installed as a managed package. The package might be for a Cloud product (such as Insurance or Communications) or Omnistudio Foundation. You can check the namespace and version of your managed package, which you might need for planning upgrades or troubleshooting.").
        
        ![Important](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio-264-0-0-production-enus/f526eaa8-ae05-487a-8944-4bb99b0b78ac/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. Enable a custom Lightning web component to make remote calls by using the Common Action utility. See [Make Remote Calls Within Omniscripts from Lightning Web Components](https://help.salesforce.com/s/articleView?id=xcloud.os_make_remote_calls_from_lightning_web_components_using_the_omniscript_action_framework_18348.htm&release=264.0.0&type=5 "In the standard runtime, make remote calls from a customized Omniscript component or a custom Lightning web component.").