Learning PowerApps #1 – From A Blank Canvas

By Clarissa Gillingham on 10th July 2019

An Introduction to this blog series

PowerApps is a fantastic tool that can allow you to quickly create incredible, powerful, and visually engaging applications to replace your manual business processes. It’s an extremely fun platform to work with that empowers everyone to be able to create professional applications, regardless of background, with an ever-growing collection of amazing features.

The one down side? With the breakneck pace that Microsoft are introducing new functionality, and the myriad of features available, it can be quite daunting trying to find how to start learning to use PowerApps. But never fear! This blog series is designed to take you through my experiences learning PowerApps and provide you with the right steps to take to start your very own PowerApps Journey!

My background

(Or who am I and why should you care?)

A brief bit of context: My name is Clarissa Gillingham (or @ClarissaGillin2 on Twitter) and I started working at Silversands as a Business Applications Engineer on 1st May 2019. I came to the company with zero Microsoft experience, thinking that Office365 meant Word, Excel and PowerPoint and that was all there was to it. Boy was I wrong!

I have spent the last two months learning everything I can about PowerApps and have been able to go from complete novice to delivering solutions to customers. Join me as I share my learning experience and take the plunge yourself to streamline your work and day-to-day life!

Disclaimer: I have had a brief foray into programming in my past (learning scientific programming in C and hobbying in Java) and, while some basic concepts from programming have definitely helped me pick things up quickly, the best thing about PowerApps is that you don’t have to have a programming background.

Never programmed before? You can use PowerApps!

And if you’re used to programming? You can use PowerApps too!

In my experience, PowerApps is a toolbox that allows you to solve problems and, like any set of tools, is only limited by your imagination and the skills you develop. So, wherever you are on the scale, it’s an applicable platform to use.

Note: If you are new to development, stay tuned for the next instalment of this blog series where I’ll be covering Using Controls – A Crash Course in Core Programming Concepts for PowerApps Newcomers.

Learning PowerApps #1 – From a Blank Canvas

In this first instalment I’ll walk you through the actual logistics of how to get started and then familiarise you with the development environment you’ll come to know and love.

Getting Set Up

One of the many fantastic things about PowerApps is all you need to get started is a Browser.

You may already have an Office365 account and an environment to work in, but I’d highly recommend signing up for the Office 365 Developer Program. This will provide you with an environment to play around with all the Office365 Apps. Simply open Chrome/Edge/Firefox and visit https://developer.microsoft.com/en-us/office/dev-program to set yourself up with a free rolling 90 day developer subscription that will open up all Office365 applications and services for you. Don’t worry about the ‘90 days’, the way the subscription works is that every time you log in and use the services it resets the 90 day countdown. So, so long as you don’t spend a whole 3 months away from your apps, you’ll always have access to them and more!

Clicking “Join Now” on the landing page will prompt you to sign in with an Office365 account, or if you don’t already have an account you can create a new one. Note that for extra goodness the free program includes 25 test user accounts you can also make use of, so you don’t need to set up additional accounts.

Once you are all set up with your developer program, or if you’d prefer to use your existing access, you can log into your Office account and start trying out the services!

And from here you can click PowerApps and you’ve just taken your first step on your PowerApps Journey!

Note: If you can’t see PowerApps on this shortlist, click “Explore all your apps” and you’ll be able to find it among the full list of all the services available to you.

PowerApps come in two main forms: Canvas Apps and Model-driven Apps. I would highly recommend starting with the Canvas Apps, like I have, since this is for many people a more intuitive way of creating.

You’ll first be offered the choice between creating a Tablet Layout app or a Phone Layout app. It is entirely up to you what you’d like to play around with first, so pick whichever you’d like! For both you can preview them on PC, but the benefit of choosing a Phone app is that you can very quickly and easily access it from your mobile device by downloading the PowerApps app from your App Store/Play Store and signing in with your Microsoft account.

Now you’re in and ready to start creating!

