Making Icons appear only when a previous icon is clicked on

[pnass001]

I have "+" icons which will allow new fields to become visible once clicked on. The problem I'm facing is facing all the "+" icons invisible unless the previous "+" is click on. How can I make all the other "+" invisible unless the previous "+" has been clicked on. It's suppose to be a chain reaction.

First "+": Standard_11 is the "+" sign

Onselect: If(AddStandard_11="1",UpdateContext({AddStandard_11: "0"}),UpdateContext({AddStandard_11: "1"})) 

Second "+": 

Onselect: If(AddStandard_12="1",UpdateContext({AddStandard_12: "0"}),UpdateContext({AddStandard_12: "1"})) 

Visible: If(AddStandard_11 = "0",false, true)

Third "+":

Onselect: If(AddStandard_13="1",UpdateContext({AddStandard_13: "0"}),UpdateContext({AddStandard_13: "1"})) 

Visible: If(AddStandard_12 = "0",false, true)

[ZabiBabar]

Hi @pnass001 ,

I think the issue could be with the default values of the icons visible property. 

Select your screen the icons are on and set Onvisible property to the default states for each icon as I have done below. I am going to assign them true/false instead of "0"/"1" because this will make the formulas easier as you will see: 

UpdateContext({AddStandard_11: false}); UpdateContext({AddStandard_12: false}); UpdateContext({AddStandard_13: false})

Then the onSelect property, respectively, for each icon will be 

UpdateContext({AddStandard_11: !AddStandard_11});
UpdateContext({AddStandard_12: !AddStandard_12});
UpdateContext({AddStandard_13: !AddStandard_13})

And the visible properties will be: 

AddStandard_11
AddStandard_12
AddStandard_13

Let me know if this works!

[pnass001]

@ZabiBabar Could you please clarify what I should take out of my code? A little confused as I was trying to replace my existing code with yours and errors were popping up and I didn't want to mess up the existing framework I established already.

Within Onvisible: add your code in replacement of mine? also I have more "+" signs so I'm guessing continue to add those standard_# to your chain of code? FYI, I have one screen and all fields are dependent on being visible by clicking on other buttons.

Within Onselect of the icon am I adding each code phase separated by the ";" within its respective icon. ex) standard_11 with the first "+"?

Within Visible: add 

AddStandard_11

instead of If(AddStandard_11 = "0",false, true)?

[ZabiBabar]

Sorry Let me clarify! All the formulas I have provided you are replacement to what you already had. Not addition. So yes, take out your code.

And yes for each icon's onSelect property replace your current code with the following: 

UpdateContext({AddStandard_1X: !AddStandard_1X});

Just change X the number to represent your variable name.  

And for each icon's visible property replace your code with this:

AddStandard_1X

And on the onscreen property set all them to false. All of this will go in on the screen that you with all the icons. The rest of the code works per icon. 

UpdateContext({AddStandard_11: false}); UpdateContext({AddStandard_12: false}); UpdateContext({AddStandard_13: false}); .....

[pnass001]

@ZabiBabar Thank you but I don't think this will work as I'm afraid to change everything up. All my fields that are shown visible once a "+" is clicked on is dependent on the onselect of the previous "+". I tried to change the codes your recommended by errors are flashing and fields are disappearing

[ZabiBabar · Accepted solution]

You're welcome. I am sorry I wasn't able to help you. I tried the same functionality on my end and it worked for me. I suggest you create a new screen just for testing purposes and add 4 "+" icons and change their onVisible and onSelect properties. After some research, I found that you do not need a formula on the Screen onvisible property.

The onSelect formulas for each icons are:

Icon1: 

UpdateContext({Add1: !Add1}); 

 Icon2: 

UpdateContext({Add2: !Add2}); 

Icon3:

UpdateContext({Add3: !Add3}); 

Icon4 has no formula for onSelect.

Now visible formulas:

Icon1 is always visible so just:

true

Icon2:

Add1

Icon3:

Add2

Icon4:

Add3

Try this on a new screen and if see you get the desired result. 

[pnass001]

@ZabiBabar I tested your code on a blank screen and it works how I would like. Only other thing is what do I put for the data fields that pop up once a "+" is selected. Also, now sure but I'm getting this error on the second "+".  And the fields starting with "Standard Number 2" and "Standard Name 2" disappear (seen in error screenshot but SNumber 2 disappears in error 1) and an error pops up if    If(AddStandard_11 = "1",true, false)   is added the Visible field. This was working and works for the other fields in relation to their respective "+". Any ideas?

Visible for a field underneath the error-ed "+" is: (when I click this "+" the fields marking a 3 after their title pops up

If(AddStandard_12 = "1",true, false)     as Add_Standard12 is the error-ed "+". This code follows the same with the other "+"s

[ZabiBabar]

Instead of using If(AddStandard_11 = "1",true, false), or If(AddStandard_12 = "1",true, false). Just use AddStandard_11 and AddStandard_12, respectively. 

AddStandard_11,12,13.. They are all boolean variables which are either true or false. You cannot compare them to "0" and "1".

You can do: If(AddStandard_11 = true ,true, false)

But this is equal to just saying Add_Standard_11, because if true it will return true and if false it will return false. Which what you want. 

[pnass001]

@ZabiBabar Ok I added your code so thank you for the clarification but all "+" are still visible when the app firstly opens. How can I make the "+" signs to be invisible except the first one? 

[ZabiBabar]

Select the screen the icons are on, and go to action at top ribbon and select onVisible, and add this code:

UpdateContext({AddStandard_11: false}); UpdateContext({AddStandard_12: false}); UpdateContext({AddStandard_13: false}); ...Same for the rest 

Set all variables to false! 

 The first button's visible property should not have Add_Standard on it. It should be true