ScreenStepsManaging Content Contextual HelpUsing jQuery to customize a Channel based on page content

Using jQuery to customize a Channel based on page content

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:


Here is what it looks like in the ScreenSteps channel interface:

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:

["iframe[src*='/iframe_page.html']", "#selector option:selected:contains(Inventory)"]


Add your comment

E-Mail me when someone replies to this comment