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:
Home
ui5-static-area-item-sf-header,* *[data-ui5-stable*="Module-HOME"]
Admin Center
ui5-static-area-item-sf-header,* *[data-ui5-stable*="Module-ADMIN"]
Calibration
ui5-static-area-item-sf-header,* *[data-ui5-stable*="Module-CALIBRATION"]
Company Info
ui5-static-area-item-sf-header,* *[data-ui5-stable*="Module-COMPANY_INFO"]
Compensation
ui5-static-area-item-sf-header,* *[data-ui5-stable*="Module-COMPENSATION"]
My Employee File
ui5-static-area-item-sf-header,* *[data-ui5-stable*="Module-EMPLOYEE_FILE"]
Objectives
ui5-static-area-item-sf-header,* *[data-ui5-stable*="Module-GOAL"]
Performance
ui5-static-area-item-sf-header,* *[data-ui5-stable*="Module-PERFORMANCE"]
Presentations
ui5-static-area-item-sf-header,* *[data-ui5-stable*="Module-TALENTREVIEW"]
Recruiting
ui5-static-area-item-sf-header,* *[data-ui5-stable*="Module-RECRUITING"]
Reporting
ui5-static-area-item-sf-header,* *[data-ui5-stable*="Module-REPORT"]
Succession
ui5-static-area-item-sf-header,* *[data-ui5-stable*="Module-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
[data-ui5-stable='sf-header-shellbar'],ui5-tabcontainer-sf-header,* *[data-ui5-stable='bizxSubTab_COMPANY_ORG_CHART']
Position Org Chart
[data-ui5-stable='sf-header-shellbar'],ui5-tabcontainer-sf-header,* *[data-ui5-stable='bizxSubTab_POSITION_ORG_CHART']
Company Structure Overview
[data-ui5-stable='sf-header-shellbar'],ui5-tabcontainer-sf-header,* *[data-ui5-stable='bizxSubTab_ENTITY_ORG_CHART']
Directory
[data-ui5-stable='sf-header-shellbar'],ui5-tabcontainer-sf-header,* *[data-ui5-stable='bizxSubTab_COMPANY_DIR']
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.
