Creating Your First PowerApps App Using a SharePoint List — Part 2

Posted on January 3, 2018 by Shane Young in Office 365, SharePoint, Uncategorized with

Getting Started with PowerApps and SharePoint Online - Part 2

In the first article, we got connected to PowerApps and created our first app. It was pure magic if I do say so myself. Now we will continue with that app. 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. In future PowerApps articles, we will build on this app to cover new skills. Planned topics include variable and collections, how to send emails, conditionals, connecting to other services, and any other fun topics I encounter in my consulting practice. Reminder, if you want to see a video walkthrough of this content you can check out Video: Learn PowerApps that I made just for you.

Shane

@ShanesCows

Tagged with , , ,