How To

Lightning Experience: Add Case Comments Using a Flow Screen/Embedded Flow Component

addcomment

Salesforce introduced Lightning Experience (LEX) in its Winter ’16 Release. With each of its seasonal releases, Salesforce continues to release enhances to Lightning Experience and starts addressing the features gap between LEX and Classic.

One of the current features gap is the ability to add case comments to a case. This was surprising to me since adding case comments seems like a fairly important feature to have when managing cases in Salesforce. The workarounds include using the Case Feed (which requires Chatter to be enabled) or (gasp!) switching back to Classic to add the case comment.

If you are a company, such as a financial services company, that can’t just easily turn on Chatter without other controls being in place, using the Case Feed is not really an option.

I was able to leverage the Winter ’17 feature of embedding flows (in beta) in a Lightning page to bridge this gap using visual workflow.

CaseCommentUI.JPG

It is important to note that the Flow component feature is still in beta, which means is of production quality but there may be some known limitations.

  • When you are activating new versions of the flow and flow’s input variables change, the flow component can become invalid.  This can be resolved by removing and adding the flow component to the Lightning page.
  • The following input variables not supported: Collection, sObject, sObject collection and Picklist or Multi-Select Picklist variables
  • The flow component supports only manually entered values for input variables.
  • The text input variables accept a maximum length of 4,000 characters.
  • You can pass the record’s ID automatically as a variable at run time by using the field value “recordId.”

Business Case: A small subset of users at Universal Containers are planning on making the switch to Lightning Experience. Sally Sunshine, the Operations manager, noted to Addison Dogster, the system administrator, that it doesn’t appear that her users are able to add case comments to a case in Lightning. This is a important action that her customer service reps need to be able to perform on a case.

Solution:  Addison performed analysis on the issue and learned that there is indeed a feature gap in Lightning and that users cannot add, edit or delete case comments in Lightning Experience. The workaround suggested is to use Case Comments to add comments. However, enabling case feed requires enabling Chatter. Enabling Chatter for Universal Containers is not an option that Addison can explore at the moment and having users flip back to Classic for this purpose is not something Addison wants to recommend. Instead, Addison was able to come up with a declarative solution by embedded a flow screens in the case detail record page in Lightning.

AddCaseComment-Flow.JPG

CaseRecordDetailLightningPage.JPG

Quick Steps:

1.First, we are going to create the flow with the flow screen to collect the case comment and the visibility of the case comment record to the public.

For those using Salesforce Classic, permission set can be found in Create | Workflows & Approvals | Flows. In Lightning Experience, it is found under Process Automation | Flows.

A. Let’s create the screen by locating the Screen flow element onto the canvas.

Let’s set the following on the “General Info” tab:

  • Name: “Provide your case comments”
  • Description: <provide a description of the screen>
  • Under navigation options, select “Don’t show Previous button”
  • Uncheck the “Show Pause button” box.

The results look like this…

AddCaseComment-Screen.JPG

Click on the “Add a Field” tab.

Select the Textbox field (by double-clicking or dragging the Textbox field onto the screen area).

The results look like this…

AddCaseComment-Screen-Text.JPG

Double-click on the Textbox field on the screen section or highlight the Textbox field on the screen section and click on the “Field Settings” tab.

Configure the following:

Label: Case Comments

Required: checked

The results look like this…

AddCaseComment-Screen-Text-FieldSettings.JPG

Go back to the “Add a Field” tab and drag the Checkbox field to the screen section.

The results look like this…

AddCaseComment-Screen-Checkbox.JPG

On the “Field Settings” tab, configure the following so that the viewable by public is set to true by default. The user will need to uncheck the box to make the case comment private:

Label: Viewable by Public?

Default value: <Navigate to GLOBAL CONSTANT and select $GlobalConstant.True>

Click on the “Ok” button.

The results look like this…

AddCaseComment-Screen-Checkbox-FieldSettings.JPG

Here is a demo of configuring the screen flow element:

CreateCaseCommentFlow-Screen.gif

B. Now, we need to create the flow step to create the case comments record based on the screen inputs.

Select the Record Create flow element and drag it onto the canvas. Configure it as follows:

Name: Create Case Comments

Description: This step creates the case comments

Create: CaseComment

Fields and their values:

CommentBody   {!Case_Comments} (Note: this is under Screen Input, field for the case comments textfield)

