Add Topics to Location and Subscriber Tables in Enterprise Sales Management

You are here:

Add Topics to Location and Subscriber Tables in Enterprise Sales Management

To help your users easily find specific information, add and configure additional topics for the location and subscriber tables by extending the b2bSampleApp and b2bDataTableWrapper components in Lightning web component.

Required Editions

Available in: Lightning Experience

Available in: Enterprise, Unlimited, and Developer Editions

Required User Permissions
To add topics to location and subscriber tables:	Communications Cloud Admin

From the App Launcher, find and select LWC Designer.
To create a custom Lightning web component, click +LWC.
On the Extend tab, enter customB2bDataTableWrapper as the name of the Lightning web component.
Select b2bDataTableWrapper as the Lightning web component to be extended.
Select Include XML Targets and Omniscript Support.
Click Create.
Select customB2bDataTableWrapper.js as the file.

In the editor, enter the JavaScript code. Use ‌this sample code.

import B2bDataTableWrapper from "vlocity_cmt/b2bDataTableWrapper";
import { getAPIConfigDetails } from "vlocity_cmt/b2bNavigationUtil";


export default class customB2bDataTableWrapper extends B2bDataTableWrapper {
columnMap = getAPIConfigDetails('b2bColumnMap');

connectedCallback() {
console.log("Custom Datatable wrapper");
super.connectedCallback();

}

setColumns(headers) {
console.log(this.columnMap);
const mappedColumns = this.columnMap[this.memberType] ?? {};

super.setColumns(headers);
this.tableColumns = this.tableColumns.map(columns => {
return {...columns, colGroups: mappedColumns[columns.fieldName] ?? []}
})
}
}

The columnMap = getAPIConfigDetails('b2bColumnMap') is a utility method to fetch the configurations of a topic. See Configure the columns for topics.

Save your changes.
Select customB2bDataTableWrapper.js-meta.xml as the file.
In the Editor, add this line: <runtimeNamespace>vlocity_cmt</runtimeNamespace>.
Save your changes.
To create the customB2bSampleApp Lightning web component, click +LWC.
On the Extend tab, enter customB2bSampleApp as the name of the Lightning web component.
Select b2bSampleApp as the Lightning web component to be extended.
Select Include HTML, Include XML Targets, and Omniscript Support.
Click Create.
Select customB2bSampleApp.html as the file.
In the Editor, enter the entire HTML code from b2bSampleApp.
Replace <vlocity_cmt-b2b-data-table-wrapper></vlocity_cmt-b2b-data-table-wrapper> with <c-custom-b2b-data-table-wrapper></c-custom-b2b-data-table-wrapper>.
Save your changes.
Select customB2bSampleApp.js as the file.

In the Editor, enter the JavaScript code. Use ‌this sample code.

import B2BSampleApp from "vlocity_cmt/b2bSampleApp";
import customb2bSampleAppTemplate from "./customB2bSampleApp.html";


export default class customB2bSampleApp extends B2BSampleApp {
render(){
return customb2bSampleAppTemplate
}

connectedCallback() {
console.log("Custom Sample App Loading");
super.connectedCallback();
}
}

Save your changes.
Select customB2bSampleApp.js-meta.xml as the file.
In the Editor, add this line: <runtimeNamespace>vlocity_cmt</runtimeNamespace>.
Save your changes.

Deploy the custom Lightning web component to Enterprise Sales Management. See Customize Buttons, Actions, or Fields in ‌Enterprise Sales Management.

Configure the Columns for Topics
Use the Vlocity Card to configure the columns for different topics.
Set a Default Topic in the View By Picklist for Products or Members
Configure the View By picklist in Enterprise Sales Management to add custom options and set a default view for the product summary or member (Location or Subscriber) tables.
(Optional) Add a Custom View Topic to Existing Fields
You can associate existing fields with new or additional view topics directly within the field definition.
Configure Mandatory Field Indicators for Quote Member Tables
Mark essential fields in the Location or Subscriber tables as mandatory. An asterisk (*) appears next to the column header during inline record creation, indicating the field requires a value.
Configure Column Header Tooltips
Add informative tooltips to column headers in quote member or quote summary tables. A help text icon appears on configured headers; hovering reveals the tooltip information.
Configure and Use Hyperlink Fields
Add columns to the Location or Subscriber tables that display clickable URLs, allowing users to navigate directly to relevant pages.

Configure the Columns for Topics

Use the Vlocity Card to configure the columns for different topics.

From the App Launcher, find and select Vlocity Cards.
Open the active version of b2bSampleAppCard.
Deactivate b2bSampleAppCard.
In the Layout Session Variables, click Add Session Variables.
Enter b2bColumnMap as name.

In the Values, enter JSON code. Use this sample JSON code:

