ユースケース：SAPアプリケーションのShadow DOMセレクタ
Shadow DOM を使用する要素には、Nexthink Applications でセレクターフレームワークを定義する際や、ビジュアルコンポーネント（ステップ、ツールチップなど）を取り付ける際に要素選択用のカスタム安定識別子を作成する必要があります。 要素に Adopt Editor を使ってアタッチします。
このページには、SAP SuccessFactors アプリケーションで Shadow DOM セレクターを検出して構成するためのユースケースが含まれています。
SAP SuccessFactors 内で Shadow DOM を使用している要素/エリア
以下は、SAP SuccessFactors 内の Shadow DOM を使用している要素またはエリアの具体例です。 社員はユーザーの役割と現在のURLに基づいて、次の項目を異なる方法で見ることに注意してください。
Adopt Editor を使ったメニューボタンのセレクターの設定
ページによってこのボタンのテキストは異なりますが、必要な属性データは一貫しています。 Adopt でkey pagesをターゲットにすることで、設定が正しいページでのみ表示されることを保証します。
メニューボタンに安定したセレクターを追加するには、ブラウザーから次の手順を行います。
Web アプリケーション内から Adopt Editor を開きます。
ガイドコンポーネント(ステップ、ツールチップなど)を作成します。 そして、ウェブページ上の要素を選択します。
または、既存のガイドコンポーネントのプロパティにアクセスします。
要素の場所にある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ツリー内に含まれています。
メインメニューのドロップダウン内の任意の項目に安定したセレクタを追加するためには：
ウェブアプリケーションからAdopt Editorを開きます。
ガイドコンポーネント(ステップ、ツールチップなど)を作成します。 そして、ウェブページ上の要素を選択します。
または、既存のガイドコンポーネントのプロパティにアクセスします。
要素の場所にあるElement JSPathを見つけます。
選択と関連付けられたモジュールを、テキストエリア内で検索することにより識別します:
[data-ui5-stable='Module-たとえば、[data-ui5-stable*="Module-TALENTREVIEW"]は次の画像に含まれています。
識別されたモジュールデータを次のように追加します：
ui5-static-area-item-sf-header,* *結果は次のようになります：ui5-static-area-item-sf-header,* *[data-ui5-stable*="Module-TALENTREVIEW"]
コンポーネント終了用のクリックトリガーを使用する場合は、そのエリアに次のElement JSPathセレクタを追加します。
メニュードロップダウン内の全項目の例のセレクタ
以下の表は、SAP SuccessFactorsアプリケーション内のメニュードロップダウン内の全項目に必要なカスタムElement JSPathセレクタを示しています。
これらのElement 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ツリー内にあります。
ブラウザからメニュータブの安定したセレクタを追加するには：
ウェブアプリケーションからAdopt Editorを開きます。
ガイドコンポーネント(ステップ、ツールチップなど)を作成します。 そして、ウェブページ上の要素を選択します。
または、既存のガイドコンポーネントのプロパティにアクセスします。
要素の場所にあるElement JSPathを見つけます。
テキストエリア内で、
[data-ui5-stable='bizxSubTabを検索して、選択と関連付けられたモジュールを識別します。 たとえば、_[data-ui5-stable='bizxSubTab_RECRUITING_EMAIL_CORRESPONDENCE_MESSAGE_CENTER']`は次の画像に含まれています。
識別されたモジュールデータを次のように追加します：
[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セレクタを使用するには、上記に記載された手順を同様に従ってください。
組織図
[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']
Last updated
Was this helpful?