Tutorial - A simple radio button

Creating a radio toggle button in Touch Portal can be done using the logic functions that come with Touch Portal. This tutorial will explain how you can do this.

Step 01: Create a Toggle Button

We will start this tutorial by creating two buttons by copying the result of the Toggle button tutorial. If you have not followed it, check out the toggle button tutorial or check the image below.



Step 02: Copy the Toggle Button

We are going to make a radio button and one of the characteristics is that pressing one button will change the state of another button. For this to happen we need to have two buttons off course. So copy (right click mouse on the button and select "Copy Button") the button we created and then paste it on the spot next to it. We now have two toggle buttons.



Step 03: Change the state of another button

So now we want our buttons to change when the other button is pressed. To do this we take advanced of the Change Button State by ID action. This action lets you change the ON / OFF state of another button by using the id of that button. What id? Well in Touch Portal each created button has an id. Lets get the id of the second button. Open the button detail pages of the second button and scroll down in the settings and find the id field and click on the "Copy" button.

Now we have the id copied, let create the Change Button State by ID action. Add the action in the FIRST button and set the state to ON and paste the id into the id field. The action will look like this:

Now we place it at the correct place. If we change the state of the first button to OFF, we need to put this action in place so that it will set the state of second button to ON.

Do the same for the other state in button one and it should now look like this:

Now run press the first button a few times. It should now also switch the state of the second button. So let me explain the logic a bit; When you press the button the On Press will be triggered. We first start to check if the state is on. If it is, we change the state to off. This will trigger an event that will be handled by the On Event if we have added that. But we also set the state of the other button to on. Since our if statement was true we do not execute the else statement so our button is done. If we press it again, the state is off, so the else sequence will be triggered.
When you press the second button it will only set its own state so we still have work to do. We need to add the change button state by id in the second button as well to change the first button.



Step 04: Change the state of the first button as well

Now do the same for the second button as we did in step 3 but now copy the id of the first button. This will result in the following button setup for the second button:

Now press both buttons and they should toggle each other as radio buttons do.



End Result