Creative Apps and Design Challenge – Part 3 The Annimated Pie Chart

Finishing up a 3-Part series on Creative App Design!

Part 1 – Creative Apps and Design Challenge

Part 2 – Creating the Basic App Layout and Icon Interactions

Part 3 – (today) Creating the custom pie chart control

Today I will explain how easy it is to create the center control where the annimation occurs when the slider control is changed. In fact, it's just a pie chart with some creative coloring and is truly a piece of cake to create in just minutes!

 

 

Believe it or not, this control is just a shadow circle (see how in Part 2), with a pie chart on top, a white circle on top of that, and a text box on top of everything. This really demonstrates the power of layering things in PowerApps as every screen is really a dimensional surface just like PowerPoint. You can simply use the Reorder command on the Home ribbon to help get things layered correctly.

Step 1: Insert a Pie Chart and configure it to have a slice that is linked to the slider we added yesterday. When you add the Pie to the page, select the title and the legend and delete them. You'll only need the pie for this exercise.

Insert and Configure a Pie Chart (Insert Menu >> Charts)

Set the Items property to:

Table(
{Item:"Remainder",Quantity:100-Slider1.Value},
{Item:"Value",Quantity:Slider1.Value}
)

In order to white out one of the slices, set the color property in the advanced options panel to:

[White, RGBA(49, 130, 93, 1)]

Remove the labels:

In the advanced property panel along the right (be sure to select the pie chart first),
Set Show Labels to false

Note: Set the minimum value of slider1 to 0, and the maximum value to 100. This way the slider won't allow values that won't work in the pie. (I made a mistake in mine and set the minimum value to 10 – which skews it slightly.)

Step 2: Drop a white circle icon on top of the pie chart. Size the circle a bit smaller than the pie, and fill it with white. (Did you know you can just type "white" in the fill property, no need to find the RGB equivalent!)

Step 3: We need to add a texbox that is set to read the value of the slider control so people can see the values as they change the slider. Add a textbox on top of the white circle, and size the text as large as you'd like.

Set the text property to: Slider1.Value

That's it! A clean, simple, and easy to use PowerApp design that could work for dozens of scenarios. The possibilities are endless! This is an example of a form that would not be possible in InfoPath, and which lets you revolutionize forms for your users!

P.S. If you want to Patch the data to SharePoint, here is the Patch Formula I used below:
(my list had 4 columns Title, Period (Date/Time), HumidityRead (Number), TemperatureRead (Number))

Patch( TempHumid,Defaults(TempHumid),
{Title:"Reading",
Period:Now(),
HumidityRead:Value(valHumid),
TemperatureRead:Value(valTemp)})

Enjoy revolutionizing your forms with PowerApps,

Audrie