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.
- Go to the Data Masters tab on the bottom right of the canvas and create a new Data Master by clicking on the + icon.
- Name it ‘sample’ and create three fields: Airline, Departing to and Terminal. Click ok.
- 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.
- 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.
- 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: