cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Post Patron
Post Patron

Making Icons appear only when a previous icon is clicked on

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)

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Continued Contributor
Continued Contributor

Re: Making Icons appear only when a previous icon is clicked on

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. 

View solution in original post

10 REPLIES 10
Highlighted
Continued Contributor
Continued Contributor

Re: Making Icons appear only when a previous icon is clicked on

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!

Highlighted
Post Patron
Post Patron

Re: Making Icons appear only when a previous icon is clicked on

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

 

Highlighted
Continued Contributor
Continued Contributor

Re: Making Icons appear only when a previous icon is clicked on

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

 

Highlighted
Post Patron
Post Patron

Re: Making Icons appear only when a previous icon is clicked on

@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

Highlighted
Continued Contributor
Continued Contributor

Re: Making Icons appear only when a previous icon is clicked on

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. 

View solution in original post

Highlighted
Post Patron
Post Patron

Re: Making Icons appear only when a previous icon is clicked on

@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

Highlighted
Continued Contributor
Continued Contributor

Re: Making Icons appear only when a previous icon is clicked on

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. 

Highlighted
Post Patron
Post Patron

Re: Making Icons appear only when a previous icon is clicked on

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

Highlighted
Continued Contributor
Continued Contributor

Re: Making Icons appear only when a previous icon is clicked on

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

Helpful resources

Announcements
secondImage

Demo-Extravaganza 2020

Check out these cool Power Apps & vote on your favorite!

secondImage

Community Highlights

Check out whats happening in Power Apps

secondImage

Community User Group Member Badges

FIll out a quick form to claim your community user group member badge today!

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Top Solution Authors
Top Kudoed Authors
Users online (10,713)