Learn how to prototype web and mobile apps

Radio buttons for clear row selection in Data Lists

In this tutorial, you will learn how to use radio buttons to select a row in a Data List in your interactive prototypes.

Download an example here.

  1. Go to the Data Masters tab on the bottom right of the canvas and create a new Data Master by clicking on the + icon.
  2. Name it ‘sample’ and create three fields: Airline, Departing to and Terminal. Click ok.
  3. Double-click on the Data Master you’ve just created and select the tab ‘View and edit records‘. Write some example data there. Click OK.
  4. Drag a Data List widget to the screen. 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 table and select “New column”. Pass over it with the mouse and when you’ll see a white arrow above it, select it and place it to the left-most side.

6. Resize it and drag a radio button in the first row (not in the header!).


7. Drag 3 Text widgets (Airline, Departing to and Terminal) and 3 Input text fields to the right of the Data List, to hold the values of the selected row.

8. Select the Radio button, go to the ‘events’ tab and add an ‘On click’ + ‘Set value’ event, selecting the Input field next to “Airline” as the element that will display the value. Select the ‘Calculate’ button and build the expression displayed in the image below, by dragging – in this order – the data functions SELECT and FILTER, the first row of the Data List, the Radio button, and finally the “Airline” field from the Data Master tab:



This expression will select the first row (‘Current_Row_1 under “sample” in the Outline tab) that has the radio button selected and will extract the field ‘Airline’ from it. Click OK twice.
9. Now click on the gear icon next to the word ‘Do’ in the events tab, 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.

Next tutorial > Learn how to edit-in-place the rows of a Data List


  1. Mark

    December 8, 2014 at 7:06 am

    I cannot ordering the column by following this sample in justinmind 6.3. There is no any feedback to allow me to drop the selected newly added column. Any advice?

    • admin

      December 9, 2014 at 1:37 am

      You have to place the mouse cursor near the top border of the column.While dragging, you’ll see a green area that highlights between which columns will that column be placed on drop.