自由記述欄を持つラジオボタンを作成

UI部品　基本編

Forguncyのラジオグループは複数のラジオボタンを1つのグループとして表示するUI部品です。
ラジオグループはユーザーに複数の選択肢の中から1つを選択してもらいたい場合に活躍します。
さらに、Forguncyのラジオグループは「その他」欄をクリックひとつで簡単に追加することができます。
この「その他」欄は、選択肢にない例外的な内容を想定する際に便利です。

今回は出欠フォームに出席/欠席/その他の選択肢をラジオグループで作成します。

チェックボックスグループにその他欄を追加する方法については、下記の記事をご覧ください。

＞関連記事：「想定外」に対応できる自由記述欄を持つ選択肢を作る

1.ページの準備

ラジオグループを配置するためのページをプロジェクトに作成します。

手順1-1.プロジェクトファイルを開く

サンプルのプロジェクトファイルをダウンロードし、開きます。

手順1-2.ページを新しく作成する

プロジェクトに新しくページを作成します。Forguncyのページとは、Webブラウザに表示される画面となるものです。
ナビゲーションウィンドウのページ部分を右クリックし、「新しいページの作成」をクリックします。

新しく「ページ1」という名前のページが生成されるので、それを右クリックします。
「名前の変更」をクリックし、「出欠選択ラジオグループ」という名前にします。

2.ラジオグループを配置

画面にラジオグループを作成します。

手順2-1.ラジオグループを作成する

ページ上の、チェックボックスを配置したい範囲のセルを選択します。
その状態で[ホーム]リボンの[セル型]ドロップダウンから「ラジオグループ」を選択します。
（下図ではわかりやすくするため、上側のセルに見出しを置いています）

下図のように選択したセルが結合され、ラジオグループ型に変わりました。

手順2-2.リスト項目を設定する

ラジオグループ内のラジオボタン項目を設定します。

ラジオグループ型セルを選択した状態で、右ペインのセル型タブ内にあるリスト項目の欄にある「項目1」～「項目2」の項目を以下のように変更し、「項目3」はマイナスボタンを押下して項目自体を削除します。

リスト項目欄からフォーカスが外れると、ページ上のラジオグループ型セルにも変更が反映されます。

変更されたことを確認したら、レイアウト欄の「垂直方向」を押下します。
今回は「その他」の入力欄が横長になるため、項目は縦並びに配置し見やすいようにしておきます。

さらに、リスト項目欄の下にある「「その他」を項目として追加」にチェックを入れます。
項目の幅が自由に変更できるため、今回は「300」に変更します。

これで出欠入力のラジオグループの作成は完了です。

3.デバッグを実行

これでページが完成したので、プロジェクトをデバッグ実行します。

手順3-1.デバッグを実行する

リボンの[ホーム]>[デバッグ]>[開始]ボタン、またはForguncy Builderの左上にある▶ボタンを押下してプロジェクトをデバッグ実行します。

作成したページがブラウザで表示されます。
作成したラジオグループがページ上に表示されるので、動作を確認してください。

4.ForguncyのUI部品についてもっと知る

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

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

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