Loading
Salesforce now sends email only from verified domains. Read More
Communications Cloud
Table of Contents
Filter by (0)Add
Select Filters

          No results
          No results
          Here are some search tips

          Check the spelling of your keywords.
          Use more general search terms.
          Select fewer filters to broaden your search.

            Search all of Salesforce Help
            Search all of Salesforce Help
            Customize the Asset Viewer in Enterprise Sales Management (Managed Package)

            You are here:

            1. Salesforce Help
            2. Docs
            3. Communications Cloud

            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

            Managed Package Icon 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 <c-b2b-assets></c-b2b-assets> with <vlocity_cmt-b2b-assets></vlocity_cmt-b2b-assets>
            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 Gear icon, 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. 
              .b2b-enterprise-assetvieweraura-wrapper {
      display: none
      }

              See Customize the Style Element of your Enterprise Sales Management User Interface.

            • 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.
            • 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.
            • 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.

            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. 
              {
"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.
            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, <c-b2b-assets></c-b2b-assets> with <vlocity_cmt-b2b-assets></vlocity_cmt-b2b-assets>.
            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.
              Note
              Note It's recommended to use Salesforce’s Lightning web component. See Lightning Web Components.
            11. Save your changes.
            12. Open customB2bAssetViewer.html file and replace b2bAssets Lightning web component tag with customB2bAssets.
              For example, <c-b2b-assets></c-b2b-assets> with <c-custom-b2b-assets></c-custom-b2b-assets>.
            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.
            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, <c-b2b-assets></c-b2b-assets> with <vlocity_cmt-b2b-assets></vlocity_cmt-b2b-assets>.
            10. Select customB2bAssets.js as the file.
            11. In the Editor, enter this code under the connectedCallback. 
              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
              Note It's recommended to use Salesforce’s Lightning web component. See Lightning Web Components.
            13. Save your changes.
             
            Loading
            Salesforce Help | Article