コントローラーを使用した UI ビルダー ページへのデータのバインド (高度な機能)
コントローラーは、データとイベントロジックのリンクを単純化して、UI ビルダーでコンポーネントのプリセットを有効にします。
コントローラーにより、ページ作成者は UI ビルダー の自分のページに、データとスクリプトを簡単に接続できます。コントローラーは、コンポーネントプリセットがデータをコンポーネントにバインドするために使用する一種のデータリソースです。コントローラーは、コンポーネントのプリセットを有効にするデータとイベントロジックが含まれている点で、他のデータリソースとは異なります。コントローラーはサーバーからコンポーネントにデータを取り込み、コンポーネントとのやり取りに基づいて、更新されたデータをサーバーに戻します。コンポーネントのプリセットの詳細については、「プリセットを使用してコンポーネントを自動的に構成する」を参照してください。
UI ビルダーのデータコントローラーのタイプ
- データコントローラー
- データコントローラーは、UI ビルダー ページに表示する情報を決定します。データコントローラーは、データリソースを使用してリアルタイムで情報を同期し、ユーザーが情報を入力するとデータ/テーブルを更新します。データコントローラーをページに手動で追加できます。
- UI コントローラー
- UI コントローラーは、UI ビルダー ページテンプレートを使用するときにページに追加され、手動で追加することはできません。
UI ビルダーのプリセットのあるコントローラーの使用
1 つの UI ビルダー ページに複数のコントローラーを追加できますが、同じコントローラーを 2 回使用することはできません。コントローラーを必要とするコンポーネントプリセットを使用しようとすると、UI ビルダー にはコントローラーの追加を求めるプロンプトが表示されます。
すべてのコンポーネントがコントローラーで動作するわけではありませんが、コンポーネントライブラリでどのコンポーネントが動作するかを簡単に確認できます。UI ビルダー ページにコントローラーが構成されている場合は、コンポーネントライブラリを開いて、どのコンポーネントにプリセットがあるかを確認できます。プリセットが利用可能なコンポーネントは、コンポーネントライブラリでハイライト表示されます。
コントローラーの追加
コンポーネントのプリセットを使用するには、データコントローラーをページに追加します。
始める前に
必要なロール：admin
このタスクについて
レコードコントローラーは、Yokohama のページに追加できる唯一のコントローラーです。
手順
-
[データリソース] を選択します。
-
[追加] を選択します。
-
フィールドに入力して、コントローラーを構成します。
タスクの結果
フォームコントローラーが [データリソース] セクションに表示されます。
コントローラーの編集
テーブルからデータをプルするようにコントローラーを構成します。
始める前に
必要なロール：admin
手順
-
[データおよびスクリプト (Data and scripts)] ドロワーで編集するコントローラーを選択します。
コントローラーの削除
UI ビルダー で不要になったコントローラーを削除します。
始める前に
必要なロール：admin
このタスクについて
ページテンプレートで作成されたページからは、コントローラーを削除できません。
手順
-
削除するコントローラの横にあるメニューアイコン (
) を選択します。
-
[削除] を選択します。
コントローラーがローカルデータリソースインスタンスから削除されます。
コントローラー API でのプロパティとイベントの表示
コントローラーのパブリック API は、コントローラーがプリセットに提供する出力データを定義します。これには、プリセットが選択されたときにコンポーネントによって使用されるプロパティ値と処理済みイベントが含まれます。プロパティとイベントの情報は UI ビルダーで表示できます。
プリセットのコンポーネントプロパティ値は、静的な値またはコントローラー出力データのパスにすることができます。UI ビルダーのデータリソースインスペクターを使用して、プリセットで使用されるコントローラーデータ構造からの値を表示できます。プリセット内のイベントによって伝達されるペイロードを表示するには、そのイベントのイベントハンドラーピッカーを確認することができます。
コントローラー API でのプロパティの表示
事前設定されたプロパティは UIB データインスペクターで表示できます。使用可能な値を把握しておくと、コンポーネントが設計内でどのように動作するかを理解し、上書きできるプリセットプロパティを特定する際に役立ちます。
この手順は、プリセットがあるコンポーネントをページに配置し、コントローラーが構成済みであることを前提としています。手順については、「コントローラーの追加」を参照してください。
[構成] タブには、事前設定されたプロパティ値がコントローラー出力へのパスとして表示されます。基本のデータパスは @data.<controller_name> と表されます。パスの残りの部分は、コントローラーデータ階層内のカテゴリの内容を使用してビルドされます。このパスを使用して、コントローラーが構成されているレコードの現在の値を表示できます。
- コンポーネントのデータリソースを表示するには、左下のサイドバーでデータアイコンを選択します。
3 列の UIB データインスペクターが表示されます。
- データリソースがリストされている最初の列で、出力を表示するコントローラーを選択します。選択したコントローラーの構成データが 2 列目の [構成] タブに表示されます。これらは、ページに配置したプリセットを使用して最初のコンポーネントのコントローラーを構成したときに入力した入力プロパティです。必要に応じて、これらの接続値を編集できます。注:[Sys ID] フィールドの値として -1 を設定すると、新しいレコードのコントローラーが構成されます。次にコントローラーは、完全な GUID を生成します。これは、レコードを保存する前に、レコードに対するデータを格納するために使用できます。これにより、添付ファイルの保存など、新しく作成されたレコードでアクションを実行できます。
- 3 列目で [トップレベルの出力 (top level outputs)] を選択します。
これは、コントローラーデータ階層の親レベルであり、プリフィックス
@data.、それに続くコントローラー ID で示されます。この組み合わせにより、データへのルートパスが形成されます。トップレベルの出力に含まれるデータは、隣接するコードフィールドに表示されます。これらは、プリセットとスクリプトで使用できます。そのレベルの他のプロパティは、すべてのレコードに適用される共通プロパティです。プリセットがコンポーネントプロパティをコントローラー出力にマップすると、値の代わりに出力へのパスが表示されます。パスは @data.<コントローラー ID>.<トップレベルから出力プロパティへのパス> として示されます。これを値として、または式の一部として使用できます。
この例では、プリセットのマッピングによって
@data.gform.tableへのパスが得られます。 - トップレベルの下のデータを表示するには、プリセットプロパティ値のパスで示される子カテゴリを選択します。
子カテゴリの名前は
@data.<controller ID>.<category>としてパスに表示されます。そのカテゴリのデータが当該パスに追加されます。コードフィールドの上にあるルートパスは、使用されている子カテゴリを示します。この例では、formカテゴリの view プロパティへのパスは@data.gform.form.viewとして表されます。そのプリセット値は、workspace ビューにフォームを表示します。この例では、複数のコントローラー出力プロパティを式で使用してオブジェクトをビルドしています。
- スクリプト化されたプロパティ値を表示するには、プロパティの横にあるロックアイコンを選択します。
これにより、プロパティが編集モードになり、スクリプトを編集するためのモーダルが開きます。
コントローラー API でのイベントの表示
- UI ビルダーで [イベント] タブを選択します。
- プリセットイベントのマッピングを表示するには、イベントタイルを選択します。
プリセットイベントのペイロードプロパティを示すモーダルが表示されます。このモーダルでイベントを無効にすることができます。
- イベントにイベントハンドラーを追加するには、イベントタイルの下にある [+ イベントハンドラーを追加] を選択します。
利用可能な処理済みイベントのリストを示すモーダルが表示されます。リストから、リストされているいずれかのコントローラーのイベントハンドラーを含む任意のアクションを選択できます。
- リストからイベントハンドラーを選択し、[追加] を選択します。
新しいハンドラーがイベントタイルの下に一覧表示されます。