サポート (英語のみ)

使用例: 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 ツリー内に含まれています。

Example of Shadow DOM elements within the Menu drop-down list

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

  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セレクターを追加します。

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

メニュードロップダウン内の全アイテムのためのセレクター例

以下の表には、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ツリー内に存在します。

Example of Shadow DOM within Menu tabs on the Job Requisitions page

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

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

Last updated

Was this helpful?