ユースケース：SAPアプリケーションのShadow DOMセレクタ

注意: この文書は利便性と情報提供を目的に翻訳されたものです。 この翻訳とオリジナルの英語版間に差異や矛盾がある場合、オリジナルの英語版が優先されます。 この翻訳から生じる可能性のある誤りや誤解についての責任は負いかねます。

シャドウDOMはウェブアプリケーションにおいて、要素に対し他のJavaScriptやCSSの影響を受けない独立したドキュメントオブジェクトモデル（DOM）ツリーを突き付け、カプセル化する技法です。範囲

Shadow DOM を使用している要素に対しては、Nexthink Applicationsでセレクターフレームワークを定義する際、もしくはガイドビジュアルコンポーネント（ステップ、ツールチップなど）を取り付ける際にカスタムで安定な識別子を作成する必要があります。 Adopt Editor を使用する要素に添付します。

このページには、SAP SuccessFactorsアプリケーションでのShadow DOMセレクター検出と設定のユースケースが含まれています。

SAP SuccessFactors内のShadow DOMを使用している要素またはエリア

以下は、SAP SuccessFactors内でShadow DOMを使用している要素またはエリアの具体的な例です。 ユーザーの役割や現在のURLによって、以下のアイテムの見え方が異なることを覚えておいてください。

Adopt Editor を使用したメニューボタンのセレクター構成

このボタンのテキストはページごとに異なりますが、必要な属性データは一貫しています。キー ページ を Adopt でターゲットにすることで、設定が正しいページにのみ表示されるようにできます。

メニューボタンに安定したセレクタを追加するには、ブラウザから次の操作を行ってください。

1. ウェブアプリケーション内から Adopt Editor を開きます。

2. ガイド コンポーネント（ステップ、ツールチップなど）を作成します。 そして、 ウェブページ上の要素を選択 します。

   • または、既存のガイドコンポーネントのプロパティにアクセスします。

3. 位置プロパティタブ を開きます。

   • 要素位置の下に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 ツリー内に含まれています。

メインメニューのドロップダウン内の項目に安定したセレクターを追加するために：

1. Webアプリケーション内からAdopt Editorを開きます。

2. ガイドコンポーネント（ステップ、ツールチップなど）を作成します。 そして、Webページ上の要素を選択します。

   • または、既存のガイドコンポーネントのプロパティにアクセスします。

3. 位置プロパティタブを開いてください：

   • エレメント位置の下にあるElement JSPathを見つけます。

   • セレクションに関連するモジュールを検索して特定します： テキストエリア内で [data-ui5-stable='Module- を探します。 例えば、[data-ui5-stable*="Module-TALENTREVIEW"]は次の画像に含まれています。

1. 特定したモジュールデータに次を追加してください：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セレクターを使用するには、上記で説明されている手順を同じように従ってください。

SAPのメニュードロップダウンアイテム	要素JSパスセレクター
ホーム	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ツリー内に存在します。

メニュータブに安定したセレクターを追加するために、ブラウザから：

1. Webアプリケーション内からAdopt Editorを開きます。

2. ガイドコンポーネント（ステップ、ツールチップなど）を作成します。 そして、Webページ上の要素を選択します。

   • または、既存のガイドコンポーネントのプロパティにアクセスします。

3. 位置プロパティタブを開いてください：

   • エレメント位置の下にあるElement JSPathを見つけます。

   • セレクションに関連するモジュールを検索して特定します： テキストエリア内で [data-ui5-stable='bizxSubTab を探します。 例えば、[data-ui5-stable='bizxSubTab_RECRUITING_EMAIL_CORRESPONDENCE_MESSAGE_CENTER'] は次の画像に含まれています。

1. 特定したモジュールデータに次を追加してください：[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セレクターを使用するには、上記で説明されている手順を同じように従ってください。

SAPのメニュータブ	要素JSパスセレクター
組織図	[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']