The ScreenSteps Browser Extension is an add-on to select plans. If you don't currently have access but are interested in adding it to your plan, please reach out to <[email protected]>.
If you need to target a channel to something more specific then a url then you can use a jQuery Selector. This article will describe how to use the jQuery Selector field to target your channel based on the presence of certain elements on the page.
Targeting an element on the page
Each channel in ScreenSteps has a jQuery Selector field. Let's assume that you have a channel for Leads in Salesforce Lightning but you want a second channel that is used when viewing the Chatter tab for the lead. Let's look at how you would create a jQuery statement that will determine if the Chatter tab is active.
Inspect the HTML of the page
- In your web browser (this example uses Chrome) right-click on the page element you want to target
- Select Inspect from the contextual menu.
Look at the elements in the HTML that uniquely identify that element on the page. In this case when the Chatter tab is active it is an
<li> element with the
.uiTabItem classes assigned to it and it contains the text
The following jQuery statement would locate the Chatter tab:
Here is what it looks like in the ScreenSteps channel interface:
Search for div containing text
<p>#breadCrumb:contains('Reservations > Reservation Grid')</p>
Selected text in a selection menu
Search for two visible text strings in a div that is scoped to another div
This can be used to show different help articles for different products in cases in Salesforce. For example, all cases associated with "Rental Property" and "Alderaan" can have one set of articles. "Rental Property" and "Naboo" would show another set of articles.
<p>.forcePageBlockSectionRow .slds-form-element:contains('String 1'):contains('String 2')</p>
Search for text in more than one element
If the text you are searching for can be in more than one element than use a comma to separate them.
Targeting an element in an iframe
If the content on the web page is in an iframe then you need to use a slightly different syntax in the jQuery Selector field since you will need to tell the channel to target the iframe when using the jQuery selector. The syntax is as follows:
To target the iframe you write a jQuery statement that targets the source of the iframe. Here is an example that targets the selected option of a menu in an iframe:
<p>["iframe[src*='/iframe_page.html']", "#selector option:selected:contains(Inventory)"]</p>
By regular expression
The following code works with Salesforce Service Console. It looks for all iframes that start with
ext-comp- and then searches each one for a row with "Case Owner" as the label and "Toyota" as the value. The extension will look for the match in any of the iframes that are found which are visible.
<p>["iframe[id^='ext-comp-']", ".labelCol:contains('Case Owner') + .dataCol:contains('Toyota')"]</p>