{"Location":{"vlocity_cmt__PremisesId__c":["Primary"],"vlocity_cmt__City__c":
["Primary"],"vlocity_cmt__ServiceAccountId__c":["Services"],"vlocity_cmt__ServicePointId__c":
["Services"],"vlocity_cmt__State__c":["Secondary"],"vlocity_cmt__Country__c":["Secondary"]},"Subscriber":
{"vlocity_cmt__Title__c":["Primary"],"vlocity_cmt__FirstName__c":["Primary"],"vlocity_cmt__MSISDN__c":
["Others"],"vlocity_cmt__LastName__c":["Primary"],"vlocity_cmt__State__c":
["Secondary"],"vlocity_cmt__Email__c":["Secondary"]}}

Note This JSON includes separate nodes for location and subscriber. Under the location and subscriber node, the field name of the column (Quote Member) is the key, and the value is a list of topics.

Save your changes.
Activate b2bSampleAppCard.

Set a Default Topic in the View By Picklist for Products or Members

Configure the View By picklist in Enterprise Sales Management to add custom options and set a default view for the product summary or member (Location or Subscriber) tables.

To do this, define the new view option and specify it as the default within the relevant integration procedure.

Configure and set a default custom view for the product table:
1. From Setup, in the Quick Find box, enter Integration Procedures, and then select Integration Procedures.
2. Open the active version of the integration procedure that controls the view you want to modify:
  - ESM_CustomViewSetup (for quote views)
  - ESM_CustomViewSetupForOrder (for order views)
3. Go to the CustomViewsFieldMapper step.
4. Within its elementValueMap node, define your new custom view option and the field details it displays. Use this structure:
```
"elementValueMap": {
        //... existing options
        "Your New Option Label": { // Descriptive label for your new view
        "your_field_api_name__c": { // API name of the primary field for this view
        "isEditable": true, // Or false as needed
        "isSearchable": false, // Or true as needed
        "isVisible": true,
        "label": "Your Field Label", // Label for the column header
        "type": "Text" // Or appropriate field type (Number, Date, etc.)
        }
        // Add more field definitions if this view shows multiple columns
        }
        // ... more existing options ...
        }
```
5. Navigate to the CustomViewsFieldMapperDefaultTopic step. Within its elementValueMap node, specify your new option label as the default. Set the Product key's value to your new option label. Example setting the default for Products:
  Example setting default for Products:
```
"elementValueMap": {
        "MemberDefaultTopic": {
        "Product": "Your New Option Label" // Set default product view
        }
        }
```
6. Save and activate the integration procedure.
Select a default option for Locations and Subscribers:
1. In the same integration procedure as above (ESM_CustomViewSetup or ESM_CustomViewSetupForOrder), go to the CustomQMFieldMapper step.
2. Find the MemberDefaultTopic node and set the Location or Subscriber key's value to the desired topic label:
```
"MemberDefaultTopic": {
        "Subscriber": "All",
        "Location": "Another Topic" // this will be the default topic for the location table.
        },
```
3. Save and activate the integration procedure.
Your custom view is now available in the View By picklist and set as the default for the specified context (Products, Locations, or Subscribers).

(Optional) Add a Custom View Topic to Existing Fields

You can associate existing fields with new or additional view topics directly within the field definition.

In the integration procedure (ESM_CustomViewSetup or ESM_CustomViewSetupForOrder), navigate to the step defining the field mappings (for example, CustomQMFieldMapper).
Locate the JSON definition for the field you want to associate with a new topic.

Add your new topic label to the topic array for that field definition.

Example adding "Another Topic" to the Street Address field:

{
      "label": "Street Address",
      "name": "vlocity_cmt_StreetAddress_c",
      "topic": [
      "Serviceability",
      "Address Validation",
      "Another Topic" // Newly added topic association
      ],
      },

To make this topic the default view for Locations or Subscribers when this field is primary, set the appropriate key within the MemberDefaultTopic node as described in the previous procedure.
Save and activate the integration procedure.

Configure Mandatory Field Indicators for Quote Member Tables

Mark essential fields in the Location or Subscriber tables as mandatory. An asterisk (*) appears next to the column header during inline record creation, indicating the field requires a value.

To mark a field as mandatory:

From Setup, in the Quick Find box, enter Object Manager, and then select Object Manager.
Click Quote Member.
Click Fields & Relationships.
Click the field label of the field you want to make mandatory.
Click Edit.
Under General Options (or a similar section), select the Required checkbox.
Save your changes.

The field now appears with a mandatory indicator when users add Location or Subscriber records inline.

Configure Column Header Tooltips

Add informative tooltips to column headers in quote member or quote summary tables. A help text icon appears on configured headers; hovering reveals the tooltip information.

To add a tooltip to a column header:

