Skip to main content Build an agentic enterprise Get Started Guided Tours Security & Governance Dataverse Connectors Power BI Desktop Pro Premium Embedded Report Server Power Apps Power Automate Power Pages Copilot Studio Pricing Resources by Product Power Platform Learn Power Platform Blog Documentation Power Platform Topics Contact us Start free

 

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

image

 

Custom Rating Control

PowerApps ships with a standard Rating Control  image 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:

image

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 )

image

 

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

Download sample apps here