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
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
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:
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
Click "Activate Brick" and refresh the Salesforce Service Console window to see your new panel