cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Helper II
Helper II

Creating a Waffle Menu

Hey all, I'm trying to build a waffle menu for screen navigation. I apologize if this is an amateurish question--I'm learning as I go, so I'm not entirely sure how to do this.

I probably need to be building this as a component, but right now I'm just trying to figure out how to get the color on hover property to do what I want. Here's a sample of what i'm trying to do:

stephenkln_0-1593622115186.png

I have a waffle menu icon that I am overlaying with individual rectangles so the properties of each is independent from the other. On top of each rectangle I have an icon. What I would like to do is have whichever rectangle is clicked, turn green. Like this:

stephenkln_1-1593622859614.png

Simple enough, I got that working on the rectangle. The problem is, when I add my icon on top of the rectangle, it doesn't work.

I have to click the very edge of the button because of the icon's dimensions:

stephenkln_3-1593622973294.png

Is there a way to set this up so that I can see the icon, but it is ignored as far as its interaction with the cursor is concerned? I want the hover and select properties to work on the rectangle and i want the icon to just sit on top.

 

Any suggestions?

 

6 REPLIES 6
Highlighted
Super User
Super User

Re: Creating a Waffle Menu

@stephenkln 

You could put the button on top of the icon and make its fill property transparent.  Then use UpdateContext({color:Green}) to set the fill property of the Icon underneath.  By setting the fill color properties of the buttons and icons to a context variable, you can control when they are transparent and when they are green.  

Another way to do this would be to just use an icon and change the color and fill based on a context variable.   If the color and fill of the icon match, the picture on the icon will seem to disappear.

Highlighted
Super User
Super User

Re: Creating a Waffle Menu

One of the way for this could be.

Using variables, so you define the variables for rectangle properties and on the icon on click you change the properties of the rectangle by updating the variables.

The other way could be you make icon the exact size of the rectangle and instead play with the ICON hover property
Highlighted
Helper II
Helper II

Re: Creating a Waffle Menu

Ok I gave it a try. I set the rectangle to transparent, but when I click it, it turns green and hides the icon. I need the icon to remain white and be visible. 

Highlighted
Super User
Super User

Re: Creating a Waffle Menu

Hi @stephenkln 

Try this instead.  In the OnClick of an icon UpdateContext({clr:!clr) then in any of the properties you want to change put 

 

 

If(clr,Blue,Green)

 

 

This will toggle the colors based on clicking the Icon.  Give it a try and see how you can use it.  Change the colors to whatever you want to toggle. You can use RGBA(0,0,0,0) to set it transparent.  In the OnVisible property of your screen, use the UpdateContext(clr:true) to set the default property of the icons before they are clicked.

Highlighted
Helper II
Helper II

Re: Creating a Waffle Menu

@Drrickryp Thanks for the suggestion! I'm having a bit of a challenge following since I'm so new at this.

Which element am I applying this to?

stephenkln_0-1593625559022.png

stephenkln_1-1593625638830.png

From these screenshots can you tell me specifically which element, the icon or the rectangle, to apply this to? And which property I am changing? I guess I'm asking for a step by step if it's not too much trouble.

 

Thanks so much!

 

Highlighted
Super User
Super User

Re: Creating a Waffle Menu

@stephenkln 

I would simplify and get rid of the rectangles and just use the icons.  There are alot of properties related to the color and fill of the icon (Color, Fill, HoverColor, BorderColor, PressedColor, PressedFill, etc) and all of them can be changed depending on whether the icon is pressed and setting a context variable as either true or false. UpdateContext({clr:!clr}) toggles the variable as true or false.  By using If(clr, somecolor, someothercolor)  you can control the property of the icon.  You will need to play with it a bit to get it to work the way you want. 

Helpful resources

Announcements
Check this Out

Helpful information

Featuring samples like Return to the Workplace and Emergency Response Applications

August 2020 Community Challenge: Can You Solve These?

August 2020 Community Challenge: Can You Solve These?

We're excited to announce our first cross-community 'Can You Solve These?' challenge!

secondImage

Return to Workplace

Reopen responsibly, monitor intelligently, and protect continuously with solutions for a safer work environment.

secondImage

Super Users Coming in August

We are excited for the next Super User season.

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 (8,112)