Use case: Element selectors for Salesforce Lightning

When configuring the Adoption settings for Salesforce Lightning Adopt guides, use the Element selectors on this page to:

• Maximize the stability and reliability of element selection by avoiding dynamic identifiers.

• Enhance guide resistance to webpage changes from Salesforce Lightning.

Element selectors for Salesforce Lightning

From the Adoption settings tab > Settings subtab in Nexthink, for the Salesforce web application configured in Nexthink:

• Ignored element IDs: ^salesforce-lightning-tooltip-bubble_[a-f0-9-]+$, ^tt-for-\d+:\d+;a(-tt-adv)?$, ^calendarToggle-, ^\w{2}$, ^edit-, ^[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}$, ^[A-Z0-9]{18}$

• Element ID replacement: Instruct the system to remove dynamic components—in this case, numbers—from ID or class-name selectors, and only keep the static segments of interest.

  • In the ID field, enter ^(([a-zA-Z0-9]+[-_])+)(\d+)(:(\d+))?$ . This code represents any number within the element ID.

  • In the Replacer field, enter [id^="$1"][id$="$2"] . This code represents the element ID segments before and after the number within the ID.

  • See Element ID replacement example below.

• Ignored element class names: ^outputLookupLink-, ^sutbmqjadod$, ^ng-charthover$, ^idc0_\d+$, ^outputLookupLink-[A-Za-z0-9]+-703:0$, ^qe-subject-id-[A-Za-z0-9]+$, ^splashPage-r\d+$, ^slds-r\d+$, ^private-ssr-placeholder-class$ This code represents numbers within class names.

• Included element custom attribute names: alt, aria-description, aria-label, data-component-id, data-id, data-key, data-name, data-label, icon-name, placeholder, scope, title, variant

• Dropdown list selector: Leave this field empty to ensure proper feature functionality.

Element ID replacement example

After defining the Element ID replacement fields as:

• ID: ^(([a-zA-Z0-9]+[-_])+)(\d+)(:(\d+))?$

• Replacer: [id^="$1"][id$="$2"]

For the following element ID example:

<span id="entassetrequesttableall_23_EntAssetRequestTableCreate_label">abc</span>

1. The CSS element selector contains dynamic components—in this case, the number 23:

span#entassetrequesttableall_23_EntAssetRequestTableCreate_label.button-label:nth-child(3)

1. The system modifies the CSS selector by incorporating only static elements, resulting in:

span.button-label[id^="entassetrequesttableall_"][id$="_EntAssetRequestTableCreate_label"]:nth-child(3)

• Where [id^="entassetrequesttableall_"] means the element ID starts with entassetrequesttableall_

• Where [id$="_EntAssetRequestTableCreate_label"] means the element ID ends with _EntAssetRequestTableCreate_label

Use Nexthink default configurations for the remaining Adoption settings, including Guide defaults.

Your configuration should look like the image below.