UX Patterns: NumericUpDown, Custom Rating and Gauge Controls

 

In this blog, I am going show how easy it is to build composite controls using the built-in controls that ships with PowerApps.  We will build a numeric up/down, a custom rating control and a gauge control.

Download sample apps here

 

NumericUpDown

NumericUpDown control is spin box that displays numeric values. Building this control in PowerApps is pretty simple

 

Custom Rating Control

PowerApps ships with a standard Rating Control  but say we wanted to build a rating control that supports half-stars or in our case here, half-hearts. You can easily achieve that in PowerApps as follow:

As you can see, we are exploiting the touch gesture of a slider which is set to be transparent. When a user clicks or swipe within the slider area, we change the width of the underlying rectangle depending on the new value of the slider.

 

Gauge Control

The gauge control is a pretty simple control to build. The core of this control is to exploit the css rotation property within html (Thanks to Apostolis Papaioannou for the hint). The idea is to inject a variable defined in PowerApps which we can change dynamically (e.g you can bind this to slider.value )

 

Build 2018: Real-World Solutions with PowerApps: Building Composite Controls

Download sample apps here