Toggle Buttons in a Power Apps Canvas App

I like buttons. On a shirt, a coat and in my apps.

When I was a kid I was fascinated with buttons on equipment: keyboards, cash registers, adding machines so maybe that’s why I like buttons in apps. The action of pushing a button to DO something is pretty fulfilling to me.

So, I’ll show you how I used two buttons in the mobile app for Harry — our easy and simple alternative to Dynamics CRM — to toggle between two different galleries of data.

Here’s the screen: letting users look at inventory data. The Pricing button will let the user look at costs from the suppliers and suggested resale prices for customers in one place.

I could have just put two buttons on the screen, but the point of Harry is simplicity. You hit a button and that’s exactly what you’re going to get. No going through a bunch of menus or options to try and find what you need.

Here’s the pricing screen with the buttons!

When the screen first loads, the Vendor Costs button is “selected” and shows a gallery of supplier pricing data.

Tap the Suggested Resale button and it becomes “selected” along with hiding the costs gallery and showing the resale pricing gallery.

So, how to do this? I have two gallery controls on the screen — one connected to supplier costs and the other connected to resale prices. These are filtered by this statement in the OnSelect on the Pricing button that navigates to the screen and sets a variable to the item selected on the screen:

Navigate(InventoryPricing, ScreenTransition.CoverRight, {varItemNumber: galInventory.Selected.ITEMNMBR})

Each of the galleries are filtered and sorted with the variable set from the Pricing button using this statement:

Sort(
Filter(viewIVVendorPricing,
ItemNumber = varItemNumber && IsCurrentPricing = "Yes"
), QtyFrom)

On the Pricing screen, I added two buttons to the container on the screen above the gallery controls. These are the new button controls in Power Apps.

When the pricing screen loads, I set two variables: varVendorCosts and varSuggestedResale:

Set(varVendorCosts, 1);
Set(varSuggestedResale, 0)

This is to make sure the Vendor Costs button is always selected first, the vendor costs gallery always shows when opening the screen AND TO MAKE YOUR LIFE INCREDIBLY EASIER AS YOU KEEP READING.

Each of the galleries has this statement in the Visible property:

If(varVendorCosts = 1,true,false)

The Vendor Costs button has these properties:

Type: Secondary
Icon style: Outline
Font size: 22
Border: solid, 2pt, theme color
BorderRadius: 15

The Suggested Resale button has these properties:

Type: Primary
Icon style: Outline
Font size: 22
Border: solid, 2pt, theme color
BorderRadius: 15

Now the magic:

In each of the buttons, the Appearance property is this:

If(varVendorCosts = 1,'ButtonCanvas.Appearance'.Secondary, 'ButtonCanvas.Appearance'.Primary)

If(varSuggestedResale = 1,'ButtonCanvas.Appearance'.Secondary, 'ButtonCanvas.Appearance'.Primary)

Then when the user taps each of the buttons, the OnSelect property looks like this (depending on the button tapped):

Set(varSuggestedResale, 0);
Set(varVendorCosts, 1);

This is what makes the button white when “selected” or blue when it is not — the combination of setting/using the variable, using the built-in button appearance types and some OnSelect magic!

Tonight I noticed the Outlook app does something like this in the search and I may or may not have copied that feature here.

One more fun fact: all of this data is coming from an on-premise ERP system (Microsoft Dynamics GP to be exact).