PowerApps lets you build seamless and professional applications for your business. With PowerApps, you can easily create an app that modernizes processes and helps solve some of your organization's challenges. Plus, PowerApps lets you customize and optimize every detail of your app for specific tasks and roles.
In this post, we’ll take a look at how to create a simple app using PowerApps with a SharePoint list. Here, we include a step-by-step guide to help you create your first PowerApps application.
Follow along with our YouTube Video.
Learning How to Create a PowerApps App with SharePoint Data
In this post, you will learn how to create your first PowerApps App using SharePoint data. Next, you’ll learn how to make a few quick edits and customizations to your app. This tutorial aims to help you get the hang of PowerApps’ capabilities before trying your hand at building more complex applications. After this tutorial, you will be able to:
Connect to SharePoint data
Make edits
Share your app via email
Publish it and view it on your phone
Let’s get started!
Your Step-by-Step Guide To Creating a PowerApps App
Start with a Simple SharePoint List
For this example, we have created three columns: Title, Color & Animal.
This has been built using PowerShell. (If you don’t know how to do this, you can watch the video tutorial here.) Remember, we have made this example simple so that it’s easy to follow.
Open PowerApps
Next, go to https://powerapps.microsoft.com and sign in. If you don’t have an account already, you can sign up for free. Wherever you are in the world, it will redirect you to the language appropriate version.
Create Your App
Once you’ve signed in, click on ‘Apps’ on the top left-hand corner. If you have created any apps previously, you’ll see them here. Next, click on the ‘Create App’ button to create a new app.
Choose a Type of App
Now, you’ll need to select the ‘SharePoint App’ option with a ‘Phone Layout.’ You’ll see the other app options available and other data sources you can start with. You can even begin with a completely Blank App.
Connect To Your SharePoint List
It’s time to connect your app to the SharePoint list you previously created. You’ll need to go back to your SharePoint site and copy and paste your URL. (Note: don’t include the list, just the URL). Once you’ve pasted the URL, hit ‘Go.’
Select Video Lists
Next, you’ll see the available lists. You’ll notice that these are just lists and not document or picture libraries. Because we are just getting started and want to keep things simple, let's start with selecting 'Video Lists.'
Quick Connect
Once you’ve selected ‘Video Lists,’ hit ‘Quick Connect.’ Once you hit this button, it pulls all your data from the SharePoint list that you created. And, just like, that you have an app with a few screens you can work from.
Preview Your App
If you hit the ‘Play’ button, you will see a preview of your app. You’ll notice that you have both the Color and Animal columns displayed. For some reason, the Title column is missing, which we can figure out later.
Explore and Edit Items
If you click on one of your items, you can see the different details of each. If you click on 'Edit', you can see what you can and cannot edit. Here, you can clean up a few details and make various edits. When you create a new item, it will essentially take you to this same ‘Edit’ window.
Customize Your App
Let’s return to your home screen by clicking ‘X’. Next, hit the ‘Browse Gallery’ on the left-hand side. You can see a control panel, where you can view different fields, and you can control the layout, title, and subtitle.
Change a Title
Right now, for the title, we’re using ‘Animal.’ So, let's change this. Click the ‘Drop-down,’ and you’ll see each of the different fields. You’ll see Body 1, Subtitle, and Title, which you can change. Now you can see how you can customize it with just a few simple clicks to choose the data you wish to show.
Working with ‘ThisItem.’
Let’s have a bit more fun and take the customization a bit further. In the color column, the value here is ‘Blue.’ Let’s see how you can modify this. So, if you click on ‘Blue’ you’ll see that the text is coming from ‘ThisItem. Color’. (Found in your ‘fx control’ panel at the top)
Side Note: ‘ThisItem.’ Is an excellent concept to grasp when working with PowerApps because it shows the value of the current item you are working on in each of the blocks below.
Changing Color Fields
In this case, you’re going to use the color field, which is one of the columns from your SharePoint list. On the right side, you can see there are lots of controls for doing things such as updating. Here you’ll see you can change things like the text color too.
A Side Note: The more you use PowerApps, the more you will see that you can work in different areas. There are different levels of functionality, depending on where you’re at.
The Drop-Down Menu
You can also alter fields if you select the drop-down menu at the top left-hand side that says ‘Text.’ These are all the different controls, and you'll see that the ones that are bolded are ones that have been changed from their default values.
Changing Formulas
If you scroll through these, you’ll see that color has actually been modified. In the ‘ThisItem. (found in your ‘fx control’) it says ‘RGB followed by a long list of numbers. You can delete this and use the value that you have stored instead. (You can't just say, ‘ThisItem. and color because that's not an actual color value. You’ll need to use a color value function.) In the grey bar above, it says, “A color specified by name such as blue, or using the standard 6-digit hex notation” Here, you can type: This.item.color. Now you’ll see your blues are blue and your reds are red.
Field Sorting
You can also change the sorting of a field. Click on ‘Browse Gallery,’ and you’ll see that the items are coming from the long formula above. We won’t break the whole formula down in this post, but you’ll see that it's sorting by columns. The first thing you will notice is the source that's coming from your Video List. The second item behind the comma is what you want to sort by, and the third item is the order. Now, if you hit ‘Play’, you will see the color text and sorting by the title.
Side note: One of the easiest ways to navigate PowerApps is to go into this preview and get to the screen you want to fix.
Even More Customization
Now, click on the detail screen on the left-hand side. Go to ‘Data Sources.’ Once again, PowerApps has given us a great tool where you can adjust the layouts. So, in this case, you can remove the ‘Compliance ID’ and then fix the order. You’ll see it says, ‘Modified, Created, Created By, and Modified By.’ You can simply drag ‘Modified’ down in the field window and move things around as you wish.
Name & Save Your App
So, now that you’ve made a few changes to your app, you need to save it. Click on ‘Save File.’ Here you will be able to name your app, change the background color, the icon, and add a description. Remember, you are doing all this in the browser, and until you save it the first time, there is no autosave, so you want to save early on and often.
Change The Orientation
You can also change the screen orientation when you save your app, although this is generally something you’d do before creating an app. You can also do things like lock the aspect ratio here, where you can decide if you want to flip the screen when you turn your phone.
Share Your App & View It On Your Phone
Once you hit save, you will have the option to ‘Share this App.’ And, you can email it to friends or colleagues with a note or description. Now, go onto your phone and go to www.powerapps.com where you can view your app. If you need to install PowerApps on your phone, click here.
There you go, you’ve just created your first PowerApps app!
Build Your Own App with PowerApps Today
Whatever your requirements, PowerApps let you build all the business applications you need. Whether you need assistance with an issue or complete project services, PowerApps is here to help. To watch the full video tutorial on how to Create an App Using PowerApps with a SharePoint List, click here.
Comments