Radio Button and conditional rendering

Hi, I am using radio buttons to select between two options: Sole financial planning and Joint financial planning on a form in an app. For Sole, the app is supposed to display only the container for the principal details but for Joint, the app is supposed to display the container for both the principal and the Spouse details.

I have managed to make the radio buttons to work in a mutually exclusive manner as they should but I am unable to implement the conditional rendering for the spouse details container. It should display when the joint option is selected and hide when the sole option is selected. I will appreciate your help.

Do you have a general question related to app development with Composer? Post it here!

NOTE: If you have a question about how to implement a feature in your app, please include screenshots of your implementation so far in the post. This will help others to understand your problem and you to get help faster!


Some resources to check before you post:

AppGyver Academy: SAP AppGyver Quick-Start

Troubleshooting FAQ: SAP AppGyver FAQ

I would guess you have the radio button tied to a page or app variable, right? You can click on the Spouse Details container and under Advanced Properties change the Visible setting to be derived from a formula. It would be something like appvars.someVariable == ’ Joint Financial Planning’. This would show it when joint is selected and hide it otherwise.

Hi Adam,

Thank you for responding. I tried what you have suggested without success. I don’t know what I am missing. Please find what I have done below. I hope this will help you to see what I am missing.

Appgyver 1.pdf (492.2 KB)

Hi Adam, have you had a chance to revisit this question?

Hi Adam, are you in a position to give further assistance on this question?

I have still not found a way forward. Is there anyone willing to help me on this one?

18 days, no help? How do people get help here?

Well, appgyver rely on the community for help. Usually when we want to be helped, we need to show our best efforts to solve the issue, not “just wait” for someone to carry you to the solution. And see a post where someone “demanding” help isnt a good sign.

Since the last Adam comment, what progress did you make ? You tried anything different?

Try to change the visibility of your elements by giving the variable a fixed value. If it works, you only need to change the fixed value to the value of the page variable

Also, I suggest you check the debug log , check if your page variables are changing as you select different radio buttons.

Hi Thiago,

Thank you for your response. I will try your suggestion shortly. I think my effort can be seen from my question and my response to Adam. I understand that I am not entitled to any help. My expectation was that Appgyver had somewhere where people with zero coding experience like myself can ask questions and receive guidance on their appgyver projects without being judged and reprimanded for not knowing or asking.

I have done 30 pages of app forms, user registration and login by myself just by following tutorials. How does asking how to implement conditional rendering using radio buttons on a page amount to “just waiting for someone to carry out the solution?”

I’m not judging nor reprimanding you. Im just telling that this wont get you anywhere. And again, your last post didnt get you any closer to the solution.

You need to do 2 Things in Order to the conditional render to work :

1 - Create a true/false variable and bind the VISIBLE property from your object to this variable. Check if the object is visible/invisible according the variable value.

2 - After your variable toogle the visibility from your object, you need to toogle the value from your variable. When you click, you should do something to change this value, you can bind the value of the element or even use click events. Use the debug console to verify it the variable value is changing appropriately.

Also, if you have 30 pages on this app, i suggest you try to do this in a isolated app, then after you learn how to do it, replicate it into your bigger app. Maybe something from others pages are interfering in that. (this bahaviour is pretty commom in development )