> For the complete documentation index, see [llms.txt](https://docs.nexthink.com/platform/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.nexthink.com/platform/user-guide/adopt/guide-creation-and-management-from-nexthink-applications/configuring-adoption-settings/use-case-shadow-dom-selectors-configuration-for-sap-application.md). # Use case: Shadow DOM selectors for SAP application {% hint style="info" %} Shadow DOM is a technique in web applications that allows you to attach and encapsulate a separate Document Object Model (DOM) tree to web elements, ensuring that they are unaffected by the rest of the JavaScript and CSS running on the page. {% endhint %} 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](https://docs.nexthink.com/platform/user-guide/applications/configuring-applications/configuring-web-applications/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](/platform/user-guide/adopt/guide-content-development-from-in-app-adopt-editor/using-element-selector-in-adopt-editor.md). * Alternatively, access the properties of an existing guide component. 3. Open the [Position property tab](broken://pages/9jcfummECIGZn2G3QU9g) 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.
Example of Shadow DOM elements within the Menu drop-down list
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](/platform/user-guide/adopt/guide-content-development-from-in-app-adopt-editor/using-element-selector-in-adopt-editor.md). * Alternatively, access the properties of an existing guide component. 3. Open the [Position property tab](broken://pages/9jcfummECIGZn2G3QU9g) 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.
4. 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.
Preview the selection to make sure it is correct before saving the step
#### 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-items-within-the-menu-dropdown-items-using-adopt-editor). | Item in the SAP menu dropdown | Element JSPath selectors | | ----------------------------- | ----------------------------------------------------------------------------- | | 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"]` | ### 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.
Example of Shadow DOM within Menu tabs on the Job Requisitions page
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](/platform/user-guide/adopt/guide-content-development-from-in-app-adopt-editor/using-element-selector-in-adopt-editor.md). * Alternatively, access the properties of an existing guide component. 3. Open the [Position property tab](broken://pages/9jcfummECIGZn2G3QU9g) 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.
4. 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](#configuring-the-selector-for-menu-tabs-using-adopt-editor). | Menu tab in the SAP | Element JSPath selector | | -------------------------- | ------------------------------------------------------------------------------------------------------------------------ | | 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']` | --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.nexthink.com/platform/user-guide/adopt/guide-creation-and-management-from-nexthink-applications/configuring-adoption-settings/use-case-shadow-dom-selectors-configuration-for-sap-application.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.