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.
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.
- 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:
#breadCrumb:contains('Reservations > Reservation Grid')
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.
.forcePageBlockSectionRow .slds-form-element:contains('String 1'):contains('String 2')
If the text you are searching for can be in more than one element than use a comma to separate them.
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:
["iframe[src*='/iframe_page.html']", "#selector option:selected:contains(Inventory)"]
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.
["iframe[id^='ext-comp-']", ".labelCol:contains('Case Owner') + .dataCol:contains('Toyota')"]
If the content on the web page is nested within two levels of iframes then you need to use a slightly different syntax in the jQuery Selector field. All of the details in the section above about targeting an element in a single iframe still apply, with the only difference being the new syntax of:
["FIRST_IFRAME_STATEMENT", "SECOND_IFRAME_STATEMENT", "CONTENT_STATEMENT"]