カスタムレイアウトの開始

  • リリースバージョン: Washingtondc
  • 更新日 2024年02月01日
  • 読む5読むのに数分

    • UI ビルダー ページを設定し、プレイブックエクスペリエンス でカスタムレイアウト用のモジュール式 Playbook カスタムレイアウトのコンポーネントの構成を開始します。

    始める前に

    このタスクについて

    UI ビルダー ページを作成した後、必要に応じて プレイブックエクスペリエンス ページをカスタマイズできます。ページテンプレートには、コンポーネントプリセットで使用できるコントローラー (プレイブック テンプレートなど) が含まれています。詳細については、「Bind data to UI Builder pages using controllers (advanced feature)」を参照してください。

    手順

    1. 移動先 すべて > Now Experience フレームワーク > UI ビルダー.
    2. 作業する UI Builder エクスペリエンスを開くか、新しいエクスペリエンスを作成します。
      Playbook Experience ビルダーエクスペリエンスは、プレイブックエクスペリエンス をカスタマイズするために作られています。エクスペリエンスの作成方法の詳細については、「Configure how users interact with your applications in UI Builder」を参照してください。
    3. UI Builder エクスペリエンスでは、ページを最初から 作成する、ページを標準レコードテンプレートから作成する、またはページを プレイブックエクスペリエンス テンプレートから作成することができます。
      プレイブックエクスペリエンス テンプレートを使用すると、Playbook カスタムレイアウト UI コントローラーとコンポーネントが既にすべてのページに追加されているため、開発プロセスの速度が向上します。コントローラーは、提供されたすべてのコンポーネントにデータを自動的に入力します。
      注:
      テンプレートを使用する場合でも、カスタムコンポーネントを作成して追加することができます。

      プレイブック テンプレートを選択します。
    4. プレイブックエクスペリエンス テンプレートを使用している場合は、ページを作成します。
      新しい プレイブックエクスペリエンス レイアウトには、データが設定されたコントローラーとコンポーネントが既に含まれていますが、いくつか設定を行う必要があります。残りの設定を行うには、ステップ 6 に進みます。
    5. [標準レコード] テンプレートを使用した場合、またはページを最初から作成した場合は、Playbook カスタムレイアウト UI コントローラーをページに追加します。
      1. 新しいページの左下隅から、データリソースパネル を開きます。
      2. [+ 追加] を選択します。
      3. 「Playbook」を検索します。
      4. [データリソース] で [Playbook カスタムレイアウト UI コントローラー (Playbook Custom Layout UI Controller)] を選択し、[追加] をクリックします。
    6. Playbook カスタムレイアウト UI コントローラーを構成します。
      1. データリソースパネルの [ローカルデータリソースインスタンス] で、[UI コントローラーレコードページ] を選択します。
      2. [構成] タブで、[親 SysID] または [親テーブル] を追加します。
        [親テーブル ] フィールドには「context.props.table」、[親 SysID] フィールドには「context.props.sysId」と入力できます。
        注:
        入力するテーブルまたはレコードに プレイブック が含まれていることを確認してください。
      3. 使用する Playbook Experience を追加します。
      4. オプション: 必要に応じて他のフィールドに値を入力します。
      コントローラーが構成され、プレイブック コンポーネントを追加する準備ができました。
    7. プレイブック のコンポーネントを追加します。
      1. コンポーネントツリーで、[メインタブ] を選択します。
        [メインタブ] パネルが右側に開きます。
      2. [メインタブ] パネル で、[+ 追加] を選択します。
        「このタブをどのように構築しますか？」と尋ねるモーダルが表示されます。
      3. [空のコンテナーから開始] を選択して [次へ] をクリックします。
        [タブの設定] モーダルが表示されます。
      4. タブに名前とアイコンを付け、[作成] をクリックします。
        タブがコンポーネントツリーに追加され、空白のキャンバスが表示されます。
      5. コンポーネントツリーの新しいタブで、「サイズ変更可能」の [+ コンポーネントを追加] の検索を選択します。
      6. [サイズ変更可能なペイン] コンポーネントを選択して名前を付け、[作成] をクリックします。
      7. コンポーネントツリーで、新しく作成した [サイズ変更可能なペイン] コンポーネントを開きます。
        新しい [サイズ変更可能なペイン] のパネルが右側に表示されます。
      8. 必要に応じて設定し、右上隅の [保存] をクリックします。
      9. ステージピッカーを追加するには、コンポーネントツリーで先ほどの新しい [サイズ変更可能なペイン] コンポーネントを見つけて、左側の下にある [+ コンポーネントを追加] を選択します。
      10. コンポーネントツリーで、新しいステージピッカーを選択します。
        新しいステージピッカーのパネルが右側に表示されます。
      11. Playbook カスタムレイアウト UI コントローラーからこのコンポーネントのプリセットを選択し、右上隅の [保存] をクリックします。
        確認メッセージが表示され、ステージピッカーパネルの [イベント] タブにコンポーネント入力とイベントが自動的に入力されます。

      12. Playbook アクティビティビューアーを追加するには、コンポーネントツリーで [サイズ変更可能なペイン] コンポーネントを見つけて、右の下にある [+ コンポーネントを追加] を選択します。
      13. 手順 7j と 7k を繰り返します。
      14. Playbook モーダルを追加するには、コンポーネントツリーのメインタブで作成したタブを見つけて、 [+ コンポーネントを追加] を選択します。
      15. Playbook モーダルに対してステップ 7j と 7k を繰り返します。
      16. Playbook ステージピッカーに戻り、ステージピッカーの向きを決定します。
      17. 右上隅の [開く] をクリックして、プレイブック のレイアウトをプレビューします。
      18. UI ビルダー に戻ります。
      19. ユーザーが標準の新しいレコード フォームではなく、このカスタマイズされた プレイブックエクスペリエンス フォームで新しいレコードを作成できるようにするには、左上の 対話 を開き、 sysID フィールドを -1 に更新して、[ 適用] をクリックします。
        プレビューを開くと、レコードジェネレーターフォームを使用できます。レコードジェネレーターフォームをテストし、新しいレコードが作成されることを確認できます。
      20. コンポーネントツリーのステージピッカーに戻り、右側に開いたパネルでステージピッカーの向きを決定します。