Embedding a UiPath App in Salesforce Service Console

Introduction
Read the Case Context
Define the Panel Foundation
Adding a Panel via Configuration

Introduction

UiPath Apps "is a cloud-based low-code application development platform that enables you to build and share enterprise-grade custom applications that deliver engaging user experiences".

In this tutorial, we'll cover how as a developer you can embed a UiPath App into Salesforce's Service Console

Define a reader for the case context (🧱 reusable)
Define a panel template for the left sidebar (🧱 reusable)
Use the panel template with the UiPath App brick

UiPath App running in the Service Console

📖

This tutorial assumes you know the basics in

🛠️

Workshop Basics

and

🎒

Configuration File Basics

🚦

If the PixieBrix team has shared the reader definition and panel template with you, you can skip directly to the "Adding a Panel via Configuration" section

Read the Case Context

Service Console is built in Salesforce's Lightening Aura Framework. PixieBrix does not yet support reading context from that framework directly, so instead we'll use the JQuery reader

For this tutorial, we'll read the Case Number and Subject from the Case Details:

Gotcha #1: Handling multiple case tabs

Salesforce Service Console maintains an app tab for each case. While it does lazily load the tab content, it does not remove the content from the DOM when switching to a different case.

Therefore, we need to scope the selectors to Salesforce's active case. We can find a selector for this by inspecting the page elements, and looking by the top-level ancestors for the currently displayed case.

Based on this, the .oneWorkspace[aria-expanded="true"] selector looks like a robust choice because of it's aria/accessibility attributes role="tabpanel" and aria-expanded="true"

Gotcha #2: Anchoring the lookups

Salesforce's Aura framework doesn't create unique selectors for the case detail fields. To anchor the lookups we'll use JQuery's :contains operator to find the field label.

For example, for the case number we'll use: .test-id__field-label-container:contains("Case Number") for the case number.

Once we have the anchor, we can use the CSS sibling combinator + to select the field

Gotcha #3: Waiting to read an element

Salesforce fetches the Case Details dynamically, so they won't be available immediately on page load. To have PixieBrix wait for the data to become available, use the maxWaitMillis directive

The complete reader definition

apiVersion: v1
kind: reader
metadata:
  # replace @todd with your account alias
  id: "@todd/salesforce/case-reader"
  version: 1.0.0
  name: Salesforce Case Data Reader
  description: Read case data from Salesforce
definition:
  isAvailable:
    # use a * for subdomain to match any company's instance
    matchPatterns: "https://*.lightning.force.com/lightning/r/Case/*"
    selectors: ".appName [title='Service Console']"
  reader:
    type: jquery
    selectors:
        caseNumber: 
            selector: '.oneWorkspace[aria-expanded="true"] .test-id__field-label-container:contains("Case Number") + div'
            maxWaitMillis: 5000
        caseSubject: 
            # the subject field is editable, so grab the rendered value .uiOutputText. If you leave this out
            # we'll also get some text that corresponds to the edit icon
            selector: '.oneWorkspace[aria-expanded="true"] .test-id__field-label-container:contains("Subject") + div .uiOutputText'
            maxWaitMillis: 5000
outputSchema:
  type: object
  properties:
    caseNumber:
      type: string
    caseSubject: 
      type: string

Define the Panel Foundation

Defining the base template

To create a template for the panel, we'll abstract the HTML from one of the existing templates. For example, we can grab the HTML of the contact details panel:

From that HTML, we'll strip out all the Aura framework related attributes (e.g., data-aura-rendered-by) and replace the icon, header, and content with the {{{icon}}}, {{{heading}}} and {{{body}}} mustache template engine placeholders, respectively

Making the panel collapsible

To support collapsible panels, we need to include a couple additional HTML attributes in the template:

Give the panel the pixiebrix CSS class
Include include attributes in the header to tell PixieBrix where and listen for toggle events: data-target="#{{bodyUUID}}" data-toggle="collapse"

Adjusting styling

Icon holder styling: style="background-color: #A094ED; padding: 4px;
Panel margin (when placing multiple PixieBrix panels): margin-bottom: 12px;

The complete starter brick template

apiVersion: v1
kind: extensionPoint
metadata:
  # replace @todd with your account alias
  id: "@todd/salesforce/case-panel"
  version: 1.0.0
  name: Salesforce Service Console Panel
  description: Add a panel to the Salesforce Service Console Case page
definition:
  type: panel
  # reference your reader that you defined above
  reader: "@todd/salesforce/case-reader"
  isAvailable:
    # same as what we had for reader
    matchPatterns: "https://*.lightning.force.com/lightning/r/Case/*"
    selectors: "span[title='Service Console']"
  defaultOptions:
    caption: "Custom Panel"
  containerSelector: 
    # same as for the reader: make sure we're using the active case context
    - '.oneWorkspace[aria-expanded="true"]'
    - "slot[slot='leftsidebar']"
  position: append
  template: |
    <div class="pixiebrix" style="margin-bottom: 12px;">
       <article>
          <div class="VIEW slds-card">
             <div class="slds-card__header slds-grid slds-m-bottom--none">
                <div class="slds-media slds-media--center slds-has-flexi-truncate">
                   <div class="slds-media__figure">
                      <div class="slds-icon slds-icon-standard-contact slds-icon--small forceEntityIcon" style="background-color: #A094ED; padding: 4px;">
                        <span class="margin: auto">{{{ icon }}}</span>
                      </div>
                   </div>
                   <div class="slds-media__body slds-text-heading--small">
                      <h2 data-target="#{{bodyUUID}}" data-toggle="collapse">
                         <a class="slds-card__header-link slds-truncate slds-show--inline-block uiOutputURL" dir="ltr" title="{{ heading }}">{{heading}}</a>
                      </h2>
                   </div>
                </div>
             </div>
             <div class="slds-card__body">
                <div class="slds-card__body--inner">
                   <div class="slds-tile__detail">
                      {{{body}}}
                   </div>
                </div>
             </div>
          </div>
       </article>
    </div>

Adding a Panel via Configuration

In the workshop, select the panel starter brick from "Install a Brick"

Give your panel a name:

On the Configuration tab we'll first configure the display settings for the panel:

heading: Give the panel a heading
collapsible: Toggle the collapsible field on to make the panel collapsible
icon: Select an icon for the panel

ℹ️

We don't need to configure UiPath on the "Integrations" tab because the UiPath App block works by embedding the App in an iframe. UiPath will ask the user to authenticate if they are not already logged in in their browser

ℹ️

Toggling "shadowDOM" is not necessary as the UiPath App brick works by embedding the App in an iframe. It will already be isolated from the Salesforce Service Console styling

Next, Click "Add a block" and select "UiPath App"

Provide the URL of your UiPath App. Additionally, provide any inputs that your UiPath App can use. For information on how to configure your UiPath App to accept inputs, see the instructions at:

🎆

Embed a UiPath App

In the example below, the caseNumber from our reader will be filled in to the text field in the app with placeholder in:context:

Additionally provide a width and height for the UiPath App

The UiPath App configuration

Click "Activate Brick" and refresh the Salesforce Service Console window to see your new panel