---
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) 所要時間：1分

UI ビルダー のタブコンポーネントを使用して、ワークスペースの契約リポジトリレコードページの \[プレイブック\] タブを構成します。

## 始める前に

必要なロール：アドミン

## 手順

1. 移動先 すべてNow Experience フレームワークUI ビルダー.
2. \[エクスペリエンス\] タブを選択します。
3. ワークスペースを開きます。
4. \[ プレイブック \] タブを構成するワークスペースのページを選択します。  
   図 : 1. ワークスペースのページとバリアント
5. メインタブコンポーネントを選択します。  
   図 : 2. 左ペインのメインタブコンポーネント
6. \[タブ\] セクションの \[追加\] を選択します。
7. ポップアップウィンドウで、\[ 空のコンテナーから開始\] を選択します。
8. \[次へ\] を選択します。
9. フォームで、フィールドに入力します。
   1. \[ タブラベル\] フィールドに「 <kbd class="ph userinput">Playbook</kbd>」と入力します。  
      \[ タブ ID\] フィールドは自動的に更新されます。
   2. \[ 非表示\] タブで、フィールドにカーソルを合わせ、プレイブック用に構成されたデータブローカーをバインドするオプションを選択します。  
      詳細については、「[Connect data to your components](https://www.servicenow.com/docs/access?context=connect-data&version=yokohama&pubname=yokohama-application-development&ft:locale=en-US)」を参照してください。図 : 3. データブローカーをタブコンポーネントに接続
   3. \[作成\] を選択します。

   {#cmpro-confg-playbook-comp__substeps_qyl_zk5_khc}  
   新しいタブが \[メインタブ \] コンポーネントの下に表示されます。図 : 4. \[Playbook (プレイブック)\] タブ
10. \[ Playbook (プレイブック )\] を展開し、\[ Add content (コンテンツの追加)\] を選択します。
11. \[コンテンツを追加\] ウィンドウで、\[ プレイブック垂直フォーカス \] を選択し、\[ 追加\] を選択します。  
    図 : 5. プレイブックコンテンツを追加
12. データリソースドロワーの \[データとスクリプト\] セクションで、\[ プレイブックカスタムレイアウト\] を選択します。  
    図 : 6. プレイブックのカスタムレイアウト  
    プレイブック構成モーダルが表示されます。
13. \[ 構成 \] タブで、次の操作を行います。
    1. \[親 SysID\] で、\[`プロパティ`\] の下にあるレコード sysid を選択します。
    2. \[ 親テーブル\] で、\[ `プロパティ`\] の下にあるレコードテーブルを選択します。
    3. プレイブックエクスペリエンスで、\[<kbd class="ph userinput">契約メタデータ抽出プレイブック</kbd>\] を選択します。
    {#cmpro-confg-playbook-comp__substeps_tvh_2s5_khc}
14. UI ビルダーヘッダーの \[保存\] を選択します。