Display and Submit Case Comments

Learning Objectives

After completing this unit, you’ll be able to: 

• Configure a Datatable element in a Flexcard.
  
• Link the callback logic from a Flexcard back into an Omniscript.
  

Get Started on Case Comments

Vijay is finally ready to take on the second page of the Case Management Omniscript, where users view and create case comments. He reviews the requirements for this step.

As a customer service rep, when I select a case, I want to move to a second page where I can:

• View existing case comments in tabular format.
  
• Submit new comments that appear immediately in the table of existing comments.
  

Vijay already added a second step called Manage Case Comments to the Case Management Omniscript. Next, he needs to complete these tasks.

1. Use the Omniscript designer to:
   

1. Add a Text Area component for case comments.
   
2. Add a Data Mapper Post Action, and display it as a button.
   
3. Link the Post Action to a Data Mapper Load that saves case comments.
   

2. Use the Flexcard designer to create a Flexcard with a Datatable element.
   
3. Create a custom Lightning web component that contains the Datatable Flexcard.
   
4. Link the custom Lightning web component to the Case Management Omniscript.
   

Follow along as he completes the project.

Manage Case Comments Step Configuration

Let’s review the structure of the Manage Case Comments step.

The Manage Case Comments step contains these components.

• A Text Area input element to enter a case comment (1)
  
• A Data Mapper Post Action to submit and save the comment (2)
  
• A Custom LWC (3) element to link the custom Lightning web component to the Omniscript
  

First, configure the Text Area properties.

1. Enter CaseComments in the Name field (1).
   
2. Specify Enter Case Comment as the Field Label (2).
   
3. Enter Enter Case Comment… as the Placeholder (3). This is the text the users see by default to prompt them to enter a comment.
   

Next, configure the Data Mapper Post Action properties. 

1. Enter CreateCaseComment as the Name.
   
2. Enter Submit as the Field Label.
   
3. Select sampleCreateComment in the Data Mapper Interface field. This is the Data Mapper Load that saves case comment data.
   

In the Data Mapper Post Action properties, expand the Messaging Framework section. 

1. Select Pub/Sub (1) to enable the Omniscript and a custom Lightning web component to communicate.
   
2. Set up a key-value pair for the message as follows. Enter caseCommentCreated for the Key (2) and %DRId_CaseComment% for the Value (3).
   

Vijay opens the Flexcard designer to create the Datatable Flexcard.

Datatable Flexcard for Case Comments

The Case Comment Datatable Flexcard contains a standard Flexcard Datatable element with three columns.

Configure the Data Source

When Vijay creates the Flexcard, he chooses Data Mapper as the data source type and selects a Data Mapper Turbo Extract that retrieves case comment data. 

1. Select Data Mapper as the Data Source Type (1), and select the sampleGetCaseComments Data Mapper to fetch case comment data (2). The data includes the comment, the date it was created, and whether it’s published.
   
2. For the Key/Value pair, enter CaseId for the Key (3) and {RecordId} for the Value (4).
   

Configure the Datatable Column Properties

After you add the Datatable element to the canvas, configure the column properties. 

This table describes the column properties.

Now configure a couple more Datatable properties.

1. Enter {records} in the Records field (1).
   
2. Select Is Sortable in the Attributes section (2).
   

Configure an Event Listener

This pubsub event listener causes the Flexcard to reload and refresh the data in the table when a user adds a new case comment.

1. Select Pubsub as the Event Type (1).
   
2. Enter omniscript_action as the Channel Name (2). This is a default out-of-the-box Omniscript pubsub event that triggers whenever an Omniscript action is run.
   
3. Enter data as the Event Name (3). When you use omniscript_action as the Channel Name and data as the Event Name, you allow the Flexcard to catch any action in the Omniscript and help it to trigger any additional actions when it receives that event.
   
4. Select Card as the Action Type (4).
   
5. For Type (5), select Reload.
   

Enable the Flexcard to Interact with an Omniscript

Select Omniscript Support, because you embed this Flexcard in a custom Lightning web component that is part of the Case Management Omniscript.

Activate the Flexcard

Activate the Flexcard to compile and deploy it as a standalone Lightning web component. 

Vijay makes a note of the component name so he can embed the active Flexcard in the custom Lightning web component he builds next.

Custom Lightning Web Component for Case Comments

Vijay creates a CommentDataTableLWC custom Lightning web component and embeds the Case Comment Datatable Flexcard in the HTML. The HTML file only contains the embedded Datatable Flexcard.  Here’s sample code.

<template>
<c-cf-sample-case-comment-data-table lwc:if={caseId} record-id={caseId}></c-cf-sample-case-comment-data-table>
</template>

Use the Lightning web component name of an active Flexcard to embed a Flexcard inside another custom Lightning web component. An active Flexcard displays cf as the prefix. 

In the JavaScript, Vijay needs the datatable in the Flexcard to refresh each time a user submits a new case comment.

To put the data source in the Flexcard, link the variables in the Omniscript to your two Flexcards, and then link the callback logic from the Flexcards back into the Omniscript. This completes the two-way linkage from the Flexcard to the Omniscript and from the Omniscript back to the Flexcard. 

Vijay’s Case Comment Datatable JavaScript file contains:

• The Common Action Utility for the remote call to the Omniscript
  
• The caseId variable to enable the Omniscript to pass it
  
• The pubsub import statement so that the pubsub listeners and action events work
  

Here’s a sample of the JavaScript file.

import { LightningElement, api } from 'lwc';
import { OmniscriptBaseMixin } from 'Omnistudio/omniscriptBaseMixin';
import { OmniscriptActionCommonUtil } from 'Omnistudio/omniscriptActionUtils';
import pubsub from 'Omnistudio/pubsub';
export default class CaseCommentDataTableLWC extends OmniscriptBaseMixin(LightningElement) {
caseId;
connectedCallback() {
this.caseId = this.omniJsonData.SelectedCaseId;
}
}

This table shows code highlights.

Custom Lightning Web Component Properties

In the Omniscript designer, configure the properties of the Custom Lightning Web Component element that holds Vijay’s caseCommentDataTableLWC.

1. For Name (1) and Field Label (2), enter a name and display name for the Custom LWC element.
   
2. In the Lightning Web Component Name (3) field, enter the name of the custom Lightning web component. In this example, the name is caseCommentDataTableLWC.
   
3. Enter column for Property Name (4) and %columns% for Property Source (5).
   

Wrap Up

That’s it! Vijay was able to meet his customer’s requirements for a new Omnistudio project.

You followed along with Vijay as he designed and built a two-page case management workflow within Omnistudio using custom Lightning Web Components. You explored best practices for Omnistudio Managed Packages, the use of component overrides and pub/sub messaging for intercomponent communication, Data Mappers for data retrieval and saving, and leveraging slots for extending standard components.

Now it's your turn to apply these techniques in your own Omnistudio for Managed Package projects, enhancing your workflows and improving their maintainability.

Resources

• Salesforce Help: Display Flexcard Data in a Tabular Structure (Omnistudio for Managed Packages)
• Salesforce Help: Enable Omniscript Support on a Flexcard (Omnistudio for Managed Packages)
• Salesforce Help: Custom Lightning Web Component Properties (Omnistudio for Managed Packages)