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

  • リリースバージョン: Yokohama
  • 更新日 2025年01月30日
  • 所要時間：4分

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

    始める前に

    必要なロール：admin、ui_builder_admin

    手順

    1. 次のように移動する。 All (すべて) > 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」を参照してください。
      ランディングパス ランディングパスは、ユーザーがエクスペリエンスホームページにアクセスするために使用するプリフィックスです。デフォルトでは、エクスペリエンス名と一致します。ページをホームページとして指定するには、一致するパスを持つページを作成する必要があります。
      ロール これらのロールがアサインされているユーザーのみがエクスペリエンスにアクセスできます。このフィールドを空のままにすると、ログインしているすべてのユーザーがデフォルトでエクスペリエンスを利用できるようになります。
    4. [Create (作成)] を選択します。
    5. 新しい UI ビルダー エクスペリエンスで、[新しいページの作成] を選択します。

      [テンプレートを選択してください] 画面が表示されます。

    6. [標準レコード] テンプレートを選択し、[テンプレートを使用] を選択します。
    7. ページの詳細を設定します。
      名前 ページの名前。
      URL パス ユーザーがページにアクセスするために移動する URL パス。
    8. [続行] を選択します。
    9. ページのテスト URL パラメーターを追加します。
      注:
      すべてのプレイブックでは、少なくとも 1 つのテーブルと sysId をコントローラーにハードコードするか、URL を介して指定する必要があります。
      表 : 1. 必要なパラメーター
      テーブル プレイブックの親テーブルの名前。
      sysID レコードの Sys_id。存在しないレコードの場合、値は -1 です。
      表 : 2. オプションのパラメーター
      クエリ レコードジェネレーターに指定されたクエリをオプションで上書きするエンコードされたクエリ文字列。
      extraParams ページに追加のパラメーターを渡します。
      ビュー プレイブックアクティビティをスタックモードまたは集中モードでレンダリングするために使用される表示モード。
      selectedTabIndex デフォルトでページが開くタブ。
    10. デフォルトのページバリアントを設定します。
      名前 ページバリアントの名前。
      対象者 ページバリアントを表示できるユーザー。次のように定義できます。
      • ロール
      • グループ
      • ユーザー
      • 会社
      • 部門
      • ロケーション
      • スクリプト
      条件 ページのバリアントを表示するタイミングを決定する条件。
      ページとデフォルトバリアントが作成されます。
    11. 成功メッセージで、[エディターで開く] を選択して、UIB エディターで新しいページを開きます。
    12. コンポーネントツリーで、[メインタブ] を選択します。
      [メインタブ] パネルが右側に開きます。
    13. [構成] タブの [タブ] セクションで、[+ 追加] を選択します。
      「このタブをどのようにビルドしますか？」と尋ねるモーダルが表示されます。
    14. [空のコンテナーから開始] を選択して [次へ] をクリックします。
      [タブの設定] モーダルが表示されます。
    15. タブに名前とアイコンを付け、[作成] をクリックします。
      タブがコンポーネントツリーに追加され、空白のキャンバスが表示されます。
    16. コンポーネントツリーの新しいタブで、[+ コンポーネントを追加] を選択します。
      ツールボックスが開きます。
    17. ツールボックスの検索バーに「bundle」と入力します。
      利用可能なバンドルが表示されます。
    18. ページに追加するバンドルを選択します。

    タスクの結果

    バンドルとそのすべてのコンポーネント、プリセット、およびコントローラーを新しい UI ビルダー 標準レコードページに追加しました。

    バンドルコンテナの幅がコンポーネントの min-width に設定されている場合は、コンテナの min-width を 100% に設定します。

    バンドルコンテナの [スタイル] タブのサイジング設定

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


    バンドルコンテナの [スタイル] タブのレイアウト設定

    次のタスク

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