---
schema_version: "1"
id: 43bf310724c83bb4319940096114fea77d4e5eab7ba01744cb95629297fcb967
title: Customize the Asset Viewer in Enterprise Sales Management (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/ind/264-0-0/comms_customize_the_asset_viewer_in_enterprise_sales_management.md
canonical_url: https://help.salesforce.com/s/articleView?id=ind.comms_customize_the_asset_viewer_in_enterprise_sales_management.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: d21919fef86b5cfbc9dd785c600a6f79f69b3f14279fae1982896f54e7e42909
description: Go through assets in the asset viewer in Enterprise Sales Management. To help your users easily find specific information, customize the asset viewer by extending the b2bAssetViewer components in Lightning web component.
products:
- Communications
release: "264"
---
# Customize the Asset Viewer in Enterprise Sales Management (Managed Package)
Go through assets in the asset viewer in Enterprise Sales Management. To help your users easily find specific information, customize the asset viewer by extending the b2bAssetViewer components in Lightning web component.
### Required Editions
 _This feature is part of the Communications Cloud managed package._
Available in: Lightning Experience
Available in: Enterprise, Unlimited, and Developer Editions
Required User Permissions
To customize the asset viewer:
Communications Cloud Admin
1. From the App Launcher, find and select **LWC Designer**.
2. To create a custom Lightning web component, click **+LWC**.
3. On the Extend tab, enter customB2bAssetViewer as the name of the Lightning web component.
4. Select **b2bAssetViewer** as the Lightning web component to be extended.
5. Select **Include XML Targets** and **Omniscript Support**.
6. Click **Create**.
7. Select **customB2bAssetViewer.html** as the file.
8. Copy the entire HTML code from b2bAssetViewer and paste it in the Editor.
9. In the html file, replace all Lightning web component tags containing “c-” with namespace of the org.
For example, replace with
10. Save your changes.
11. From the App Launcher, find and select **Accounts**.
12. Select any account with assets, and click the **Asset** tab.
13. Click , and select **Edit Page**.
14. From the left panel on the Asset tab, drag **customB2bAssetViewer** to the canvas.
15. Save and your changes, and activate the Lightning web component.
Certain features, such as Asset to Quote, require the configurations available in b2bEnterpriseAssetViewerWrapper.
16. To hide the OOTB b2bAssetViewer and show the customB2bAssetViewer on the user interface with the configurations from b2bEnterpriseAssetViewerWrapper, add this code to your custom styling file before you upload this file to your org.
```javascript
.b2b-enterprise-assetvieweraura-wrapper {
display: none
}
```
See [Customize the Style Element of your Enterprise Sales Management User Interface](https://help.salesforce.com/s/articleView?id=ind.comms_use_your_custom_static_resource_instead_of_the_default_esmclassic_static_resource.htm&language=en_US).
- **[Display Additional Fields in Asset Viewer Table](https://help.salesforce.com/s/articleView?id=ind.comms_customize_the_asset_viewer_in_enterprise_sales_management.htm&release=264.0.0&type=5)**
In Enterprise Sales Management, you can display additional fields in the asset viewer table to view additional information by using the b2bExpress/assetConfigData integration procedure.
- **[Add Custom Buttons to the Asset Viewer](https://help.salesforce.com/s/articleView?id=ind.comms_customize_the_asset_viewer_in_enterprise_sales_management.htm&release=264.0.0&type=5)**
In Enterprise Sales Management, you can add custom buttons preceding the asset viewer table to use custom actions by extending the b2bAssetViewer and b2b2Assets Lightning web component.
- **[Create Dynamic Search Feature in Asset Viewer](https://help.salesforce.com/s/articleView?id=ind.comms_customize_the_asset_viewer_in_enterprise_sales_management.htm&release=264.0.0&type=5)**
In asset viewer, use the dynamic search feature to define searchable fields in the metadata and add them to the view as search criteria dynamically. Extend the b2bAssetViewer and b2b2Assets Lightning web component to add a dropdown next to the search input box.
## Display Additional Fields in Asset Viewer Table
In Enterprise Sales Management, you can display additional fields in the asset viewer table to view additional information by using the b2bExpress/assetConfigData integration procedure.
1. From the App Launcher, find and select **Omnistudio Integration Procedures**.
2. Click **b2bExpress/assetConfigData** from the list.
3. Under Structure, select **Procedure Configuration**, and then click **Create Version**.
4. Select **responseData**, and then click **Edit as JSON**.
5. Add the additional fields required. You can use this sample JSON to add an Action field.
```javascript
{
"dataType": "Text",
"label": "Action",
"topic": [
"All"
],
"valueMap": "vlocity_cmt__Action__c"
}
```
6. Activate the integration procedure.
The additional field are displayed as columns in the asset viewer.
## Add Custom Buttons to the Asset Viewer
In Enterprise Sales Management, you can add custom buttons preceding the asset viewer table to use custom actions by extending the b2bAssetViewer and b2b2Assets Lightning web component.
1. Create a custom Lightning web component.
See [Customize the Asset Viewer in Enterprise Sales Management](https://help.salesforce.com/s/articleView?id=ind.comms_customize_the_asset_viewer_in_enterprise_sales_management.htm&release=264.0.0&type=5 "Go through assets in the asset viewer in Enterprise Sales Management. To help your users easily find specific information, customize the asset viewer by extending the b2bAssetViewer components in Lightning web component.").
2. To create another custom Lightning web component, click **+LWC**.
3. On the Extend tab, enter customB2bAssets as the name of the Lightning web component.
4. Select **b2bAssets** as the Lightning web component.
5. Select **Include HTML**, **Include XML Targets**, and **Omniscript Support**.
6. Click **Create**.
7. Select **customB2bAssets.html** as the file.
8. In the Editor, enter the entire HTML code from b2bAssets.
9. Replace all Lightning web component tags in the html file containing “c-” with namespace of the org.
For example, `` with ``.
10. In the HTML file, search for **lightning-button-group** tag and add buttons within this tag.
See [Customize Buttons, Actions, or Fields in the Enterprise Sales Management UI](https://help.salesforce.com/s/articleView?id=ind.comms_t_add_buttonsactionsor_fields_in_the_enterprise_sales_managementui_63691.htm&release=264.0.0&type=5 "Your Enterprise Sales Management implementation provides a number of buttons, actions, and fields to enable you to easily navigate the app or perform various actions. As you use and customize your implementation, you might want to use new buttons, actions, or fields, in addition to those that are provided by default.").
Note It's recommended to use Salesforce’s Lightning web component. See [Lightning Web Components](https://developer.salesforce.com/docs/component-library/bundle/lightning-button-group).
11. Save your changes.
12. Open customB2bAssetViewer.html file and replace b2bAssets Lightning web component tag with customB2bAssets.
For example, `` with ``.
13. Save your changes.
## Create Dynamic Search Feature in Asset Viewer
In asset viewer, use the dynamic search feature to define searchable fields in the metadata and add them to the view as search criteria dynamically. Extend the b2bAssetViewer and b2b2Assets Lightning web component to add a dropdown next to the search input box.
1. Create a custom Lightning web component.
See [Customize the Asset Viewer in Enterprise Sales Management](https://help.salesforce.com/s/articleView?id=ind.comms_customize_the_asset_viewer_in_enterprise_sales_management.htm&release=264.0.0&type=5 "Go through assets in the asset viewer in Enterprise Sales Management. To help your users easily find specific information, customize the asset viewer by extending the b2bAssetViewer components in Lightning web component.").
2. To create another custom Lightning web component, click **+LWC**.
3. On the Extend tab, enter customB2bAssets as the name of the Lightning web component..
4. Select **b2bAssets** as the Lightning web component.
5. Select **Include HTML**, **Include XML Targets**, and **Omniscript Support**.
6. Click **Create**.
7. Select **customB2bAssets.html** as the file.
8. In the Editor, enter the entire HTML code from b2bAssets.
9. Replace all Lightning web component tags in the html file containing “c-” with namespace of the org.
For example, `` with ``.
10. Select **customB2bAssets.js** as the file.
11. In the Editor, enter this code under the connectedCallback.
```javascript
this.dataColumns.forEach(item => {
if (item.searchable && item.columnDataType === "Text") {
this.searchByCustomOptions.push({
label: item.label,
value: item.valueMap
});
}
})
```
In the b2bAssets.js file, column details are stored in a dataColumns variable. This variable is used to assign column details to another variable, which serves as the source for the dynamic search feature dropdown. Here, searchByCustomOptions is a list and acts as a source for a dynamic search feature dropdown.
12. Select **customB2bAssets.html** as the file, and enter required HTML code to add a dropdown.
Note It's recommended to use Salesforce’s Lightning web component. See [Lightning Web Components](https://developer.salesforce.com/docs/component-library/bundle/lightning-combobox).
13. Save your changes.