Use case: Shadow DOM Selectors configuration for SAP application

For elements using Shadow DOM, you should create a custom stable identifier for element selection when defining a Selectors framework in Nexthink Applications, or when attaching a guide visual component (step, tooltip, etc.) to an element using Adopt Editor.

This page contains a use case for detecting and configuring Shadow DOM selectors in the SAP SuccessFactors application.

Elements/areas using Shadow DOM within SAP SuccessFactors

Below are some specific examples of elements or areas using Shadow DOM within SAP SuccessFactors. Keep in mind, that employees see the following items differently based on the user role and the current URL.

Configuring the selector of a menu button using Adopt Editor

Although the text of this button is different across pages, the required attribute data is consistent. Targeting key pages in Adopt ensures the configuration only shows on the correct pages.

To add a stable selector for the menu button, from your browser:

1. Open the Adopt Editor from within the web application.

2. Create a guide component (step, tooltip, etc.) and select an element on the web page.

   • Alternatively, access the properties of an existing guide component.

3. Open the Position property tab to:

   • Find to the Element JSPath under Element location.

   • Replace the existing element JSPath within the data: [data-ui5-stable='sf-header-shellbar'],ui5-shellbar-sf-header#shellbar[data-ui5-stable='shellbar'],* *[data-ui5-stable='menu']

Configuring the selector for items within the menu dropdown items using Adopt Editor

Several items are available when employees select 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 the main menu dropdown:

1. Open the Adopt Editor from within the web application.

2. Create a guide component (step, tooltip, etc.) and select an element on the web page.

   • Alternatively, access the properties of an existing guide component.

3. Open the Position property tab to:

   • Find to the Element JSPath under Element location.

   • 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.

1. 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 component completion, add the following Element JSPath selector into that area.

Example selectors for all items within the menu dropdown

The table below showcases the custom Element JSPath selectors required for all items within the menu dropdown of the SAP SuccessFactors application.

To use these Element JSPath selectors, follow the same procedure described above.

Configuring the selector for menu tabs using Adopt Editor

Most system areas have a series of tabs available within the top menu section. These available tabs are within shadow DOM trees.

To add a stable selector for the menu tabs, from your browser:

1. Open the Adopt Editor from within the web application.

2. Create a guide component (step, tooltip, etc.) and select an element on the web page.

   • Alternatively, access the properties of an existing guide component.

3. Open the Position property tab to:

   • Find to the Element JSPath under Element location.

   • 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.

1. 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']

Example selectors for menu tabs

The table below showcases the custom Element JSPath selectors required for menu tabs of the SAP SuccessFactors application.

To use these Element JSPath selectors, follow the same procedure described above.