Office 365 PowerApps Deep(ish) Dive – Part 1

Even though PowerApps is still in Preview, it continues to Evolve at quite a rapid pace.  A recent addition to the product is the ability to create PowerApps through the browser interface.  While each version brings better functionality, I thought this would be a great time to do a bit of a deeper dive into some of the technical features of the product.  I could certainly list out those functionalities, and made provide a description, but that is completely boring, and just building a Powerapp would be much more fun!

So, let’s jump right in with the following completely hypothetical requirements:

So, let’s say I have decided to quit technology altogether, and open a chain of restaurants across the United States.  I plan to offer decent food at ridiculously low prices, but also allow each restaurant to create their own Menus based on a specific set of food items.  However, each restaurant will use a new Menu Management PowerApp to create and submit their menus to me for approval.

SharePoint Integration

To store my data for the new Menu Management PowerApp, I’m going to leverage SharePoint lists to store the data.  Why use SharePoint for this?

  1. My Data architecture will not be overly complex.
  2. Since it’s a part of my Office 365 subscription, there is no additional cost.  Whereas setting up a SQL Database on-prem, or in Azure/AWS would incur additional overhead.
  3. It’s much easier to manage than a SQL database
  4. With the recently released Modern SharePoint Lists in Office 365, integration is pretty simple to setup and maintain.

So, with that, I have created a site in my SharePoint Online Tenant that will hold the lists I will use for this new PowerApp.  For the lists, I will initially create 3 lists that will house the data necessary for users to submit new Menus for approval:

Menu Items

This list will contain necessary data for each Menu item that will be available for the users to select for their menu in the Menu Management PowerApp.  padd1

I have added the following columns to my custom list:

Title– Comes by default with a custom list.  Will be used to store the title of each Menu Item

Description – Multiple lines of Plain Text.  Will store a description of each item

Section – Will store a value of: Appetizers, Salad, Entree, or Dessert, depending on the menu item.  This was originally a choice column, but there are some limitations currently between PowerApps and SharePoint around choice columns.  I’ll discuss this more in depth later on.

Image – this will store a link to an image of each menu item.  There is currently a limitation wherein Powerapps cannot display images that are hosted in SharePoint.  For this example, all links will be to images hosted outside of SharePoint.

Menu Form

This list will contain all of the captured values from the PowerApp for the submitted Menu, as well as status information on the request.

padd2

I have added the following custom items to my list:

Title – This will be the name of the Menu that is created

field1-field10 – These fields will hold the value of each item selected.  You will notice that the type of these columns is ‘Number’.  this is because I plan to save the ‘ID’ of each menu item that is selected instead of the title.  I usually prefer to use the ID, as it is always unique and easy to work with.  This is just a personal preference, but it will also demonstrate some features of PowerApps as we build that functionality in.

Form Status – This is a Choice column that will be used by our back end workflows as the disposition of the Menu is changed.

I have populated these lists with some sample data as well.  But enough with SharePoint for now, let’s make a PowerApp!

Create a new PowerApp

So, as I prefaced in the beginning of the article, Microsoft is now offering an additional way to create PowerApps:  through a browser based GUI.  From my current experience with both tools(Browser and Desktop), the functionality is extremely close as far as the Admin experience goes.  The Desktop client does offer more out-of the box templates as of today, but that will change as the browser version matures.  I’m going to use the Universal App to create my PowerApp, but feel free to use whichever version you are more comfortable with, or the version that is compatible with your Operating system.padd3

For this App, I am going to create a ‘Blank App’ with the ‘Tablet Layout’.  Provides a little more Real estate to help demonstrate functionality, also I use a Surface so it’s easier to see and interact with when using Touch:

 

 

 

Home Screen

By default, you start a new PowerApp with a deafult blank screen called ‘Screen 1’.  Change the Screen name to ‘Home’ by clicking on the ‘Screen1’ button on the ribbon, and then renaming it to ‘Home’.  Since this will be the first screen that appears when the PowerApp is started, I’m going to add a BackGround image, and some Navigation buttons.  As we add new screens, we’ll wire up each button to allow Navigation to occur when clicked.

To change the background image of this screen, just click the ‘Screen’ Tab at the top of the Ribbon, and then click Background Image -> Add an Image File

padd4

I chose a picture that will help give our ‘Menu Management’ some flair.  Also, I changed the Image Position to ‘Fill’ to ensure the background covers the entire screen.  (NOTE:  Make sure your image files size is small and web optimized, this will help with load times.):

padd5

My next step will be to add a button to allow me to Create a new Menu.  Just click on the ‘Insert’ Tab, and then click on ‘Button’.  You can then change the Text, Size, Shape, Font, colors, etc.  Just use functions on the ‘Home’ Tab, or you can manually modify each property for a more customized look:

padd6.png

In the case of my Button, I changed the RadiusTopLeft, RadiusTopRight, RadiusBottomLeft, and RadiusBottomRight all to a value of ‘100’.  This creates a circle if you resize the button.  I also set it to ‘No Fill’ and added a 3px white border.  Am I a UI/UX expert?  No.. 🙂  But this demonstrates you can do a bit more than just the defaults.

In Part 2 of this series we’ll add a new screen for ‘Create’ and begin to dig into how we can retrieve and Submit Data from our SharePoint Lists.

If you’re interested in learning more about PowerApps, SharePoint Online, or Office 365, please feel free to reach out to me at joseph.karnes@centricconsulting.com

3 replies »

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: