Configuring Shadow DOM Selectors
Last updated
Last updated
Shadow DOM is a technique within SaaS applications that enables developers to attach a DOM tree to web elements in HTML, with its internals hidden from JavaScript and CSS running on the page.
Nexthink offers a set of selectors that facilitate detecting these elements and delivering DAP content to them. In some instances, customizing a selector ensures better detection accuracy.
Below are some specific examples that Nexthink has identified and provided configuration for.
Employees see the items in this list differently based on the user role and the current URL.
Although the text of this button is different across pages, the required attribute data is consistent. Nexthink Adopt's System page targeting ensures the configuration only shows on the correct pages.
Open the Adopt Editor from within the application.
Choose Create step
and select the required element.
Within the Step Editor, click the Position
tab.
Navigate to the Element JSPath
selector.
Replace the existing element JSPath within the data below:
[data-ui5-stable='sf-header-shellbar'],ui5-shellbar-sf-header#shellbar[data-ui5-stable='shellbar'],* *[data-ui5-stable='menu']
Several items are available when a user selects the Menu as shown in the image below. This area is contained within shadow DOM trees.
To add a stable selector for any item within this list:
Open the Step Editor.
Create/edit a step and select the menu item element.
Navigate to the Position
tab.
View the current Element JSPath
selection.
Identify the module associated with the selection by searching for [data-ui5-stable='Module-
within the text area.
For example, [data-ui5-stable*="Module-TALENTREVIEW"]
is contained in the following image.
Append the identified module data with the following:
ui5-static-area-item-sf-header,* *
The result should look like this:
ui5-static-area-item-sf-header,* *[data-ui5-stable*="Module-TALENTREVIEW"]
If you use the click trigger for step completion, add the following Element JSPath selector into that area.
The table below showcases the custom Element JSPath selectors required for the configured menu item:
Item | Element |
---|---|
Home |
|
Admin Center |
|
Calibration |
|
Company Info |
|
Compensation |
|
My Employee File |
|
Objectives |
|
Performance |
|
Presentations |
|
Recruiting |
|
Reporting |
|
Succession |
|
Most areas of the system have a series of tabs available within the top menu section (highlighted below). All available tabs are within shadow DOM trees. Nexthink recommends configuring a custom Element JSPath for these areas.
To add a stable selector for any item within this list:
Open the Step Editor.
Create/edit a step and select the menu item element.
Navigate to the Position
tab.
View the current Element JSPath
selection.
Identify the module associated with the selection by searching for [data-ui5-stable='bizxSubTab
within the text area.
For example, [data-ui5-stable='bizxSubTab_RECRUITING_EMAIL_CORRESPONDENCE_MESSAGE_CENTER'
]
is contained in the following image.
Append the identified module data with the following:
[data-ui5-stable='sf-header-shellbar'],ui5-tabcontainer-sf-header,* *
The result should look like this:
[data-ui5-stable='sf-header-shellbar'],ui5-tabcontainer-sf-header,* *[data-ui5-stable='bizxSubTab_RECRUITING_EMAIL_CORRESPONDENCE_MESSAGE_CENTER']
If you use the click trigger for step completion, add the following Element JSPath selector into that area.
The table below showcases the custom Element JSPath selectors required for the configured elements:
Item |
|
Org Chart |
|
Position Org Chart |
|
Company Structure Overview |
|
Directory |
|
The following sections describe the process of customizing a selector using the Management Console and Step Editor, focusing on SAP SuccessFactors. Note that this can also apply to any application using Shadow DOM.
Follow the steps below to confirm if web elements are contained within Shadow DOM.
Launch Developer Tools (F12 within Web Browser).
Hover over the elements you wish to inspect.
Within the right-hand element pane, scroll up from the selected element.
Verify if the element is nested within a shadow-root (open)
area.
Adopt attempts to determine which element data is best suited for element detection. In some use cases, however, you may be required to create specific custom attributes to ensure the guidance works as expected for your users. You can use the Developer Tools option within your Web Browser by inspecting the web element data to identify a stable identifier.
In this example, you can add the recommended data-ui5-stable
attribute to the application through the Space
settings menu within the Management Console.
Click the icon.