From Setup, in the Quick Find box, enter Integration Procedures, and then select Integration Procedures.
Open the active version of the integration procedure that controls the table view:
- ESM_CustomViewSetup (for quote tables)
- ESM_CustomViewSetupForOrder (for order tables)
Navigate to the step defining the table columns (for example, a step named ReadOnlyFields or similar containing the column map).
Locate the JSON object defining the target column.

Add an info key to the column's JSON object. Set its value to the desired tooltip text.

Example for the Quantity field:

"Quantity":{
      "align": "center",
      "isEditable": false,
      "isSearchable": false,
      "isVisible": true,
      "label": "Quantity",
      "type": "Number",
      "info": "This column holds the quantity of the Product in the quote/order" // Tooltip text
      }

Save and activate the integration procedure.

Users can now hover over the help icon on the configured column header to view the tooltip.

Configure and Use Hyperlink Fields

Add columns to the Location or Subscriber tables that display clickable URLs, allowing users to navigate directly to relevant pages.

Step 1: Create the Custom URL Field
1. From Setup, in the Quick Find box, enter Object Manager, and then select Object Manager.
2. Click Quote Member.
3. Click Fields & Relationships, then click New.
4. Select URL as the Data Type and click Next.
5. Enter the field details (Field Label, Field Name) and click Next.
6. Configure field-level security as needed and click Next.
7. Choose the page layouts to add the field to and click Save.
Step 2: Add the Field to the Integration Procedure
1. From Setup, in the Quick Find box, enter Integration Procedures, and then select Integration Procedures.
2. Open the active version of the integration procedure controlling the table view:
  - ESM_CustomViewSetup (for quote tables)
  - ESM_CustomViewSetupForOrder (for order tables)
3. Locate the step where table columns are defined (for example, a step containing the column map).
4. Add a new JSON object for the custom URL field created in Step 1. Ensure the type key is set to hyperlink.
  Example:
```
{
        "label": "Custom Link", // Use your field label from Step 1
        "name": "Your_Custom_URL_Field_API_Name__c", // Use your field API name from Step 1
        "topic": ["All"], // Optional: Assign to relevant topics
        "type": "hyperlink", // Must be hyperlink
        "visible": true, // Set visibility as needed
        "editable": true // Set editability as needed
        }
```
5. Save and activate the integration procedure.
Step 3: Add Data to Hyperlink Fields
Users can populate the hyperlink field via inline editing or CSV upload.
1. Use Inline Addition:
  (Steps follow)
2. In the Location or Subscriber table within a quote or order, click +Add Location (or +Add Subscriber).
3. When adding the new record details, enter the full URL (including the protocol, for example,, https://, is recommended) into your custom hyperlink field.
4. Save your changes.
  Note You cannot edit the URL by clicking the link itself in the table. If an incorrect URL is entered inline, you must delete the member record and add it again with the correct URL.
  
  The field displays the URL as a clickable link.
5. Use CSV Upload:
  (Admin Setup steps follow)
6. Ensure the custom URL field is included in the relevant field set for uploads.
7. From Setup, go to the Object Manager.
8. Click Quote Member, and then click Field Sets.
9. Click Edit next to the field set used for uploads (for example, Member Upload Location).
10. Drag your custom URL field into the 'In the Field Set' section.
11. Save your changes.
12. Perform the User Action for CSV Upload:
  (Steps follow)
13. Prepare your CSV file, including a column containing the full URLs for your custom field.
14. Navigate to the quote and the relevant member table (Location or Subscriber).
15. Click Upload File.
16. Choose your prepared CSV file.
17. In the field mapping step, map the CSV column containing the URLs to your custom URL field.
18. Click Next, review the mapping, and click Submit (or the equivalent final action).
19. Records imported via CSV will display the URLs as clickable links in your custom field.

Did this article solve your issue?

Let us know so we can improve!

Add Topics to Location and Subscriber Tables in Enterprise Sales Management

Required Editions

Configure the Columns for Topics

Set a Default Topic in the View By Picklist for Products or Members

(Optional) Add a Custom View Topic to Existing Fields

Configure Mandatory Field Indicators for Quote Member Tables

Configure Column Header Tooltips

Configure and Use Hyperlink Fields

General Information

Required Cookies

Functional Cookies

Advertising Cookies

General Information

Required Cookies

Functional Cookies

Advertising Cookies

Cookie List

Product Area

Feature Impact

Edition

Experience

Add Topics to Location and Subscriber Tables in Enterprise Sales Management

Required Editions

Configure the Columns for Topics

Set a Default Topic in the View By Picklist for Products or Members

(Optional) Add a Custom View Topic to Existing Fields

Configure Mandatory Field Indicators for Quote Member Tables

Configure Column Header Tooltips

Configure and Use Hyperlink Fields