---
sourceDocument: Yokohama 従業員サービス管理 (ESM)
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ja-JP/yokohama/employee-service-management

 Release :

    - yokohama

ft:locale :

    - ja-JP

ft:publication_title :

    - Yokohama 従業員サービス管理 (ESM)

ft:clusterId :

    - emplsm

bundleId :

    - emplsm

workflow :

    - Employee


---

# 義務レビューの設定

# プレイブックの義務レビューの構成 {#ariaid-title1}

* リリースバージョン: Yokohama
* 
* 更新日 2025年11月26日
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 所要時間：2分

ビューポートコンポーネントを使用してプレイブックに義務レビューコンテンツを動的にロードするページを UI ビルダー で作成します。

## 始める前に

必要なロール：アドミン

## 手順

1. 移動先 すべてNow Experience フレームワークUI ビルダー.
2. \[エクスペリエンス\] タブを選択します。
3. ワークスペースを開きます。
4. \[+\] アイコンを選択して、新しいページを作成します。  
   図 : 1. ページとバリアントの作成
5. \[代わりに最初から作成します\] を選択します。
6. フォームの \[名前\] フィールドに<kbd class="ph userinput">レビュー義務リスト</kbd>を入力します。  
   URL パスは <kbd class="ph userinput">review-obligation-list</kbd> で自動的に更新されます。
7. \[よさそうです\]を選択します。
8. 残りの手順を実行して、ページを作成します。  
   詳細については、「[Create a page in UI Builder](https://www.servicenow.com/docs/access?context=create-page&version=yokohama&pubname=yokohama-application-development&ft:locale=en-US)」を参照してください。
9. ページのビューポートコンポーネントを追加します。  
   ビューポートの追加の詳細については、「 [Add a viewport component to your page](https://www.servicenow.com/docs/access?context=work-with-viewport-components&version=yokohama&pubname=yokohama-application-development&ft:locale=en-US)」を参照してください。
   1. 構成パネルで、\[ + 追加 \] を選択して、 契約管理の Now Assist ページコレクションを添付します。
   2. \[ URL パラメーターが追加されたデフォルト構成を適用\] を選択し、\[完了\] を選択します。
   {#cmpro-add-obligation-playbook__substeps_ixj_pwy_khc}
10. ページのクライアントスクリプトを作成します。  
    クライアントスクリプトの追加の詳細については、「 [Define and bind client scripts to components](https://www.servicenow.com/docs/access?context=define-client-scripts&version=yokohama&pubname=yokohama-application-development&ft:locale=en-US)」を参照してください。
    1. \[クライアントスクリプト\] の横にある \[+\] を選択します。
    2. スクリプトに名前を付けます。  
       説明的な名前を付けると、スクリプトの実行内容を把握しやすくなります。また、後でイベントハンドラーに追加するときにスクリプトを見つけやすくなります。
    3. 次のスクリプトを追加します。  

           function handler({api, event, helpers, imports}) {

           api.emit("MACROPONENT_VIEWPORT_LOAD_REQUESTED", {

           viewportElementId: 'viewport_1',

           route: 'review-obligations',

           fields: {

           'cntrSysId': api.context.props.sysId,

           'diTaskSysId': api.context.props.diTaskSysId

           },

           params: {}

           });

           }

    4. \[適用\] を選択します。
    {#cmpro-add-obligation-playbook__substeps_ozm_5xy_khc}
11. 本文コンポーネントを選択し、\[ページ構成\] の下の \[イベント\] タブを選択します。  
    図 : 2. ページの \[イベント\] タブ
    1. \[ページ準備完了\] セクションで \[ハンドラーを追加\] を選択します。
    2. ステップ 10 で作成したクライアントスクリプトを選択します。
    3. \[続行\] を選択します。

    {#cmpro-add-obligation-playbook__substeps_mtt_fmm_lhc}  
    クライアントスクリプトは、ページ準備完了イベントにバインドされます。ページがロードされると、このイベントハンドラーは自動的にクライアントスクリプトを実行します。
12. **オプション:** フォーム コントローラー が \[データリソース\] で利用可能な場合は、削除します。
13. \[設定\] の \[全般\] タブに移動し、\[必須パラメーター\] で \[table\]、\[sysId\]、および \[diTaskSysId\] が使用可能であることを確認します。  
    パラメーターが利用できない場合は、手動で追加します。ページ設定の変更の詳細については、「 [Edit page variant settings](https://www.servicenow.com/docs/access?context=edit-variant-settings&version=yokohama&pubname=yokohama-application-development&ft:locale=en-US)」を参照してください。