Adding Elements

We have a blank canvas before us, which doesn’t lead to the most interesting of applications! Let’s add a picture.

Along the top bar the Insert tab is the most useful and where you’ll probably be spending most of your time. Clicking the Insert tab allows us to view all of the different elements available to add into the application. If we go to Media and then Image we can add an image to the screen. One of the great things about PowerApps is that when you’re making your application you see exactly what the end-user sees; it’s a What You See Is What You Get (WYSIWYG) system. This makes it incredibly intuitive to create a good user experience. Want your image to appear in the top left? Drag it to the top left in the editor. Want your image to appear larger? Enlarge it in the editor. It sounds basic, but this is such a powerful feature that enables you to create in a very visual manner.

At this point it’s also important to note that Canvas apps are structured into different screens that act as containers for the various elements you add to the application. So, when we add the picture, we are adding it to the screen that we are currently viewing. If we create a new screen, we can see that this new screen does not contain the picture.

We can add far more than just images to our PowerApps, and below is a clip showcasing some of these elements. It’s a great idea to play around with them yourself; try adding them to your application and see what you can add and do! By pressing the Play button in the top right–hand corner, you can preview the end-user’s experience of the application and this is where things get really amazing – you’ll notice that all of the elements you’ve added from the Insert tab are fully functional straight out of the box.

If you have added a Date Picker control, you’ll find that clicking it automatically brings up a Calendar which you can use to select the date. And all you needed to do is drop your control onto your screen!

Hopefully you can start to imagine the speed at which PowerApps can be developed. But wait, there’s more out-of-the-box goodness to be had! While it’s possible (and in many cases a good idea) to perform custom formatting on all the elements in your application, Microsoft have provided some default out-the-box themes that we can choose between. Below is a clip showcasing a couple of these different themes. It’s important to notice that changing the overall theme applies that theme to every element, regardless of what screen that element is on.

It’s probably become clear that it’s very important to know and control which screen you are viewing or editing while working on your app. In the left hand panel we can see what is called the Tree View; this incredibly useful panel will allow us to select which screen we’d like to view/edit. In the panel we can see every element listed and which screen they are being housed in. If we want to edit properties of any element we can either click on them on the app screen itself or click on their name in the Tree View. From the Tree View we can also rename, group, and re-order elements as well as copy and paste elements from one screen to another.

Since it’s always a good idea to get into good practices right away, check out page 6 – 7 of the PowerApps Canvas App Coding Standards and Guidelines to find out how to correctly name your elements. This may seem like a time waster now, but your future self will thank you for getting into good habits!

There are three other vastly important sections of the editor to become familiar with. When you have selected a Screen, or any element, in the Tree View, you will be able to use the Drop Down List in the top left to select the different properties and behaviours of the screen or control you have selected. The Properties Panel on the right-hand side of the screen will also allow you to select, view and edit these properties; use the Advanced tab to see even more customisation options. Last, but certainly not least, is the Formula Bar in the top of the screen. This is where you can type Excel-style formulae to assign values to each property or to define the behaviours of all your applications’ elements.

So what’s next?

Now we know how to add various different elements to our application, our next task is learning how to manipulate these elements’ properties and behaviours to get them to do exactly what we want them to do. This is where having a background in programming is not essential, but there are certain things from my background that helped me, so I want to share those with you all! Stay tuned for the next article in this series to learn the basic concepts that will enable you to customise your elements and really start harnessing the power of PowerApps.

I hope you’ve enjoyed your first step on the way to becoming an App Maker! If you have any questions, want to strike up a conversation, or want regular updates on all things PowerApps, Microsoft Flow and PowerBI, make sure to follow me (@ClarissaGillin2), Ben Haynes (@disappointmentb) and @SilversandsLtd on Twitter or simply fill out the form below to get in touch. Please also consider tuning in to the FREE Introduction to PowerApps webinar I’ll be hosting on 31st July!