Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

 

 

OutSystems

選択肢から1つのオプションのみを選択する

ユーザーがラジオボタンを使用して、選択肢から1つのオプションを選択できるようにします。

リアクティブWebおよびモバイル

3つのオプションを含むフォームを作成するには、以下の手順を実行します。

  1. 新しい画面を作成します。
  2. Widget Treeで画面を右クリックし、[Add Local Variable]を選択します。[Name]フィールドに「Color」と入力します。Service Studioによってデータ型がColorに設定されます。

  3. ツールボックスでFormを検索して、画面にドラッグします。

  4. Radio Groupを検索して、Formにドラッグします。次に以下の手順を実行します。

    • Radio Groupウィジェットを選択します。
    • Radio Groupウィジェットのプロパティの[Variable]フィールドで、[Color.Color]を選択します。

    Radio Groupのプロパティ

  5. Radio Groupウィジェット内のRadio Buttonのプロパティを設定します。

    • RadioButton1のValueプロパティで、[Entities.Color.Red]を選択します。ラベルを「Rose」に編集します。
    • RadioButton2のValueプロパティで、[Entities.Color.Yellow]を選択します。ラベルを「Lemon」に編集します。
    • RadioButton3のValueプロパティで、[Entities.Color.Violet]を選択します。ラベルを「Plum」に編集します。

    Radio Button

  6. フォームの下にExpressionウィジェットをドラッグし、「"You selected " + Color.Color + " color."」と入力します。

  7. アプリをパブリッシュし、ブラウザで試します。

    ブラウザでのRadio Button

Button Group

リアクティブWebアプリやモバイルアプリでもButton Groupを使用することができます。

  1. ツールボックスからButton Groupをドラッグ&ドロップし、選択された値を保存する変数にバインドします。
  2. それぞれのButton Group Itemが選択された際に変数に割り当てる値を定義し、それぞれに対応するテキストラベルを編集します。

従来のWeb

従来のWebアプリでRadio Buttonを使用するには、以下の手順を実行します。

  1. ウィジェットツールボックスからRadio Buttonをドラッグ&ドロップします。
  2. 選択された値を保存する変数にそれぞれのRadio Buttonをバインドし、それぞれが選択された際に変数に割り当てる値を定義します。