If you have been on the internet at all in the last year and read anything about the Office 365 ecosystem, you have heard of PowerApps.

PowerApps allows us common folks (non-developers) to create and publish web and mobile apps through an easy to use web-based tool. No Visual Studio, no coffee-based languages, and no dealing with getting something published to the fruit store. If you can use a web browser, you can build and publish your own app for you or your whole team to use. Pretty awesome stuff.

In this article, we walk through creating your first PowerApp using SharePoint Online list data. It will not be the sexiest app ever, but it will introduce you to the core concepts and give us a base to build on for future articles that will show more advanced functionality.

Logging Into PowerApps.com

If you go to www.PowerApps.com, you will be redirected to your language version of the site. For now, skip over all of the marketing hoopla and instead, click Sign in at the top right-hand corner. Here you will want to log in with your Microsoft Account. To make the most out of this example, you should be using your Office 365 username and password. That will make life easier when we connect to your SharePoint Online content shortly. If you don’t have a PowerApps account, already you will be prompted to register for your free account. If you don’t have an account at all, then click Sign up free. Either way, we need you to get logged in to get to the dashboard to build that app.

Welcome to PowerApps

Now that you are logged in, you are taken to the home screen of the builder. One of the great things about PowerApps is you can do everything from the browser. If you prefer, there is a fat client (can we still call them that?) available to download by clicking the down arrow to the right of your name at the top of the screen. Everything works the same whether you use the web or the client. I am using the web because I am too lazy to install the client.

On this home screen, you will see lots of example apps. They are great and I recommend you try them out. For me, I like to create the examples and then reverse engineer how they are doing different things. Personally, that has been the easiest way to learn. Look at something that works and then figure out how/why it works. A great example is the button that changes the sort from ascending to descending in the app we are about to build together. That simple button turns out to use a few different concepts to provide its functionality. I actually plan to break it all down in a later article, so don’t figure it out quite yet or you will ruin the surprise.

Now that you are done looking at the examples, click on Apps on the left. If this is your first time in here, you will be greeted with a whole bunch of nothing. Let’s fix that by clicking Create an app on the right side.

There are lots of fun options on this page.

For us to get started, we will take advantage of the SharePoint > Phone layout template by clicking the button Phone layout.

If this is the first time you have tried to use SharePoint as a connection, then you will need to setup your connection.

Here you will see you have two options. Connect directly is for connecting to SharePoint Online. Connect using on-premises data gateway takes a little setup work but will provide you the ability to build PowerApps by connecting to your on-premises SharePoint. For this walk-through, we will choose Connect directly and click Create.

If you want to learn more about setting up the on-premises data gateway check out this video: Install the on-premise Data Gateway for Power BI, PowerApps, Microsoft Flow, and Azure Logic Apps for more information.

You are now prompted to connect to a SharePoint site. In the box, you want to enter the URL of your SharePoint site, not the list URL. So typically, something like https://boldzebras.sharepoint.com is what you want to type in and then press Go.

Here you will see all of the lists for the site you specified. Well, not really all of the lists, you will see the lists that PowerApps knows how to handle best. So typically, these are custom lists. PowerApps can connect to any list by manually entering the list name in the box, “Enter custom list name” but if you do this for a document library or picture library, it will not work exactly as you are hoping. While you are still learning, I recommend creating a custom list with a handful of columns and go from there. Once you are a PowerShell pro, you can come back to more complex lists. For this example, I have a simple list I created named Test that has three columns: Title, Color, and Animal. If you want to make the same list, I did it with PowerShell here. Click the list you want to use and click Connect.

Here is a screenshot of my very complicated list for learning.

Now sit back for a moment while PowerApps does all of the hard work and creates an app for you. Should take about 30 seconds, so don’t get too comfortable.

Checking Out Your App

If any wizards or tutorials pop up, skip or close them for now. You can go through them another day when you don’t have me waiting to show you things.

Believe it or not, you now have a completely working app. That is borderline magic. The first thing you should do is try it out. To do that, you can click the play button up on the top right of the screen. (You know, the triangle looking thing we used to have on our VCRs.) This will launch the preview tool and let you try things out without committing to it. Get used to using the preview tool; you will use it a lot when you start building your own apps.

