> 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/ja/user-guide/adopt/guide-creation-and-management-from-nexthink-applications/configuring-adoption-settings/use-case-shadow-dom-selectors-configuration-for-sap-application.md). # ユースケース: SAPアプリケーション用のシャドウDOMセレクター {% hint style="info" %} Shadow DOM は、Web アプリケーション内で要素に独自のドキュメント オブジェクト モデル (DOM) ツリーをアタッチしてカプセル化する技術です。これにより、ページ上で実行される他の JavaScript や CSS に影響を受けないようにします。 {% endhint %} Shadow DOM を使用する要素には、Nexthink Applications でセレクターフレームワークを定義する際や、ビジュアルコンポーネント（ステップ、ツールチップなど）を取り付ける際に要素選択用のカスタム安定識別子を作成する必要があります。 要素に Adopt Editor を使ってアタッチします。 このページには、SAP SuccessFactors アプリケーションで Shadow DOM セレクターを検出して構成するためのユースケースが含まれています。 ## SAP SuccessFactors 内で Shadow DOM を使用している要素/エリア 以下は、SAP SuccessFactors 内の Shadow DOM を使用している要素またはエリアの具体例です。 社員はユーザーの役割と現在のURLに基づいて、次の項目を異なる方法で見ることに注意してください。 ### Adopt Editor を使ったメニューボタンのセレクターの設定 ページによってこのボタンのテキストは異なりますが、必要な属性データは一貫しています。\ Adopt で[key pages](https://docs.nexthink.com/platform/ja/user-guide/applications/configuring-applications/configuring-web-applications/key-pages)をターゲットにすることで、設定が正しいページでのみ表示されることを保証します。
メニューボタンに安定したセレクターを追加するには、ブラウザーから次の手順を行います。 1. Web アプリケーション内から Adopt Editor を開きます。 2. ガイドコンポーネント(ステップ、ツールチップなど)を作成します。 そして、[ウェブページ上の要素を選択](/platform/ja/user-guide/adopt/guide-content-development-from-in-app-adopt-editor/using-element-selector-in-adopt-editor.md)します。 * または、既存のガイドコンポーネントのプロパティにアクセスします。 3. [ポジションプロパティタブ](broken://pages/9jcfummECIGZn2G3QU9g)を開いてください。 * **要素の場所**にある**Element JSPath**を見つけます。 * データ内の既存の要素JSPathを次のように置き換えます:\ `[data-ui5-stable='sf-header-shellbar'],ui5-shellbar-sf-header#shellbar[data-ui5-stable='shellbar'],* *[data-ui5-stable='menu']` ### Adopt Editorを使用してメニュードロップダウン内の項目用のセレクタを設定します。 以下の画像に示されているように、従業員がメニューを選択すると、いくつかの項目が利用可能になります。 このエリアはシャドウDOMツリー内に含まれています。
Example of Shadow DOM elements within the Menu drop-down list
メインメニューのドロップダウン内の任意の項目に安定したセレクタを追加するためには： 1. ウェブアプリケーションからAdopt Editorを開きます。 2. ガイドコンポーネント(ステップ、ツールチップなど)を作成します。 そして、[ウェブページ上の要素を選択](/platform/ja/user-guide/adopt/guide-content-development-from-in-app-adopt-editor/using-element-selector-in-adopt-editor.md)します。 * または、既存のガイドコンポーネントのプロパティにアクセスします。 3. [ポジションプロパティタブ](broken://pages/9jcfummECIGZn2G3QU9g)を開いてください。 * **要素の場所**にある**Element JSPath**を見つけます。 * 選択と関連付けられたモジュールを、テキストエリア内で検索することにより識別します:\ `[data-ui5-stable='Module-`\ たとえば、`[data-ui5-stable*="Module-TALENTREVIEW"]`は次の画像に含まれています。
4. 識別されたモジュールデータを次のように追加します：\ `ui5-static-area-item-sf-header,* *`\ 結果は次のようになります：\ `ui5-static-area-item-sf-header,* *[data-ui5-stable*="Module-TALENTREVIEW"]` コンポーネント終了用のクリックトリガーを使用する場合は、そのエリアに次の**Element JSPath**セレクタを追加します。
Preview the selection to make sure it is correct before saving the step
#### メニュードロップダウン内の全項目の例のセレクタ 以下の表は、SAP SuccessFactorsアプリケーション内のメニュードロップダウン内の全項目に必要なカスタム**Element JSPath**セレクタを示しています。 これらの**Element JSPath**セレクタを使用するには、[上記](#configuring-the-selector-for-items-within-the-menu-dropdown-items-using-adopt-editor)に記載された手順を同様に従ってください。 | SAPメニューのドロップダウン内の項目 | 要素JSPathセレクタ | | ------------------- | ----------------------------------------------------------------------------- | | ホーム | `ui5-static-area-item-sf-header,* *[data-ui5-stable*="Module-HOME"]` | | 管理センター | `ui5-static-area-item-sf-header,* *[data-ui5-stable*="Module-ADMIN"]` | | キャリブレーション | `ui5-static-area-item-sf-header,* *[data-ui5-stable*="Module-CALIBRATION"]` | | 会社情報 | `ui5-static-area-item-sf-header,* *[data-ui5-stable*="Module-COMPANY_INFO"]` | | 報酬 | `ui5-static-area-item-sf-header,* *[data-ui5-stable*="Module-COMPENSATION"]` | | マイ従業員ファイル | `ui5-static-area-item-sf-header,* *[data-ui5-stable*="Module-EMPLOYEE_FILE"]` | | 目標 | `ui5-static-area-item-sf-header,* *[data-ui5-stable*="Module-GOAL"]` | | パフォーマンス | `ui5-static-area-item-sf-header,* *[data-ui5-stable*="Module-PERFORMANCE"]` | | プレゼンテーション | `ui5-static-area-item-sf-header,* *[data-ui5-stable*="Module-TALENTREVIEW"]` | | 採用 | `ui5-static-area-item-sf-header,* *[data-ui5-stable*="Module-RECRUITING"]` | | 報告 | `ui5-static-area-item-sf-header,* *[data-ui5-stable*="Module-REPORT"]` | | 後継計画 | `ui5-static-area-item-sf-header,* *[data-ui5-stable*="Module-SUCCESSION"]` | ### Adopt Editorを使用してメニュータブのセレクタを設定します。 ほとんどのシステム領域には、トップメニューセクションにいくつかのタブがあります。 これらの利用可能なタブはシャドウDOMツリー内にあります。
Example of Shadow DOM within Menu tabs on the Job Requisitions page
ブラウザからメニュータブの安定したセレクタを追加するには： 1. ウェブアプリケーションからAdopt Editorを開きます。 2. ガイドコンポーネント(ステップ、ツールチップなど)を作成します。 そして、[ウェブページ上の要素を選択](/platform/ja/user-guide/adopt/guide-content-development-from-in-app-adopt-editor/using-element-selector-in-adopt-editor.md)します。 * または、既存のガイドコンポーネントのプロパティにアクセスします。 3. [ポジションプロパティタブ](broken://pages/9jcfummECIGZn2G3QU9g)を開いてください。 * **要素の場所**にある**Element JSPath**を見つけます。 * テキストエリア内で、`[data-ui5-stable='bizxSubTab`を検索して、選択と関連付けられたモジュールを識別します。 たとえば、\_`[data-ui5-stable='bizxSubTab_RECRUITING_EMAIL_CORRESPONDENCE_MESSAGE_CENTER'`]\`は次の画像に含まれています。
4. 識別されたモジュールデータを次のように追加します：\ `[data-ui5-stable='sf-header-shellbar'],ui5-tabcontainer-sf-header,* *`\ 結果は次のようになります：\ `[data-ui5-stable='sf-header-shellbar'],ui5-tabcontainer-sf-header,* *[data-ui5-stable='bizxSubTab_RECRUITING_EMAIL_CORRESPONDENCE_MESSAGE_CENTER']` #### メニュータブ用の例のセレクタ 以下の表は、SAP SuccessFactorsアプリケーションのメニュータブに必要なカスタム**Element JSPath**セレクタを示しています。 これらの**Element JSPath**セレクタを使用するには、[上記](#configuring-the-selector-for-menu-tabs-using-adopt-editor)に記載された手順を同様に従ってください。 | SAPのメニュータブ | 要素JSPathセレクタ | | ---------- | ------------------------------------------------------------------------------------------------------------------------ | | 組織図 | `[data-ui5-stable='sf-header-shellbar'],ui5-tabcontainer-sf-header,* *[data-ui5-stable='bizxSubTab_COMPANY_ORG_CHART']` | | 役職組織図 | `[data-ui5-stable='sf-header-shellbar'],ui5-tabcontainer-sf-header,* *[data-ui5-stable='bizxSubTab_POSITION_ORG_CHART']` | | 会社構造概要 | `[data-ui5-stable='sf-header-shellbar'],ui5-tabcontainer-sf-header,* *[data-ui5-stable='bizxSubTab_ENTITY_ORG_CHART']` | | ディレクトリ | `[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/ja/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.