所属部署をラジオボタンで選択させる

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の開発スタートガイドやオンラインヘルプでは、今回使用したラジオグループ型セルについてより詳しくご紹介しています。
こちらもぜひご活用ください。

＞開発スタートガイド – Forguncyで機能的なUIを作成する

＞オンラインヘルプ – ラジオグループの作成