---
schema_version: "1"
id: a851791cfbed800e85ef266fd675585ccc77dc7bc3bc9b4e938231b4deb55979
title: Extend the Edit Block LWC (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_the_edit_block_lwc.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_extend_the_edit_block_lwc.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: fb4a41e850e01d8a9206aa70d00fb6eedd1706b0fd18bacd31bfe6972574b854
description: For the managed package runtime, customize an LWC Omniscript’s Edit Block by extending the Edit Block LWC.
products:
  - Omnistudio
release: "264"
---
# Extend the Edit Block LWC (Managed Package)

For the managed package runtime, customize an LWC Omniscript’s Edit Block by extending the Edit Block LWC.

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

Before you begin, ensure you understand the requirements for extending an Omniscript element's Lightning web component. See [Extend an Omniscript Element's Lightning Web Component (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_extend_an_omniscript_element_s_lightning_web_component.htm&release=264.0.0&type=5 "For the managed package runtime, add custom behavior and styling to an Omniscript element while maintaining its core functionality. Replace an Omniscript element’s Lightning web component with a component that re-creates its properties and adds new ones.").

The Edit Block LWC overrides the entire Edit Block LWC unless the Edit Mode is Cards or Long Cards. Cards and Long Cards include additional extendable LWCs.

1. In VisualStudio, create a custom LWC or download a custom Edit Block LWC example by clicking [here](https://volt.my.salesforce.com/sfc/p/o0000000IKm8/a/3m0000005uis/PKCwB23OEIlVSZkH7bnn37KQUF8lAnrc811FD_GSqUc). The code in the custom LWC example changes the background of the Edit Block card to green.
    
    <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
            <colgroup>
              <col>
              <col>
            </colgroup>
            <thead class="slds-text-title_caps ">
              <tr class="">
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d205835e77">
                  <p style="margin-bottom:0;">Original Edit Block Card</p>
                </th>
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d205835e83">
                  <p style="margin-bottom:0;">Custom Edit Block Card Example</p>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr class="">
                <td data-label="Original Edit Block Card" class="slds-cell-wrap" style="vertical-align:top;" headers="d205835e77 ">
                  <div><img src="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/owc_edit_block_card_og.png" alt="image"></div>
                </td>

                <td data-label="Custom Edit Block Card Example" class="slds-cell-wrap" style="vertical-align:top;" headers="d205835e83 ">
                  <div><img src="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/edit_block_card_lwc.png" alt="image"></div>
                </td>

              </tr>
            </tbody>
          </table>
2. In the LWC's JavaScript file, extend the Edit Block LWC. Using this code example, replace the NS with the namespace of the package.
    
    Example:
    
    ```
    import omniscriptEditBlock from "VLOCITYNAMESPACE/omniscriptEditBlock";
        import template from "./editblockCardCustomize.html"
        export default class editblockCardCustomize extends omniscriptEditBlock{
            // your properties and methods here
            
            render()
            {
                if (this.jsonDef) {
                    this._hasChildren = this.jsonDef.children.length > 0;
                    this._isFirstIndex = this.jsonDef.index === 0;
    
                    if (this._isCards && this._isFirstIndex) {
                        // hides the first short card with no children
                        if (!this._hasChildren) {
                            this.classList.add(this._theme + '-hide');
                        } else {
                            this.classList.remove(this._theme + '-hide');
                        }
                    }
                }
                return template;
            }
        }
    ```
3. Add code to the custom LWC.
4. Deploy the custom LWC to Salesforce. See [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.").
5. Go to the Omniscript that contains the Edit Block LWC.
6. In the Edit Block’s LWC Component Override field, enter the name of the custom LWC.
7. Activate the Omniscript and preview your changes.