使用例: SAPアプリケーションのShadow DOMセレクター設定
Last updated
Was this helpful?
Last updated
Was this helpful?
Shadow DOMは、ウェブアプリケーションにおいてウェブ要素に個別のドキュメントオブジェクトモデル（DOM）ツリーを取り付け、カプセル化する技法です。これにより、ページ上で実行されているその他のJavaScriptやCSSに影響されることはありません。
Shadow DOMを使用する要素の場合、Nexthink Applicationsでセレクターフレームワークを定義するときやガイドビジュアルコンポーネント（ステップ、ツールチップなど）を取り付ける際には、要素選択のためのカスタム安定識別子を作成してください Adoptエディターを使用している要素に；
このページにはSAP SuccessFactorsアプリケーションでのShadow DOMセレクターの検出と設定のユースケースが含まれています。
以下は、SAP SuccessFactors内でShadow DOMを使用している要素やエリアの具体的な例です。 配役や現在のURLに基づき、従業員は以下の項目を異なって見ることがあります。
このボタンのテキストはページ間で異なるが、必要な属性データは一貫しています。 Adoptで重要なページをターゲットにすることで、設定が正しいページにのみ表示されるようにします。
メニューボタンの安定したセレクターを追加するには、ブラウザから次のステップで：
ウェブアプリケーション内からAdoptエディターを開く。
ガイドコンポーネント（ステップ、ツールチップなど）を作成する そして、ウェブページ上の要素を選択。
または、既存のガイドコンポーネントのプロパティにアクセスする。
位置プロパティタブを開きます：
Element JSPathをElement locationの下で見つけてください。
データ内の既存のエレメントJSPathを置き換える：
[data-ui5-stable='sf-header-shellbar'],ui5-shellbar-sf-header#shellbar[data-ui5-stable='shellbar'],* *[data-ui5-stable='menu']
下の画像のように、従業員がメニューを選択すると、いくつかの項目が利用可能になります。 この領域はシャドウDOMツリー内に含まれます。
メインメニュードロップダウン内の任意の項目に安定したセレクターを追加するには：
アプリケーション内からAdopt Editorを開きます。
ガイドコンポーネント（ステップ、ツールチップなど）を作成 そして、ウェブページ上の要素を選択します。
あるいは、既に存在するガイドコンポーネントのプロパティにアクセスします。
位置プロパティタブを開いて：
要素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"]
コンポーネントの完了にクリックトリガーを使用する場合、次の要素JSPathセレクターをその領域に追加します。
以下のテーブルでは、SAP SuccessFactorsアプリケーションのメニュードロップダウン内の全項目に要求されるカスタム要素JSPathセレクターを紹介します。
これらの要素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"]
ほとんどのシステム領域には、トップメニューセクションに一連のタブが用意されています。 これらの利用可能なタブはシャドウDOMツリー内にあります；
ブラウザーからメニュータブの安定したセレクターを追加するには：
アプリケーション内からAdopt Editorを開きます。
ガイドコンポーネント（ステップ、ツールチップなど）を作成 そして、ウェブページ上の要素を選択します。
あるいは、既に存在するガイドコンポーネントのプロパティにアクセスします。
位置プロパティタブを開いて：
要素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アプリケーションのメニュータブに必要なカスタム要素JSPathセレクターを紹介します。
これらの要素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']
