ScreenSteps

How to Use jQuery to Customize a Browser Extension Channel Based on Page Content

Updated on

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

  1. In your web browser (this example uses Chrome) right-click on the page element you want to target
  2. 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 &gt; Reservation Grid')
Click to copy

Selected text in a selection menu

#myselect option:selected:contains(MyString)
Click to copy

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')
Click to copy

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")
Click to copy

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"]
Click to copy

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)"]
Click to copy

By id

["#contentIFrame", "..."]
Click to copy

By src

["iframe[src*='/myframe.html']", "..."]
Click to copy

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')"]
Click to copy

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"]
Click to copy

0 Comments

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Previous Article How to Create Contextual Help Channels
Next Article How to Add Content to Existing Contextual Help Channels
Still Need Help? Contact Us