---
sourceDocument: Yokohama ビルドのワークフロー
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ja-JP/yokohama/build-workflows

 Release :

    - yokohama

ft:locale :

    - ja-JP

ft:publication_title :

    - Yokohama ビルドのワークフロー

ft:clusterId :

    - crworkflow

bundleId :

    - crworkflow

workflow :

    - Creator


---

# UI ビルダー 標準レコードページへのカスタムレイアウトバンドルの追加

# UI ビルダー 標準レコードページへのカスタムレイアウトバンドルの追加 {#ariaid-title1}

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

プレイブックカスタムレイアウトバンドルを新規または既存の UI ビルダー 標準レコードページに追加します。

## 始める前に

必要なロール：admin、ui_builder_admin

## 手順

1. 移動先 すべてNow Experience フレームワークUI ビルダー.
2. 右上の \[+ 作成\] を選択して、新しいエクスペリエンスを作成します。
3. エクスペリエンスのフィールドに入力します。

   | オプション | 説明 |
   | 名前 | この名前は、内部でエクスペリエンスを追跡するために使用されます。エクスペリエンス名は、\[browser (ブラウザー)\] タブからユーザーも確認できます。 |
   | URL パス | URL パスは、ユーザーがエクスペリエンスにアクセスするために使用するプリフィックスです。デフォルトでは、エクスペリエンス名と一致します。このパスは、UI ビルダー で今すぐまたは後で編集できます。 サポートされている文字には、数字 (0 〜 9)、文字 (A ～ Z、a ～ z)、記号 ($-_!\*(),) などがあります パスをスラッシュ (/) で終わらせることはできません。 |
   | アプリシェル UI | \[UXR Base Experience Shell\] を選択します。 アプリシェルはページコンテンツのラッパーであり、Web ページの機能に似ています。アプリシェルでは、会社のロゴ、ユーザー設定、検索アイコンなどを表示できます。アプリシェルオプションの詳細については、「[Define UI experiences using app shells](https://www.servicenow.com/docs/access?context=app-shells-uibuilder&version=yokohama&pubname=yokohama-application-development&ft:locale=en-US)」を参照してください。 |
   | ランディングパス | ランディングパスは、ユーザーがエクスペリエンスホームページにアクセスするために使用するプリフィックスです。デフォルトでは、エクスペリエンス名と一致します。ページをホームページとして指定するには、一致するパスを持つページを作成する必要があります。 |
   | ロール | これらのロールがアサインされているユーザーのみがエクスペリエンスにアクセスできます。このフィールドを空のままにすると、ログインしているすべてのユーザーがデフォルトでエクスペリエンスを利用できるようになります。 |
   |-|-|

   {#add-custom-layout-bundle-uib-standard-record__choicetable_jwq_jdh_x1c}
4. \[Create (作成)\] を選択します。
5. 新しい UI ビルダー エクスペリエンスで、\[新しいページの作成\] を選択します。  
   \[テンプレートを選択してください\] 画面が表示されます。
6. \[標準レコード\] テンプレートを選択し、\[テンプレートを使用\] を選択します。
7. ページの詳細を設定します。  

   |-|-|
   | 名前 | ページの名前。 |
   | URL パス | ユーザーがページにアクセスするために移動する URL パス。 |
   [ ]

   {#add-custom-layout-bundle-uib-standard-record__table_grl_ch1_x1c}
8. \[続行\] を選択します。
9. ページのテスト URL パラメーターを追加します。  
   注:  
   すべてのプレイブックでは、少なくとも 1 つのテーブルと sysId をコントローラーにハードコードするか、URL を介して指定する必要があります。

   |-|-|
   | テーブル | プレイブックの親テーブルの名前。 |
   | sysID | レコードの Sys_id。存在しないレコードの場合、値は -1 です。 |
   [表 : 1. 必須パラメーター]

   {#add-custom-layout-bundle-uib-standard-record__table_gp1_s4h_x1c}

   |-|-|
   | クエリ | レコードジェネレーターに指定されたクエリをオプションで上書きするエンコードされたクエリ文字列。 |
   | extraParams | ページに追加のパラメーターを渡します。 |
   | ビュー | プレイブックアクティビティをスタックモードまたは集中モードでレンダリングするために使用される表示モード。 |
   | selectedTabIndex | デフォルトでページが開くタブ。 |
   [表 : 2. オプションのパラメーター]

   {#add-custom-layout-bundle-uib-standard-record__table_lnh_x4h_x1c}
10. デフォルトの[ページバリアント](https://www.servicenow.com/docs/access?context=create-variant&version=yokohama&pubname=yokohama-application-development&ft:locale=en-US)を設定します。  

    |-|-|
    | 名前 | ページバリアントの名前。 |
    | 対象者 | ページバリアントを表示できるユーザー。次のように定義できます。 * ロール * グループ * ユーザー * 会社 * 部門 * 場所 * スクリプト {#add-custom-layout-bundle-uib-standard-record__add-audiences_ul_ayn_3jx_snb} |
    | 条件 | ページのバリアントを表示するタイミングを決定する条件。 |
    [ ]

    {#add-custom-layout-bundle-uib-standard-record__table_frz_wd3_q1c}  
    ページとデフォルトバリアントが作成されます。
11. 成功メッセージで、\[エディターで開く\] を選択して、UIB エディターで新しいページを開きます。
12. コンポーネントツリーで、\[メインタブ\] を選択します。  
    \[メインタブ\] パネルが右側に開きます。
13. \[構成\] タブの \[タブ\] セクションで、\[+ 追加\] を選択します。  
    「このタブをどのようにビルドしますか？」と尋ねるモーダルが表示されます。
14. \[空のコンテナーから開始\] を選択して \[次へ\] をクリックします。  
    \[タブの設定\] モーダルが表示されます。
15. タブに名前とアイコンを付け、\[作成\] をクリックします。  
    タブがコンポーネントツリーに追加され、空白のキャンバスが表示されます。
16. コンポーネントツリーの新しいタブで、\[+ コンポーネントを追加\] を選択します。  
    ツールボックスが開きます。
17. ツールボックスの検索バーに「bundle」と入力します。  
    利用可能なバンドルが表示されます。
18. ページに追加するバンドルを選択します。

## タスクの結果

バンドルとそのすべてのコンポーネント、プリセット、およびコントローラーを新しい UI ビルダー 標準レコードページに追加しました。
バンドルコンテナの幅がコンポーネントの min-width に設定されている場合は、コンテナの min-width を 100% に設定します。

または、新しいバンドルタブの flex-direction を column に設定することもできます。

<br />

## 次のタスク

テスト値とコントローラー入力を編集します。