Unanswered

Making Icons appear only when a previous icon is clicked on

(0) Share

Report

Posted on by Community Power Pla...

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)

Categories:

Building Power Apps

plusicons.png

I have the same question (0)

All responses (10)

Answers (1)

Community Power Pla... on at

Like (1)

Report
Hi @Anonymous ,

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!

Was this reply helpful? Yes No
Community Power Pla... on at

Like (0)

Report
@Anonymous 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)?

Was this reply helpful? Yes No
Community Power Pla... on at

Like (1)

Report
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}); .....

Was this reply helpful? Yes No
Community Power Pla... on at

Like (0)

Report

@Anonymous 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

ex23.png

Was this reply helpful? Yes No
Verified answer

Community Power Pla... on at

Like (2)

Report
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.

Was this reply helpful? Yes No
Community Power Pla... on at

Like (0)

Report

@Anonymous 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

error.png

error 1.png

Was this reply helpful? Yes No
Community Power Pla... on at

Like (0)

Report

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.

Was this reply helpful? Yes No
Community Power Pla... on at

Like (0)

Report

@Anonymous 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?

12.png

Was this reply helpful? Yes No
Community Power Pla... on at

Like (1)

Report
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

Was this reply helpful? Yes No
Community Power Pla... on at

Like (0)

Report

@Anonymous you're a god. much appreciative! it works

Was this reply helpful? Yes No