学ぶ (英語版)
ドキュメント (英語版)
サポート (英語のみ)
コミュニティ (英語版)

使用例: SAPアプリケーションのShadow DOMセレクター設定

Shadow DOMは、ウェブアプリケーションにおいてウェブ要素に個別のドキュメントオブジェクトモデル（DOM）ツリーを取り付け、カプセル化する技法です。これにより、ページ上で実行されているその他のJavaScriptやCSSに影響されることはありません。

Shadow DOMを使用する要素の場合、Nexthink Applicationsでセレクターフレームワークを定義するときやガイドビジュアルコンポーネント（ステップ、ツールチップなど）を取り付ける際には、要素選択のためのカスタム安定識別子を作成してください Adoptエディターを使用している要素に；

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

SAP SuccessFactorsの中でShadow DOMを使用している要素/エリア

以下は、SAP SuccessFactors内でShadow DOMを使用している要素やエリアの具体的な例です。 配役や現在のURLに基づき、従業員は以下の項目を異なって見ることがあります。

Adoptエディターを使用してメニューボタンのセレクターを設定する

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

メニューボタンの安定したセレクターを追加するには、ブラウザから次のステップで：

  1. ウェブアプリケーション内からAdoptエディターを開く。

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

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

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

    • Element JSPathをElement locationの下で見つけてください。

    • データ内の既存のエレメント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. ガイドコンポーネント（ステップ、ツールチップなど）を作成 ウェブページの要素を選択します。

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

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

    • 要素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"]

コンポーネントの完了にクリックトリガーを使用する場合、次の要素JSPathセレクターをその領域に追加します。

Preview the selection to make sure it is correct before saving the step

メニュードロップダウン内の全項目に対するサンプルセレクター

以下のテーブルでは、SAP SuccessFactorsアプリケーションのメニュードロップダウン内の全項目に要求されるカスタム要素JSPathセレクターを紹介します。

これらの要素JSPathセレクターを使用するには、上記で説明されている手順と同じ手順に従ってください。

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

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

  3. 位置プロパティタブを開いて次を行います：

    • 要素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アプリケーションのメニュータブに必要なカスタム要素JSPathセレクターを紹介します。

これらの要素JSPathセレクターを使用するには、上記で説明した手順に従ってください。

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']

Last updated

Was this helpful?