Tutorial 18: How to use button group and radio buttons

This tutorial explains how to use button group and radio buttons in a Forsmpider Application. Button group is a Formspider object which manages the selected/unselected state for a set of radio buttons. For a certain group of radio buttons the button group guarantees that only one radio button can be selected at a time.

In this tutorial you will create a basic survey form containing a button group and a set of radio buttons. You will discover how to associate radio buttons with a button group and how to retrieve value associated with the selected radio button within a button group.

Open Formspider IDE and click “New Application” under the “File” menu. The “New Application” dialog will show up. Enter “Survey” as the name of the application and “HR” as its Datasource Schema name.  If you are using Formspider Online, you do not need to enter database schema name since your account is already configured to use your online database. Leave other fields empty and click OK. This creates the “Survey” application with a default mainframe (called “mainFrame”) and a default panel (called “mainPanel”).

Your survey will contain one question. You will list a set of predefined answers under this question and only one answer will be selectable at a time. To achieve this, you need to create a button group and associate this button group with radio buttons which will describe each answer.

Adding Button Group and Radio Buttons

As a first step you will add your question in your survey. To achieve this, you will create a panel which will contain your question. Expand the “Containers” accordion Panel, select the “Panels” node in the navigation tree and click the “+” button to create a new Simple Panel. Alternatively, you may right click the “Panels” node and select the “New” menu item from the pop-up menu. The “New Panel” dialog will show up. Enter “educationLevelQuestionPanel” as the name of the panel. Click OK to create and open the panel in the Editor.


Creating “educationLevelPanel”

Add a textLabel with the value “What is your highest level of education?” as your question.

<panel>
  <tableLayout>
    <!--"What is your highest level of education?" question row-->
    <row heightPolicy="Dynamic">
      <cell columnSpan="2" hAlign="Full" vAlign="Top">
        <textLabel font-style="Bold" label="What is your highest level of education?"/>
      </cell>
    </row>
  </tableLayout>
</panel>

As the next step, you will add your set of answers under your question. Suppose that your set of answers is “High School Diploma ”, “Associates Degree”, “Bachelor’s Degree”, “Master’s Degree”, “Ph.D.” and “Other”. Each of these answers will be presented by a radio button component which will be managed by a button group. Therefore you will first create the button group which will manage your radio buttons.

To achieve this, expand the “Miscellaneous” accordion panel, select the “Button Groups” root node and click the “+” button from the toolbar of the accordion panel. Alternatively, you may right click the “Button Groups” root node in the Navigation Tree and click the “New” menu item from the pop up menu that is displayed. The “New Button Group” dialog shows up.


Opening create dialog for button group object

Enter “educationLevel” in the name section, you will use this name later on in PL/SQL API calls.

Select “No Binding” as the binding option, it means that the button group will not be bounded to a datasource.

Leave “Default Value” section empty, meaning that initially all radio buttons managed by this button group will be unselected.

“On ValueChange” is the section where you can specifiy which Formspider action will be fired when the selected radio button belonging to the set managed by this button group is changed. Leave it blank for now and click “OK” to create your button group.


Creating “educationLevel” button group

Now you will create the radio buttons and associate them with “educationLevel” button group. For each of your answer you will add a radio button component and a textLabel describing the answer.

To accomplish this, open the “educationLevelQuestionPanel” and add a radio button and a text label with value “High School Diploma” describing the first option in your answer set.

<panel>
  <tableLayout>
    <!--"What is your highest level of education?" question row-->
    <row heightPolicy="Dynamic">
      <cell columnSpan="2" hAlign="Full" vAlign="Top">
        <textLabel font-style="Bold" label="What is your highest level of education?"/>
      </cell>
    </row>
    <!--"High School Diploma" row-->
    <row height="25">
      <cell width="20" hAlign="Left">
        <radioButton value="HighSchool" buttonGroup="educationLevel"/>
      </cell>
      <cell hAlign="Full">
        <textLabel label="High School Diploma" text-align="Left"/>
      </cell>
    </row>
  </tableLayout>
</panel>

Notice that two attributes are presented in tag;

<radioButton value="HighSchool" buttonGroup="educationLevel"/>

“buttonGroup” attribute serves to specify the button group name by which the radio button will be managed. The value “educationLevel” indicates that this radio button will be managed by “educationLevel” button group.

“value” attribute indicates the returning value from the radio button component. Therefore if this radio button is selected, when the value is retrieved from the button group named “educationLevel”, you will obtain “HighSchool” as return value.

Add a radio button and a textLabel pair for each of the remaining answers.

