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.
jQuery is a popular JavaScript library that, among other things, simplifies finding elements on a web 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 .active and .uiTabItem classes assigned to it and it contains the text Chatter.
The following jQuery statement would locate the Chatter tab:
.active.uiTabItem:contains(Chatter)Here is what it looks like in the ScreenSteps channel interface:
Search for div containing text
#breadCrumb:contains('Reservations > Reservation Grid')Selected text in a selection menu
#myselect option:selected:contains(MyString)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.
.forcePageBlockSectionRow .slds-form-element:contains('String 1'):contains('String 2')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.
#ElementId1, #Elementid2:contains("String")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:
["IFRAME_STATEMENT", "CONTENT_STATEMENT"]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)"]By id
["#contentIFrame", "..."]By src
["iframe[src*='/myframe.html']", "..."]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.
["iframe[id^='ext-comp-']", ".labelCol:contains('Case Owner') + .dataCol:contains('Toyota')"]Targeting an element in two levels of iframes
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"]
0 Comments
Add your comment