Create A Custom Rating Bar

Did you ever come across the situation where you needed to make use of a rating bar, but the PowerApps provided star rating didn’t suffice? If that’s the case, I will guide you through the steps to create one without one single line of ‘nasty’ code.

Do you remember this blog post which outlined the steps to create a custom rating bar? So I thought, why not try the same approach but with a little twist.

One we’ve followed through al the steps, the end result should be like this:

First we need to create the Heart shapes. For this I didn’t have too look very far. I simply used PowerPoint Icons! PowerPoint offers a whole set of icons:

In PowerPoint I formatted the 2 icon shapes:

1. One Heart with the red Solid Fill
2. One Heart with the red Outline and No Fill

Once we have formatted the icon shapes in PowerPoint, we save them as PNG or JPEG images on a preferred location. I have to say that I try to use PNG images as much as possible, as these are very small in size. Import these into PowerApps:

†††

Next we build the layout in PowerApps. The layout consists of:

1. Top Layer: Gallery Control with Image Control
2. Middle Layer: Rectangle Shape
3. Bottom Layer: Gallery Control with Image Control
4. Slider Control (Minimal Value 1, Maximum Value 10)

Once these are in place, you should have the following layout:

Once we move the slider, the Middle Layer (rectangle shape) should behave as follows:

The next step is moving the layers on top of one another. Once we move the slider, you should have the following effect:

The final step is setting the Middle Layer Fill equal to Screen Fill. This will result in the following effect:

So there you have it! You can use the same approach in other scenario’s.