フォーム上のポジション制御

webフォームにコントロールを配置するためのオプションが多数あります。

行および列

デフォルトでは、行と列の任意のパレットからwebフォームにコントロールをドロップして配置できます。行と列は、コントロールをドロップする場所に基づいて定義されます。

各行に上部と下部にドロップ・ターゲットがあります。
各列には、左と右にドロップ・ターゲットがあります。

キャンバスにコントロールをドロップするたびに、コントロールは新しい行に配置されます。コントロールを別のコントロールの横にドロップすると、そのコントロールは新しい列には同じ行に追加されます。列のサイズは行内のコントロールの数によって決まります。

この行は12-columnグリッド・システムに基づいています。たとえば、行に4つのコントロールがある場合、それぞれに3つの列が使用されます。 12より多いコントロールが行に追加されると、表の下に残りのコントロールが表示されます。

パネル、セクションおよびタブ

パネル、セクションおよびタブを使用して、様々なコントロールを1つのコントロール内でグループ化できます。

「パネル」コントロールは、その内部にある複数のコントロールをグループ化できます。パネル内でコントロールをドラッグ・アンド・ドロップし、キャンバスの場合と同様に配置します。

セクション・コントロールはパネルに似ていますが、これは折りたたみ可能です。セクション・コントロールを使用すると、ユーザーが展開したり折りたたんだりできるコントロールのグループを作成できます。フォームのロード時に展開されたセクションを表示するには、一般タブで「展開」を選択します。フォームのロード時に縮小されたセクションを表示するには、「展開」を選択解除します。セクション・コントロール内には、パネルや別のセクション・コントロールを含め、その他のコントロールをドラッグ・アンド・ドロップできます。

タブ・コントロールを使用すると、コントロールをいくつかの異なるタブにグループ化し、Webフォームにタブ付きビューを作成できます。デフォルトでは、タブ・コントロールをwebフォームにドラッグすると1つのタブが作成されます。別のタブを追加するには、「タブの追加」をクリックします。既存のタブの右側に新しいタブが追加されます。タブの順序を変更するには、タブを他のタブの右または左にドラッグします。携帯電話などの小さなデバイスでは、スペース内のコンテンツに対応するためのアコーディオンとしてタブが表示されます。パネル、セクションおよび表などの他のコントロールを個々のタブにドラッグ・アンド・ドロップできます。タブを選択すると、現在選択しているタブ内のコントロールのみが表示されることになります。

ノート:

パネル、セクションまたはタブを削除すると、パネル、セクション、またはタブ内にグループ化されたすべてのコントロールも削除されます。

「パネル、セクションまたはタブへのコントロールの配置」を参照してください。

表および繰返し可能なセクション

表コントロールを使用すると、Webフォーム内のスペースを節約できます。表コントロールでは、フォーム・コントロールをグリッド・パターンで配置できます。表に列を追加し、各列に1つのコントロールを追加できます。表の列を削除すると、その列に含まれるコントロールもすべて削除されます。

表をキャンバスにドロップする際に自動バインドが選択されている場合は、データ定義内の新規エントリが生成されます。この属性は、オブジェクト・タイプの配列です。コントロールが列にドロップされるたびに、そのリスト内の属性が追加されます。

自動バインディングを選択しなかった場合は、データ定義から属性を選択できます。表内のコントロールはフォーム・データ定義の任意の属性にバインドできます。フォームをレンダリングする場合、そのコントロールのデータがフェッチされて表示されます。ただし、1行の値を変更しても、すべての行が更新されるわけではありません。また、フォームの送信時に、その属性にバインドされている最後のコントロールは、ペイロードを更新するコントロールです。

外部ソースを選択して、その表から情報を取得することもできます。この場合、バインディングからの情報はスキップされ、データはコネクタ・コールによってフェッチされます。フォームの送信時にペイロードが、表の最新データで変更されます。つまり、コネクタはデータおよびユーザー変更をフェッチしました。

「繰返し可能セクション」コントロールを使用して、webフォーム内のコントロール・セットのコピーを複数表示します。繰返し可能なセクションは、ユーザーがフォーム内で同じタイプの入力情報を複数回入力できるようにする場合に便利です(電話番号など)。

表と同様に、バインディングの情報がスキップされて、データがコネクタ・コールによってフェッチされるように繰返し可能なセクション・コントロールを構成できます。

構造化された表とは異なり、繰返し可能なセクションは自由形式のコンテナです。新しいコントロールは、既存のコントロールの上、下または間に追加できます。繰返し可能なセクション・コントロールで個別のコントロールを囲むことも、セクション・コントロール全体を含めることもできます。繰返し可能セクションに含まれるセクション・コントロールには、繰り返す必要があるすべてのwebフォーム・コントロールが含まれている必要があります。

表と繰返し可能なセクションによって、情報およびコンテンツをwebフォームに動的に追加できます。これらのコントロールを使用すると、フォームでactionトリガーおよびifトリガーを実行して、動的に変化する情報を表示できます。

「表の構成」と「繰返し可能なセクションの構成」を参照してください。

異なるデバイスの応答性の高いレイアウト

同じコントロール・セットを持つ同じwebフォームが、デバイスごとに異なる方法でレンダリングされます。たとえば、フォームに大きいデバイス用のコントロールを配置する場合、同じコントロールが小さいデバイス用に異なる方法でレンダリングされることがあります。

「Displaying For」フィールドに用意されているオプションの中から、フォームをレンダリングするデバイスを選択します。選択したデバイスのフォームがどのように表示されるかを確認するには、「プレビュー」をクリックします。

デバイスごとに絶対的な列サイズを指定することもできます。これを行うには、スタイル設定タブで「自動列サイズ」の選択を解除し、使用可能なフィールドに1から12までの数値を入力します。