Display and Submit Case Comments

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.
  

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 agent, 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 has 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 DataRaptor Post Action, and display it as a button.
   
3. Link the Post Action to a DataRaptor 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.
   

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 DataRaptor Post Action to submit and save the comment (2)
  
• A Custom LWC (3) element to link the custom Lightning web component to the OmniScript
  

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.
   

Configure the DataRaptor Post Action properties. 

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

In the DataRaptor Post Action properties, expand the Messaging Framework section. 

1. Select the Pub/Sub checkbox (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 DataRaptor as the data source type and selects a DataRaptor Turbo Extract that retrieves case comment data. 

1. Select DataRaptor as the Data Source Type (1), and select the sampleGetCaseComments DataRaptor to fetch case comment data (2). The data includes the comment, the date it was created, and whether or not it is 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.
   

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

caseCommentDataTableLWC.html

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

The Case Comment Datatable Javascript file contains:

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

caseCommentDataTableLWC.js

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