{"id":13298,"date":"2016-09-29T00:00:00","date_gmt":"2016-09-29T05:00:00","guid":{"rendered":"https:\/\/centricconsulting.com\/post\/office-365-powerapps-part-1\/"},"modified":"2021-12-15T00:13:19","modified_gmt":"2021-12-15T05:13:19","slug":"office-365-powerapps-part-1","status":"publish","type":"post","link":"https:\/\/centricconsulting.com\/blog\/office-365-powerapps-part-1\/","title":{"rendered":"Office 365 PowerApps Deep(ish) Dive \u2013 Part 1"},"content":{"rendered":"<h2 style=\"text-align: left;\">In this series of blogs, we explore the key capabilities in Office 365 and SharePoint to create business solutions, with a primary focus on PowerApps.<\/h2>\n<p class=\"intro-text\" style=\"text-align: left;\">Instead of listing the functionalities, we help you build a PowerApp.<\/p>\n<p><em>Part one of a <a href=\"https:\/\/centricconsulting.com\/blog\/microsoft-office-365-sharepoint-training_portals_series\/\">series<\/a>.<\/em><\/p>\n<p>Even though PowerApps is still in &#8220;Preview,&#8221; it continues to evolve at a rapid pace. A recent addition to the product: 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 provide a description, but that is completely boring. Just building a PowerApp would be much more fun!<\/p>\n<p>So, let\u2019s jump right in with the following <strong>completely hypothetical<\/strong> requirements:<\/p>\n<p>So,\u00a0let\u2019s 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 <em>Menu Management PowerApp<\/em> to create and submit their menus to me for approval.<\/p>\n<h2>SharePoint Integration<\/h2>\n<p>To store my data for the new Menu Management PowerApp, I\u2019m going to leverage SharePoint lists to store the data. Why use SharePoint for this?<\/p>\n<ol>\n<li>My data architecture\u00a0will\u00a0not be overly complex.<\/li>\n<li>Since it\u2019s 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.<\/li>\n<li>It\u2019s much easier to manage than an SQL\u00a0database.<\/li>\n<li>With the recently released Modern SharePoint Lists in Office 365, integration is pretty simple\u00a0to set up and maintain.<\/li>\n<\/ol>\n<p>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. I will initially create three lists that will house the data necessary for users to submit new menus for approval:<\/p>\n<h2>Menu Items<\/h2>\n<p>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.<\/p>\n<p><a href=\"https:\/\/centricconsulting.com\/wp-content\/uploads\/2018\/07\/padd1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-784\" src=\"https:\/\/centricconsulting.com\/wp-content\/uploads\/2018\/07\/padd1.png\" alt=\"padd1 - powerapps \" width=\"616\" height=\"195\" \/><\/a><\/p>\n<p>I have added the following columns to my custom list:<\/p>\n<ul>\n<li><strong>Title<\/strong>\u2013 Comes by default with a custom list. Will be used to store the title of each menu item.<\/li>\n<li><strong>Description<\/strong> \u2013 Multiple lines of plain text.\u00a0Will store a description of each item.<\/li>\n<li><strong>Section<\/strong> \u2013 Will store a value of: <strong>Appetizers<\/strong>, <strong>Salad<\/strong>, <strong>Entree<\/strong>, or <strong>Dessert<\/strong>, depending on the menu item. This was originally a choice column, <em><strong>but there are some limitations currently between PowerApps and SharePoint around choice columns.<\/strong><\/em> \u00a0I\u2019ll discuss this more in depth later on.<\/li>\n<li><strong>Image<\/strong> \u2013 this will store a link to an image of each menu item. <strong><em>There is currently a limitation wherein PowerApps cannot display images that are hosted in SharePoint.<\/em><\/strong>\u00a0For this example, all links will be to images hosted outside of SharePoint.<\/li>\n<\/ul>\n<h2>Menu Form<\/h2>\n<p>This list will contain all of the captured values from the PowerApp for the submitted menu, as well as status information on the request.<\/p>\n<p><a href=\"https:\/\/centricconsulting.com\/wp-content\/uploads\/2018\/07\/padd2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-803 size-full\" src=\"https:\/\/centricconsulting.com\/wp-content\/uploads\/2018\/07\/padd2.png\" alt=\"padd2 - powerapps - centric consulting\" width=\"616\" height=\"336\" \/><\/a><\/p>\n<p>I have added the following custom items to my list:<\/p>\n<ul>\n<li><strong>Title<\/strong> \u2013 This will be the name of the menu that is created.<\/li>\n<li><strong>field1-field10<\/strong> \u2013 These fields will hold the value of each item selected. You will notice that the type of these columns is \u2018Number.\u2019 This is because I plan to save the \u2018ID\u2019 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.<\/li>\n<li><strong>Form Status<\/strong> \u2013 This is a choice column that will be used by our back-end workflows as the\u00a0menu arrangement.<\/li>\n<\/ul>\n<p>I have populated these lists with some sample data as well. But enough with SharePoint for now, let\u2019s make a PowerApp!<\/p>\n<h2>Create a new\u00a0PowerApp<\/h2>\n<p>So, as I prefaced at 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 <a href=\"https:\/\/centricconsulting.com\/wp-content\/uploads\/2018\/07\/padd3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-823\" src=\"https:\/\/centricconsulting.com\/wp-content\/uploads\/2018\/07\/padd3.png\" alt=\"padd3 - powerapps\" width=\"140\" height=\"257\" \/><\/a>the admin experience goes.<\/p>\n<p>The desktop client does offer more out-of-the-box templates as of today, but that will change as the browser version matures. I\u2019m 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.<\/p>\n<p>For this App, I am going to create a \u2018Blank App\u2019 with the \u2018Tablet Layout\u2019. Provides a little more real estate to help demonstrate functionality, also I use a Surface so it\u2019s easier to see and interact with when using Touch:<\/p>\n<h2>Home Screen<\/h2>\n<p>By default, you start a new PowerApp with a blank screen called \u2018Screen 1.&#8217; Change the Screen name to \u2018Home\u2019 by clicking on the \u2018Screen1\u2019 button on the ribbon,\u00a0and then renaming it to \u2018Home.&#8217;<\/p>\n<p>Since this will be the first screen that appears when the PowerApp is started, I\u2019m going to add a background\u00a0image, and some navigation buttons. As we add new screens, we\u2019ll wire up each button to allow navigation to occur when clicked.<\/p>\n<p>To change the background image of this screen, just click the \u2018Screen\u2019 tab at the top of the ribbon, and then click background image -&gt; add an\u00a0image file.<\/p>\n<p><a href=\"https:\/\/centricconsulting.com\/wp-content\/uploads\/2018\/07\/padd4.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-837\" src=\"https:\/\/centricconsulting.com\/wp-content\/uploads\/2018\/07\/padd4.png\" alt=\"padd4 - powerapps\" width=\"404\" height=\"85\" \/><\/a><\/p>\n<p>I chose a picture that will help give our \u2018Menu Management\u2019 some flair. Also, I changed the image position\u00a0to \u2018Fill\u2019 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.):<\/p>\n<p><a href=\"https:\/\/centricconsulting.com\/wp-content\/uploads\/2018\/07\/padd5.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-838\" src=\"https:\/\/centricconsulting.com\/wp-content\/uploads\/2018\/07\/padd5.png\" alt=\"padd5 - powerapps\" width=\"538\" height=\"365\" \/><\/a><\/p>\n<p>My next step will be to add a button to allow me to create a new menu. \u00a0Just click on the \u2018Insert\u2019 tab, and then click on \u2018Button\u2019. \u00a0You can then change the text, size, shape, font, colors, etc. Just use functions on the \u2018Home\u2019 tab, or you can manually modify each property for a more customized look:<\/p>\n<p><a href=\"https:\/\/centricconsulting.com\/wp-content\/uploads\/2018\/07\/padd6.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-850 size-full\" src=\"https:\/\/centricconsulting.com\/wp-content\/uploads\/2018\/07\/padd6.png\" alt=\"padd6.png - powerapps\" width=\"616\" height=\"379\" \/><\/a><\/p>\n<p>In the case of my button, I changed the <strong>RadiusTopLeft<\/strong>, <strong>RadiusTopRight<\/strong>,\u00a0<strong>RadiusBottomLeft<\/strong>, and <strong>RadiusBottomRight<\/strong> all to a value of \u2018100.&#8217; \u00a0This creates a circle if you resize the button. I also set it to \u2018No Fill\u2019 and added a 3px white border. Am I a UI\/UX expert? No.<\/p>\n<p>But this demonstrates you can do a bit more than just the defaults.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;ll dive into key capabilities in Office 365 and SharePoint to create business solutions. Check out part one of the series on PowerApps.<\/p>\n","protected":false},"author":86,"featured_media":17888,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_oasis_is_in_workflow":0,"_oasis_original":0,"_oasis_task_priority":"","_relevanssi_hide_post":"","_relevanssi_hide_content":"","_relevanssi_pin_for_all":"","_relevanssi_pin_keywords":"","_relevanssi_unpin_keywords":"","_relevanssi_related_keywords":"","_relevanssi_related_include_ids":"","_relevanssi_related_exclude_ids":"","_relevanssi_related_no_append":"","_relevanssi_related_not_related":"","_relevanssi_related_posts":"","_relevanssi_noindex_reason":"","footnotes":""},"categories":[1],"tags":[],"coauthors":[],"class_list":["post-13298","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","resource-categories-blogs","orbitmedia_post_topic-microsoft-365","orbitmedia_post_topic-enterprise-collaboration","orbitmedia_post_topic-power-platform"],"acf":[],"publishpress_future_action":{"enabled":false,"date":"2025-12-05 07:02:03","action":"change-status","newStatus":"draft","terms":[],"taxonomy":"category","extraData":[]},"publishpress_future_workflow_manual_trigger":{"enabledWorkflows":[]},"_links":{"self":[{"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/posts\/13298","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/users\/86"}],"replies":[{"embeddable":true,"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/comments?post=13298"}],"version-history":[{"count":0,"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/posts\/13298\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/media\/17888"}],"wp:attachment":[{"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/media?parent=13298"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/categories?post=13298"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/tags?post=13298"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/coauthors?post=13298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}