UI部品 基本編
Forguncyのラジオグループは複数のラジオボタンを1つのグループとして表示するUI部品です。
ラジオグループ内の選択肢は1つしか選ぶことができないため、ユーザーに複数の選択肢の中から1つを選択してもらいたい場合に活躍します。
今回はユーザーがお客様や自社の社員の所属部署を入力する欄をラジオグループで実装します。
1.ページの準備
ラジオグループを配置するためのページをプロジェクトに作成します。
手順1-1.プロジェクトファイルを開く
サンプルのプロジェクトファイルをダウンロードし、開きます。
手順1-2.ページを新しく作成する
プロジェクトに新しくページを作成します。Forguncyのページとは、Webブラウザに表示される画面となるものです。
ナビゲーションウィンドウのページ部分を右クリックし、「新しいページの作成」をクリックします。
新しく「ページ1」という名前のページが生成されるので、それを右クリックします。
「名前の変更」をクリックし、「部署選択ラジオグループ」という名前にします。
2.ラジオグループを配置
画面にラジオグループを作成します。
手順2-1.使用するテーブルを確認する
ナビゲーションウィンドウの[テーブル]から、ラジオボタンの項目として使用するフィールドとそのフィールドを持つテーブルを確認します。
今回は既にプロジェクト内に準備されている「組織マスタ」の「部」フィールドを使用します。
手順2-2.ラジオグループを作成する
ページ上の、チェックボックスを配置したい範囲のセルを選択します。
その状態で[ホーム]リボンの[セル型]ドロップダウンから「ラジオグループ」を選択します。
（下図ではわかりやすくするため、上側のセルに見出しを置いています）
下図のように選択したセルが結合され、ラジオグループ型に変わりました。
手順2-3.テーブルデータを使ってリスト項目を設定する
右ペインのセル型タブ内にある[リスト項目]の欄にある「テーブルからデータを取得」チェックボックスにチェックを入れます。
すると、「リスト項目」部分が下図のように変化します。
ラジオグループに表示するデータを設定します。
ここには部を表示したいので、以下のように設定します。
| テーブル： | 組織マスタ |
| 値フィールド： | [部] |
| 表示フィールド： | [部] |
設定が完了すると下図のような状態になります。
これで部署選択用のラジオグループの作成は完了です。
3.デバッグを実行
これでページが完成したので、プロジェクトをデバッグ実行します。
手順3-1.デバッグを実行する
リボンの[ホーム]>[デバッグ]>[開始]ボタン、またはForguncy Builderの左上にある▶ボタンを押下してプロジェクトをデバッグ実行します。
作成したページがブラウザで表示されます。
作成したラジオグループがページ上に表示されるので、動作を確認してください。
4.ForguncyのUI部品についてもっと知る
Forguncyの開発スタートガイドやオンラインヘルプでは、今回使用したラジオグループ型セルについてより詳しくご紹介しています。
こちらもぜひご活用ください。