The preview app launches and is a complete working app. Click around and check it out. You made that. You can search or scroll through the list items and then click the arrow on the right to view the item. On the view screen, you can now edit or delete your item. If you go back to the home screen by clicking the arrow in the upper left, you will see you can also reload your data, change the sort order, or create a new list item. That is a lot of functionality for the handful of mouse clicks you have done thus far. Here is a screenshot of my app.

Now you might notice as you browse around, things aren’t perfect. For example, on the item search screen, I don’t see my item title. Don’t worry, fixing it is easy. When you are done checking out your work, click the X in the top right corner to return to the editor.

We will make some edits to the app and then publish the app. There are two reasons we are going to make these changes. The first is because this will familiarize you with just how PowerApps works and how easy editing is. Secondly, the default app, while magical. wasn’t exactly perfect and you deserve perfection. The third reason is I enjoy writing, but the editor said I couldn’t include that as a reason so nevermind, let’s just get started.

Make Your First Edit

Time to dig in, press some buttons, and see how the sausage is made. Okay, maybe we will not go quite that deep but we will look at some of the mechanics of how this thing is put together while we change what shows up on the search screen.

The list items are shown via a Gallery that is connected to the list. The Gallery control is great because it has a tool pane for making changes like the one we want to make. The best way to open it up (because there are about 10) is to first click View from the toolbar and then click Data sources. This will create a pop out on the right side of your screen where you will see all of the current, in-use Data sources. Ignore that for a moment, Now over on the left, you need to click BrowseGallery1 below BrowseScreen1. Check out my cute numbered image I made to help you because I am so nice.

Now if you look back over at the Data source pop out that opened you will see all kinds of fun buttons to click. We don’t have time to go over all of them for now, I promise another article later that does. For now, let’s just fix our display issue.

If you look at the bottom half, you will see why our Title is missing. Title for this gallery is set to the Animal field. Boo. Good news is with just a click of the dropdown you can change it to be Title. To keep Animal at the forefront, you can also change the Body from ComplianceAssetID (What is that anyway?) to Animal. With a few clicks, you should make your screen look like the image below.

Good job. Now click the Preview play button again and interact with your new results.

Pretty awesome. 30 seconds of work and you have customized your app. You have also just scratched the surface of what is possible and all without writing any code. When you are done playing with your new app, click the X to close the preview again.

As a side note, you might notice your items aren’t appearing in the order you would expect. Nothing is broken, it just turns out for this list, the default sort field is the Color field. It is an easy fix but opens a can of worms. We will skip it for today and save it for a future article. If you cannot wait, you can check out the video. I cover how to fix it there. If you just want a hint, it is set as part of the items attribute of BrowseGallery1.

Another side note in my example, the search box isn’t actually a search box. It is a filter box and it is only filtering where the color field begins with what you type in the box. This is also readily fixable another day.

Save and Publish Your App

I really encourage you to play around and try to make some other simple changes to your app. Not because the app needs to be changed but because reverse engineering these sample apps is a great way to learn. Either way, when you are ready to publish this app you can continue following along.

One thing I should have mentioned earlier (maybe I did in editing, if so this now just a reminder) is that when you create an app, there is no autosave until you save the app the first time. After that by default, it autosaves every two minutes. (Man, I really hope I added this to the beginning.)

To save your work click File up in the ribbon. Then click Save. Enter any name you want to give the App, I recommend, “Shane Is Awesome” and then click Save down in the bottom left. Now the app will save every two minutes going forward.

With the app saved, you can click Share this app if you are the sharing type. This will open a new browser window where you can choose who to share within your organization and what permissions they have for your app.

Consuming the App

Remember you and the people you have shared the app with can use the app in a browser and on their mobile phone. If they go to their mobile phone app store, they can search for and download PowerApps for free. Now they log in with their Office 365 account and the apps you shared with them show up on their device. Boom! Mobile app for your company created and deployed without you doing a lot of painful work. Pretty awesome.

All Done

You are awesome! You have created your first PowerApps app from your SharePoint Online data, edited that app to make it even better, and finally, you published the app for the world to see. I think you can call it a day and just go home. Tell your boss I said it was okay.