Row selection with radio buttons

With Justinmind, you can use Radio Buttons to select rows in your Data List.

To learn how to do so, follow these steps:

  1. Go to the Data Masters palette and create a new Data Master.
  2. Name it “sample” and create three fields: Airline, Departing to and Terminal.
  3. Double-click on the Data Master you’ve just created and select the tab “View and edit records”. Write some example data there.
  4. Drag a Data List widget to the Canvas. Name it “samples” and select the Data Master you’ve just created from the drop-down menu. Select all the Data Master Fields available.
  5. Right click on the Data List and select “New column”. Hover over it with the mouse and when you see a white arrow above it, select it and place it to the furthest-left side.New column in Data List
  6. Resize the new column and drag a Radio Button in the “Current_row_1” row.data-driven-prototypes-radio-buttons
  7. Drag three Text widgets (Airline, Departing to and Terminal) and three Input Text Fields to the left of the Data List, which will hold the values of the selected row.
  8. Select the Radio Button, go to the Events palette and add an “On Click” + “Set Value” event, selecting the Input Text Field next to “Airline” as the target of the action. For the value, click “Calculated” and then the “Add expression text”. You’ll see the Calculated Expression builder appear.
  9. In the builder, follow these steps to create the expression:
    1. Drag the ‘Select’ function to the open space in the expression.
    2. Drag the ‘Filter’ function to the open space on the left that appears.
    3. In the next open space, drag the first row of the Data List (Current_row_1).
    4. Drag the Radio Button into the next open space.
    5. Finally, drag the “Airline” field from the Data Master tab to the last open space.data-driven-prototypes-radio-buttons-select-filter-expressionThis expression will select the first row (‘Current_Row_1″ under “sample” in the Outline palette) that has the radio button selected and will extract the field ‘Airline’ from it.
  10. Now click on the gear icon next to the word “Do” in the Events palette, and select “Add action”. Repeat the same steps as above for the remaining two fields (Departing to and Terminal), just remember to change the field and the attribute in the expression. 

You can download an example here.