<panel>
  <tableLayout>
    <!--"What is your highest level of education?" question row-->
    <row heightPolicy="Dynamic">
      <cell columnSpan="2" hAlign="Full" vAlign="Top">
        <textLabel font-style="Bold" label="What is your highest level of education?"/>
      </cell>
    </row>
    <!--"High School Diploma" row-->
    <row height="25">
      <cell width="20" hAlign="Left">
        <radioButton value="HighSchool" buttonGroup="educationLevel"/>
      </cell>
      <cell hAlign="Full">
        <textLabel label="High School Diploma" text-align="Left"/>
      </cell>
    </row>
    <!--"Associates Degree" row-->
    <row height="25">
      <cell width="20" hAlign="Left">
        <radioButton value="Associates" buttonGroup="educationLevel"/>
      </cell>
      <cell hAlign="Full">
        <textLabel label="Associates Degree" text-align="Left"/>
      </cell>
    </row>
    <!--"Bachelor's Degree" row-->
    <row height="25">
      <cell width="20" hAlign="Left">
        <radioButton value="Bachelor" buttonGroup="educationLevel"/>
      </cell>
      <cell hAlign="Full">
        <textLabel label="Bachelor's Degree" text-align="Left"/>
      </cell>
    </row>
    <!--"Master's Degree" row-->
    <row height="25">
      <cell width="20" hAlign="Left">
        <radioButton value="Master" buttonGroup="educationLevel"/>
      </cell>
      <cell hAlign="Full">
        <textLabel label="Master's Degree" text-align="Left"/>
      </cell>
    </row>
    <!--"Ph.D." row-->
    <row height="25">
      <cell width="20" hAlign="Left">
        <radioButton value="PhD" buttonGroup="educationLevel"/>
      </cell>
      <cell hAlign="Full">
        <textLabel label="Ph.D." text-align="Left"/>
      </cell>
    </row>
    <!--"Other" row-->
    <row height="25">
       <cell width="20" hAlign="Left">
        <radioButton value="Other" buttonGroup="educationLevel"/>
      </cell>
      <cell hAlign="Full">
        <textLabel label="Other" text-align="Left"/>
      </cell>
    </row>
  </tableLayout>
</panel>

As the next step, you will add “educationLevelQuestionPanel” to the “mainPanel” for displaying your question and answer set in the mainFrame. Double click the “mainPanel” under the “Panels” node of the “Containers” navigation tree to open it in the editor. Include the “educationLevelQuestionPanel” to the “mainPanel” as shown below;

<panel>
  <tableLayout cellSpacing="10">
    <!--"What is your highest level of education?" question panel-->
    <row heightPolicy="Dynamic">
      <cell hAlign="Full" vAlign="Top">
        <include panelName="educationLevelQuestionPanel"/>
      </cell>
    </row>
  </tableLayout>
</panel>

Now run your application and select the radio buttons respectively, you will see that only one radio button can be selected at a time as expected.


Only one radio button can be selected at a time

Retrieving value from Radio Buttons

As a further step, you will add a “Submit” button to your survey. When pressed, this button will show a popup message displaying value of the selected radio button within your button group. The purpose of this example is make you discover how to retrieve value associated with the selected radio button within a button group.

To accomplish this, you will first add a button labeled “Submit” in your “mainPanel” as shown below;

<panel>
  <tableLayout cellSpacing="10">
    <!--"What is your highest level of education?" question-->
    <row heightPolicy="Dynamic">
      <cell hAlign="Full" vAlign="Top">
        <include panelName="educationLevelQuestionPanel"/>
      </cell>
    </row>
    <row heightPolicy="Dynamic">
      <cell rowSpan="10" hAlign="Center" vAlign="Bottom">
        <button label="Submit"/>
      </cell>
    </row>
  </tableLayout>
</panel>

Next, you will retrive the value of selected radio button within the button group when “Submit” button is clicked.

In your datasource schema, create a package called  “survey_pkg” and open your newly created “survey_pkg” package in your favorite PL/SQL Editor. Add a procedure named “submit” which calls the api_buttongroup.getvalue Pl/SQL API to retrieve the value of selected radio button managed by “educationLevel” button group. Then the retrieved value will be shown in a popup dialog by using api_application.showpopupmessage PL/SQL API. Ensure that the procedure is exposed in the package specification.

procedure submit is
  v_educationLevel_tx varchar2(255);
begin
  v_educationLevel_tx := api_buttongroup.getvalue('educationLevel');
  api_application.showpopupmessage('Selected radio button''s value is: ' || v_educationLevel_tx);
end;

In Formspider IDE expand the “Actions” accordion, select the “Actions” node, click the “+” button to create a new action. Alternatively you may right click the “Actions” node and select “New” from the pop-up menu. The “New Action” dialog will show up. Enter “submit” as the action name and “survey_pkg.submit ” as the procedure. Click OK to save your action.


Only one radio button can be selected at a time

Double-click and open the “mainPanel” in the editor. Add a buttonPress event to the “Submit” button and call the “submit” action.

<panel>
  <tableLayout cellSpacing="10">
    <!--"What is your highest level of education?" question-->
    <row heightPolicy="Dynamic">
      <cell hAlign="Full" vAlign="Top">
        <include panelName="educationLevelQuestionPanel"/>
      </cell>
    </row>
    <row heightPolicy="Dynamic">
      <cell rowSpan="10" hAlign="Center" vAlign="Bottom">
        <button label="Submit">
          <events>
            <buttonPress action="submit"/>
          </events>
        </button>
      </cell>
    </row>
  </tableLayout>
</panel>
 

Now run your application and press “Submit” button after selecting any of the radio button, you will see that a popup dialog showing selected radio button‘s value is displayed.


Radio Button value retrieved when “Submit” button is pressed