PowerApps 101: Building a Basic CRUD Application with SharePoint Online

Fundamentals are FUN… #PowerApps101

CRUD – it’s not just the junk that comes with being sick, but the ability to Create, Read, Update and Delete within an application’s user interface.  Of course, I’m writing in the context of building a PowerApps application, but this concept/operability undoubtedly has extensive use cases across the tech field.

What I am introducing in this blog is a very simple PowerApps app that allows a user to:

  • Create or add new entries
  • Read, retrieve, search, or view existing entries
  • Update or edit existing entries
  • Delete/deactivate/remove existing entries

Without these four basic operations, most applications would not be considered complete nor particularly useful.

We never want this experience or feeling associated with our app.

Fortunately, PowerApps provides a range of app building capabilities that allow user to start from scratch with a completely blank interface, or to start from data and use a wizard to create a basic template based on that data.

Today, we will go over the Start from data option using a simple SharePoint Online List. The scenario is that I am sick of losing track of my spending habits, so I want to create a simple app to track how I’m using my money.  

Hmm, what’s going here?

If you have access already, sign in to SharePoint and PowerApps with your credentials. If not, then you can sign up for a free trial for one or both technologies we’re using, and that should suffice. (Alternately, you can always use Excel and just look for that connector instead of SharePoint Online. This will yield different results long term for building out and app, but will work fine for creating a basic CRUD app.)

 Once you’ve signed into both sites, go to SharePoint and click +New at the top of the page and select List from the drop-down options. Give this List a name and description and hit Create.

Use the +Add column option along the top of blank table to add the following columns and data types. Please note that Title is a default, unique column that can be renamed. Use the following:

Keep Title and do nothing with it.

Add a Single line of text column and call it Merchant.

Add a Currency column and call it Total.

Add a Choice column and call it Category. Under Choices, replace the default values (one per line) with Food, Transportation and Personal. Set the Default value to Personal.

After adding those columns, click on Quick Edit in the top ribbon. Add two entries:

For entry one,

Title = New business dress

Merchant = Macy’s

Total = 95.99

Category = Personal

For entry two,

Title = Fuel

Merchant = BP

Total = 36.52

Category = Transportation

Exit Quick edit. This is enough data to go to PowerApps and Start with data and build our basic CRUD app. Before leaving, copy the SharePoint site URL, but only copy the first part of the URL and do not include anything after the “Lists/…” You need only the main container site, not the List URL itself.

You only need the main component of the URL, not the List-specific URL.

Open the PowerApps site and choose +Create in the side bar. Choose the Start from data canvas app option.  Click Create on the pop-up box and a new web page will launch.

Choose the SharePoint connector, or for those using Excel, click the right-facing arrow to find the Excel connector as an alternate option.

If using SharePoint, you need to add the copied URL from the SharePoint site. Click Go and Choose the list you just created. Hit Connect and the wizard will create an app for you!

You should see a default mobile app containing the data from the SharePoint list, and this satisfies the Read aspect of CRUD.

If you click on the Play icon on the top right of the page, you can test the app’s functionality. This is called Preview mode.

Once you’re in Preview mode, click on the Plus sign on the top right corner, this will allow you to add a new entry and satisfies the Create element of CRUD.

Add your own info and hit the Check mark in the top right corner to add an entry. After you add an entry, you will return to the home screen.

Click on the right-facing arrow next to each entry to view the entry details and to experience the Update element of this CRUD app. If you click on the Pencil icon, you can Edit the entry. This is the Update element and will take you to the Edit screen.

Click on the Garbage can icon next to Delete the entry and experience the final element of our CRUD app. Boom, the entry is gone.

PowerApps at your fingertips! 🙂

This is the most basic beginning to creating a CRUD app with PowerApps. Tune in for another blog to start customizing our app! 😊