IsPublished {!Viewable_by_Public} (Note: this is under Screen Input, field for the viewable by public checkbox)

ParentId  {!recordId} (Note: If you want to pass the caseID from the Lightning Page when embedding the flow component, it will pass this automatically if your flow has a variable called “recordId”.)

AddCaseComment-RecordCreate.JPGAddCaseComment-RecordCreate1.JPG

Here are the attributes for the recordId flow variable:

Unique Name: recordId

Description: This stores the case record ID passed from the case details page

Data Type: Text

Input/Output Type: Input and Output

The result looks like this:

recordId.JPG

C. Now we need to set the screen as the starting point and draw the connector from the screen to the record create flow element.

AddCaseComment-StartingPoint.JPG

Here is a demo of configuring the record create flow element:

CreateCaseCommentFlow-RecordCreate.gif

D. Now, click on the Save button and set the flow properties, hit the “Ok” button.

Name: Create a Case Comment

Description: <Provide a description of what this flow does, where it’s invoked from>

Type: Flow

AddCaseComment-FlowProperties.JPG

E. Click on the Activate link to activate the flow so we can call it from the Lightning page.

AddCaseComment-Activate.JPG

2. Next, we need to add the flow component to the Case detail record Lightning page.

Navigate to the case detail record page. Under the wrench icon in the upper right, select the “Edit Page” option to open up Lightning App Builder.

CaseLightningPage-Edit.JPG

On the Case Record Detail in Lightning App Builder, select the “Flow (Beta)” component and drag it to the desired position on the page. In my case, I am dragging it to appear right above the Detail and Related tabs.

Then, over to the right, you need to configure the component to pull in the appropriate flow and layout (one or two column). If you had other input variables in your flow, you will see fields to configure what is passed into those variables.

In our case, we are just passing the case ID, which is automatically passed into the reserved field recordId.

Save changes and click on the Back button to navigate back to the Case detail record page.

The end result looks like this…

LightningAppBuilder.JPG

Here is a demo of configuring the flow component in Lightning App Builder:

CreateCaseCommentFlow-AddtoLightningPage.gif

That’s it! Congrats! You’ve implemented a flow screen within the case record detail Lightning page.

Now, before you deploy the changes to Production, don’t forget to test your configuration changes.

  • Navigate to the case record detail screen.
  • Provide a case comment and either keep the visible to public checked.
  • Verify that the new case comment is created in the Case Comments related list as expected (case comment is public).
  • Provide a case comment and either keep the visible to public unchecked.
  • Verify that the new case comment is created in the Case Comments related list as expected (case comment is private).

Deployment Notes/Tips:

  • Visual workflow can be deployed to Production in a change set (or can be deployed using a tool such as Dreamfactory’s Snapshot).
  • Activate the visual workflow as it is deployed as inactive into Production.
  • Manually add the flow component to the Lightning Case record detail page.

6 thoughts on “Lightning Experience: Add Case Comments Using a Flow Screen/Embedded Flow Component

  1. We’ve been trying to adopt LEX now that most major gaps closed but there things like this that make you scratch you’re head. We’ve run into some things that users consider basic like adding a contact from an account auto-pop with the address. Small thing but one of many small things users keyed in on as annoyances. This is a great solution to solving a problem but like you said in the intro, it’s surprising.

    Like

  2. I am happy to see that I am not suffering alone! I really love this solution. My one question is when I try to view the case comments, the longer comments are truncated on screen from within our lightning community, I can see perhaps 50 characters then just a … have you seen a way to expose the full text of the comments??? Thank you so much for sharing this information!!

    Like

  3. If you use the case comments related list, I’m afraid it is what it is in Lightning and you would need to drill into the record to see the full comments. Not sure if you can get more real estate by changing the page layout format using app builder.

    Like

  4. Hello dear Jen – this workaround is awesome – i have followed exactly all the steps, but i keep getting this error message:

    Error element Kommentar_hinzufuegen (FlowRecordCreate).
    This error occurred when the flow tried to create records: MALFORMED_ID: ParentId: id value of incorrect type: ””

    Do you know what is possibly wrong!?

    Thank you very much!!

    Like

  5. Hi Anna. Without seeing your configuration, it’s hard to say what the issue is, Do you have the full email flow fault error? You can message me on the Trailblazer community.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s