Creative Apps and Design Challenge – Part 2 – The How

Last week I posted the announcement of the Design Challenge, and also promised a how-to blog on the sample app that I created. If you haven't participated yet, I encourage you to read about the design challenge and submit your entries.

This blog will be a walkthrough of the steps I took to build the sample app from last week in just less than 30 minutes. I will also point out a few improvements I would have made in hindsight.

Here is a picture of the app icon and the single screen app:

The User Experience

The way it works is the user will tap on the little black cloud that's raining…and then use the slider below to set the humidity value. Then they will tap on the temperature icon to the left of the cloud (the temp icon will become black and the humidity icon will become grey to indicate that temp is now the active valule being collected). They will use the same method of dragging the slider to set the temperature value. When both tasks are completed, they would tap the "Submit" button to create a new record in a SharePoint list with the date/time of the log (captured by the app without intervention from the end user), the humidity value, and the temperature value.

Step 1 – Sketch & Media: I normally get ideas from Bing.com and from Pinterest too. Once I find something that inspires me, then I made a rough pencil sketch. (You don't need a pencil sketch in this case because last week's blog is your pencil sketch.) FYI, I actually walk through typical app usage on my sketch to check that it is coherent. (It's rather funny to watch me tapping on a piece of paper and making notes from those taps, but I learn a lot in the process!) After I have my sketch where I want it, then I get my media ready…

Media tip: If you are a professional forms designer, then you probably head towards Photoshop or something similar to create your media, and that's fine if you want to do that. In my case, I'm more of a "Power User", so I'm just going to use Microsoft PowerPoint to create my two icons (temp and humidity), and for the shadow behind my pie chart control. I grabbed the two icons from PowerPoints new "insert icons" command (learn more here).

Start from a blank slide in PowerPoint, then go to the "Insert" menu and under the Illustrations tab I selected "Icons". Both of my icons are from the "weather and seasons" section.

Once I placed the icons on the slide, I made a copy of them: 1 copy of each icon was set to be grey, but I left the originals black. Next I right clicked on the icons and selected "Save as Picture" to save the 4 icons to a media folder on my OneDrive (save it to whereever you'd like – just make a note so you'll find them later). You might want to use a consistent naming convention for your images such as "HumidOn" for the black version of the cloud, "HumidOff" for the grey version, so that they will be easy to find for your PowerApp formulas.

In addition to the icons, I also created a circle in PowerPoint, and used the shadows effect to soften the edges. I also right-clicked on it and saved it as a picture called "CircleShadow".

Total estimated time for media creation: 10 minutes max!

Step 2 – Upload your media to a new PowerApp screen1: Once you have all of your media, create a new PowerApp and upload the media as embedded resources. To do that, from the ribbon select "Content" then click on "Media" then over to the right select "Browse" to browse to the location of your media and upload it to the app. (Be aware that these are light images we created in PowerPoint, but if you are creating images in Photoshop, be sure to optimize for the web.)

Step 3 – Layout the page. Click one of the layout options on the right of the new screen to select a layout option…in this case I just selected the first one. Feel free to also pick a theme too. I just changed the top rectangle to the purple color, and then copied and pasted that rectangle to the bottom and removed the text from the bottom (text property)l. Lastly, I changed the text property of the top rectangle shape to read "Plant Observation Log".

Step 4 – Add the background circle. This will be behind our pie chart to add interest to the core focal point of the app. Insert an image control (from the Insert Tab, under Media). Set the 'image' property of the image control to "CircleShadow" which we had previously embedded into the app in Step 2. Notice that while you drag the image control with your mouse, gridlines will appear to help you center the image on the screen.

Step 5 – Add the humidity and temperature icons. 

MEDIA FOR ICONS

You might be tempted to add all four images (the process is the same as for the circle shadow), but you only need to add one of each. We going to use a formula to swap the image property in runtime in an upcoming step below. So, just add one image control, and size it for the left area above the circle.

–Set the "image" property to "TempOff" for the grey Thermometer, and set the "ImagePosition" property to Filt.

–Now copy the above image control, move it to the right side above the circle, and change the image property to "HumidOn" for the Black Cloud Raining.

CLICK TAP EVENTS:

OnSelect for Humidity icon:

UpdateContext({Temp: false}); UpdateContext({Humid: true})

OnSelect for Thermometer icon:

UpdateContext({Temp: true}); UpdateContext({Humid: false})

TAKE A BREAK AND SAVE: Let's take a moment and save our app to the cloud with the app name of "Plant Observation Log". Although PowerApps is autosaving for you, I tend to have a habit of saving after every 5 or so tasks. File>Save>Add Name>then click "save" in the lower right corner of the screen. (This is a good time for a hot cup of coffee or tea too.)

Step 6 – Set the icons to act as a visual input type checker. We want the user to be able to tap on either the humidity icon, or the temperature icon, to select what value they want to enter. So we are going to use those icons like buttons. We can swap images for these by using a condition in the "Image" property of each icon.

HumidIcon: If(Humid=true,HumidOn,HumidOff)

TempIcon: If(Temp=true,TempOn,TempOff)

Step 7 – Add and configure the slider control. First add a slider control (Insert, Controls, Slider) under the shadowed circle image.

Now we are going to connect the slider value to the current selection. Set the OnChange event of the slider as follows:

If(Humid=true,
UpdateContext({valHumid: Slider1.Value}),
UpdateContext({valTemp: Slider1.Value}))

Step 8 – Adding textboxes to test the buttons with the slider are working. Add two text boxes. Set the first "Text" Property to "valHumid", and the other to "valTemp". Now run your app to see that when you tap on the icons and move the slider the values are set properly.

If your test works out well, come back tomorrow for Part 3, where we will create the focal control in the center of the app that will annimate as they move the slider.

Let me know if you have any questions on the above in the comments below.

Audrie