{"id":1599,"date":"2018-02-02T10:51:10","date_gmt":"2018-02-02T15:51:10","guid":{"rendered":"https:\/\/toddbaginski.com\/blog\/?p=1599"},"modified":"2018-12-20T09:41:47","modified_gmt":"2018-12-20T14:41:47","slug":"powerapps-coding-guidelines","status":"publish","type":"post","link":"https:\/\/toddbaginski.com\/blog\/powerapps-coding-guidelines\/","title":{"rendered":"PowerApps Coding Guidelines &#038; Tips"},"content":{"rendered":"<p><span style=\"color: #ff6600;\">All of these coding guidelines and tips have been incorporated into the official <strong>PowerApps Canvas App Coding Standards and Guidelines whitepaper<\/strong> by Pat Dunn and myself.\u00a0 Get the whitepaper <\/span><span style=\"color: #0000ff;\"><a style=\"color: #0000ff;\" href=\"https:\/\/powerapps.microsoft.com\/en-us\/blog\/powerapps-canvas-app-coding-standards-and-guidelines\/\" target=\"_blank\" rel=\"noopener\">here<\/a><\/span><span style=\"color: #ff6600;\">!<\/span><\/p>\n<p>[Updated 10-29-2018 with an additional guideline from Casey Burke, Program Manager on the CAP CDS 2.0 team.]<\/p>\n<p>[Updated 8-8-2018 with additional guidelines from <a title=\"by Mehdi Slaoui Andaloussi\" href=\"https:\/\/powerapps.microsoft.com\/en-us\/blog\/author\/mehdis\/\" rel=\"author\">Mehdi Slaoui Andaloussi<\/a>, Senior Program Manager on the PowerApps Team\u00a0 Look at the end of this post in the related articles section.]<\/p>\n<p>[Updated with additional guidelines on 5-11-2018.\u00a0 Look for the\u00a0<em>Updates<\/em> below.]<\/p>\n<p>We&#8217;ve been doing a LOT of custom PowerApp development lately!\u00a0 Check out the other\u00a0<a href=\"https:\/\/toddbaginski.com\/blog\/category\/cloud\/o365\/powerapps\/\" target=\"_blank\" rel=\"noopener\">PowerApps articles on my blog<\/a> and my\u00a0<a href=\"https:\/\/www.youtube.com\/channel\/UCgfWTteglpvN3wDdCx9nmhw\/videos\" target=\"_blank\" rel=\"noopener\">YouTube Channel<\/a> to see some of them and learn more about them.<\/p>\n<p>To make our PowerApps high quality we follow a set of coding guidelines.\u00a0 Here they are, in all their glory (LOL!), for your enjoyment.\u00a0 Feel free to reuse them on your own projects.<\/p>\n<p>A big shoutout and a special thanks goes out to <a href=\"https:\/\/www.linkedin.com\/in\/c-ian-davis\/\" target=\"_blank\" rel=\"noopener\">Ian Davis<\/a>, <a href=\"https:\/\/www.linkedin.com\/in\/alexanderbelikov\/\" target=\"_blank\" rel=\"noopener\">Alex Belikov<\/a>, all my friends on the Microsoft PowerApps team for their contributions.<\/p>\n<p><strong>Keep in mind, these are not official coding guidelines from Microsoft!<\/strong><\/p>\n<h5>Overall goals<\/h5>\n<ul>\n<li>Simplicity<\/li>\n<li>Readability<\/li>\n<li>Supportability<\/li>\n<li>Ease of deployment and administration<\/li>\n<li>Performance<\/li>\n<\/ul>\n<h5>\u00a0Variable naming<\/h5>\n<p>Be descriptive about a variable&#8217;s function.\u00a0 Think about what it is bound to and how it is used, then name it accordingly.<\/p>\n<p style=\"padding-left: 60px;\">Here are some good examples:<\/p>\n<p style=\"padding-left: 90px;\">disableSubmit<\/p>\n<p style=\"padding-left: 90px;\">resetFields<\/p>\n<p style=\"padding-left: 90px;\">hideNextButton<\/p>\n<p style=\"padding-left: 90px;\">totalOpportunityCount<\/p>\n<p style=\"padding-left: 90px;\">currentFilterValue<\/p>\n<p style=\"padding-left: 90px;\">currentQuestionId<\/p>\n<p style=\"padding-left: 60px;\">Here are some bad examples:<\/p>\n<p style=\"padding-left: 90px;\">dSub<\/p>\n<p style=\"padding-left: 90px;\">rstFlds<\/p>\n<p style=\"padding-left: 90px;\">hideNxtBtn<\/p>\n<p style=\"padding-left: 90px;\">ttlOppCt<\/p>\n<p style=\"padding-left: 90px;\">cFV<\/p>\n<p style=\"padding-left: 90px;\">cQId<\/p>\n<p>Avoid short and cryptic variable names, like &#8220;EID&#8221;.\u00a0 Use EmployeeId instead.<\/p>\n<p>Use camel casing.<\/p>\n<h5>Collection naming<\/h5>\n<p>Be descriptive about a collections contents.\u00a0 Think about what it contains and\/or how it is used, then name it accordingly.<\/p>\n<p style=\"padding-left: 60px;\">Here are some good examples:<\/p>\n<p style=\"padding-left: 90px;\">OrdersCollection<\/p>\n<p style=\"padding-left: 90px;\">MembersCollection<\/p>\n<p style=\"padding-left: 60px;\">Here are some bad examples:<\/p>\n<p style=\"padding-left: 90px;\">orderscoll<\/p>\n<p style=\"padding-left: 90px;\">tempCollection<\/p>\n<p>Use Pascal casing<\/p>\n<h5>Data source naming<\/h5>\n<p>Use the plural form when naming a Data Source<\/p>\n<p style=\"padding-left: 60px;\">Here are some good examples:<\/p>\n<p style=\"padding-left: 90px;\">Orders<\/p>\n<p style=\"padding-left: 90px;\">Members<\/p>\n<p style=\"padding-left: 60px;\">Here are some bad examples:<\/p>\n<p style=\"padding-left: 90px;\">orders<\/p>\n<p style=\"padding-left: 90px;\">member<\/p>\n<p>Use Pascal casing<\/p>\n<h5>Control naming<\/h5>\n<p>This one can be done a couple of different ways, pick what works best for you and your specific PowerApp.<\/p>\n<p>One way to do it is to take this approach:<\/p>\n<p style=\"padding-left: 30px;\">Naming convention: &lt;Control Type&gt;&lt;function or data field&gt;<\/p>\n<p style=\"padding-left: 60px;\">Here are some good examples:<\/p>\n<p style=\"padding-left: 90px;\">TextBoxZipCode<\/p>\n<p style=\"padding-left: 90px;\">ButtonNext<\/p>\n<p style=\"padding-left: 60px;\">Here are some bad examples:<\/p>\n<p style=\"padding-left: 90px;\">zipcode<\/p>\n<p style=\"padding-left: 90px;\">Next<\/p>\n<p>Another way to do it is to take this approach:<\/p>\n<p style=\"padding-left: 30px;\">Naming convention: &lt;ScreenName&gt;&lt;Control Description&gt;<\/p>\n<p style=\"padding-left: 30px;\">Here&#8217;s an example from the Microsoft PowerApp Company Pulse template.\u00a0 Notice the Canvas controls don&#8217;t end up with the names Canvas and Canvas_1.\u00a0 This way I know exactly which screen and control I am working with all the time.<\/p>\n<p style=\"padding-left: 30px;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1611\" src=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PAControlNames.jpg\" alt=\"\" width=\"260\" height=\"396\" srcset=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PAControlNames.jpg 260w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PAControlNames-197x300.jpg 197w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PAControlNames-96x146.jpg 96w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PAControlNames-33x50.jpg 33w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PAControlNames-46x70.jpg 46w\" sizes=\"auto, (max-width:767px) 260px, 260px\" \/><\/p>\n<p>Personally, I prefer the second approach for 2 reasons.<\/p>\n<ol>\n<li>I can already tell what type on control I am interacting with by looking at the icon in the left hand pane that shows the controls, as well as the control breadcrumb at the bottom of the page.<\/li>\n<li>My control names never end with a _1, _2, _3, etc. when I have the same control on multiple screens in my PowerApp.<\/li>\n<\/ol>\n<p>With either approach, avoid abbreviations.<\/p>\n<p style=\"padding-left: 60px;\">Here are some good examples:<\/p>\n<p style=\"padding-left: 90px;\">GalleryOrders<\/p>\n<p style=\"padding-left: 90px;\">ButtonNext<\/p>\n<p style=\"padding-left: 60px;\">Here are some bad examples:<\/p>\n<p style=\"padding-left: 90px;\">GallOrders<\/p>\n<p style=\"padding-left: 90px;\">BnNxt<\/p>\n<p>Use Pascal casing<\/p>\n<h5>Click targets<\/h5>\n<p>There&#8217;s two ways you can approach this.<\/p>\n<p>The first way is to group controls then assign click events to the group&#8217;s OnSelect event.<\/p>\n<p>The second way is to lay a transparent rectangle on top of the group and use the rectangles OnSelect event.<\/p>\n<p>I prefer the second way because it doesn&#8217;t impact my code as much if the controls in the group change and it also allows me to have more flexibility of the shape of the region I want to make clickable.\u00a0 See <a href=\"https:\/\/toddbaginski.com\/blog\/how-to-use-transparent-rectangles-effectively-in-a-powerapp\/\" target=\"_blank\" rel=\"noopener\">this article<\/a>\u00a0I wrote for more information about the transparent rectangle approach.<\/p>\n<h5>General coding guidelines<\/h5>\n<p>If possible, avoid logic in the OnVisible event in your PowerApp&#8217;s first screen.\u00a0 Instead, try to use inline expressions in control properties.<\/p>\n<p>Limit your use of collections, try to use them only when absolutely necessary.<\/p>\n<p>Limit your use of context variables, try to use them only when absolutely necessary.<\/p>\n<p>Avoid passing context variables between screens when a global variable is more appropriate (and much easier to debug)!<\/p>\n<p>Use ClearCollect instead of Clear;Collect().<\/p>\n<p>Use CountIf instead of Count(Filter()).<\/p>\n<p>Avoid lengthy expressions whenever possible!<\/p>\n<p>Each semi-colon should represent a line break.<\/p>\n<p style=\"padding-left: 30px;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1625\" src=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-0.jpg\" alt=\"\" width=\"443\" height=\"63\" srcset=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-0.jpg 443w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-0-300x43.jpg 300w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-0-260x37.jpg 260w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-0-50x7.jpg 50w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-0-200x28.jpg 200w\" sizes=\"auto, (max-width:767px) 443px, 443px\" \/><\/p>\n<p>Update all necessary context variables in a single UpdateContext call<\/p>\n<p style=\"padding-left: 30px;\">Like this:<\/p>\n<p style=\"padding-left: 30px;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1626\" src=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-1.jpg\" alt=\"\" width=\"477\" height=\"35\" srcset=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-1.jpg 477w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-1-300x22.jpg 300w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-1-260x19.jpg 260w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-1-50x4.jpg 50w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-1-200x15.jpg 200w\" sizes=\"auto, (max-width:767px) 477px, 477px\" \/><\/p>\n<p style=\"padding-left: 30px;\">Not this:<\/p>\n<p style=\"padding-left: 30px;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1627\" src=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-2.jpg\" alt=\"\" width=\"257\" height=\"82\" srcset=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-2.jpg 257w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-2-50x16.jpg 50w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-2-200x64.jpg 200w\" sizes=\"auto, (max-width:767px) 257px, 257px\" \/><\/p>\n<p>Use proper indentation<\/p>\n<p style=\"padding-left: 30px;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1628\" src=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-3.jpg\" alt=\"\" width=\"293\" height=\"133\" srcset=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-3.jpg 293w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-3-260x118.jpg 260w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-3-50x23.jpg 50w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-3-154x70.jpg 154w\" sizes=\"auto, (max-width:767px) 293px, 293px\" \/><\/p>\n<p>For long single line formulas, try to insert line breaks in reasonable places: before\/after parentheses, commas, and colons.<\/p>\n<p><em>Update:\u00a0\u00a0<\/em>Avoid using unnecessary DataCards \\ Canvases.\u00a0 Especially if they have nested galleries, which will not work in the future.<\/p>\n<p><em>Update:<\/em><\/p>\n<p>Don&#8217;t use multiple variables when you could just use a single one.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1714\" src=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/Multiple-variables.png\" alt=\"\" width=\"504\" height=\"69\" srcset=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/Multiple-variables.png 504w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/Multiple-variables-300x41.png 300w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/Multiple-variables-260x36.png 260w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/Multiple-variables-50x7.png 50w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/Multiple-variables-200x27.png 200w\" sizes=\"auto, (max-width:767px) 480px, 504px\" \/><\/p>\n<p>We could just use 1 variable here instead.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1715\" src=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/single-variable.png\" alt=\"\" width=\"494\" height=\"166\" srcset=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/single-variable.png 494w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/single-variable-300x101.png 300w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/single-variable-260x87.png 260w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/single-variable-50x17.png 50w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/single-variable-200x67.png 200w\" sizes=\"auto, (max-width:767px) 480px, 494px\" \/><\/p>\n<p><em>Update:<\/em><\/p>\n<p>Avoid nesting in other operators too.\u00a0 For example in the ForAll function.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1716\" src=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/nested-operations.png\" alt=\"\" width=\"672\" height=\"22\" srcset=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/nested-operations.png 672w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/nested-operations-300x10.png 300w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/nested-operations-260x9.png 260w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/nested-operations-50x2.png 50w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/nested-operations-200x7.png 200w\" sizes=\"auto, (max-width:767px) 480px, 672px\" \/><\/p>\n<h5>If statement syntax<\/h5>\n<p>Don\u2019t \u2018nest\u2019 secondary logical tests by explicitly writing If after the initial statement.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1629\" src=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-4.jpg\" alt=\"\" width=\"310\" height=\"156\" srcset=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-4.jpg 310w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-4-300x151.jpg 300w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-4-260x131.jpg 260w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-4-50x25.jpg 50w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-4-139x70.jpg 139w\" sizes=\"auto, (max-width:767px) 310px, 310px\" \/><\/p>\n<p>Do write secondary logical tests by simply writing out the logical test (w\/o the \u2018If\u2019).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1628\" src=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-3.jpg\" alt=\"\" width=\"293\" height=\"133\" srcset=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-3.jpg 293w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-3-260x118.jpg 260w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-3-50x23.jpg 50w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-3-154x70.jpg 154w\" sizes=\"auto, (max-width:767px) 293px, 293px\" \/><\/p>\n<h5><em>Update:\u00a0<\/em>Expensive calls<\/h5>\n<p>Do not make expensive calls before navigating to the next page.\u00a0 Try to make the loading of the next page instant and then in the background on the next page make the calls in the OnVisible page property.\u00a0 Use a loading dialog if necessary to let the user know progress is happening behind the scenes.<\/p>\n<p>Here is a bad example in an <strong>OnSelect<\/strong> event that goes to the next page.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1717\" src=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/expensive-call-before-nav.png\" alt=\"\" width=\"1025\" height=\"228\" srcset=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/expensive-call-before-nav.png 1025w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/expensive-call-before-nav-300x67.png 300w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/expensive-call-before-nav-768x171.png 768w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/expensive-call-before-nav-1024x228.png 1024w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/expensive-call-before-nav-260x58.png 260w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/expensive-call-before-nav-50x11.png 50w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/expensive-call-before-nav-200x44.png 200w\" sizes=\"auto, (max-width:767px) 480px, (max-width:1025px) 100vw, 1025px\" \/><\/p>\n<p>Here\u2019s a better example in the <strong>OnSelect<\/strong> event:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1718\" src=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/proper-call-before-nav.png\" alt=\"\" width=\"235\" height=\"30\" srcset=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/proper-call-before-nav.png 235w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/proper-call-before-nav-50x6.png 50w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/proper-call-before-nav-200x26.png 200w\" sizes=\"auto, (max-width:767px) 235px, 235px\" \/><\/p>\n<p>And in the <strong>OnVisible<\/strong> event in the next page:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1719\" src=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/proper-call-after-nav.png\" alt=\"\" width=\"413\" height=\"366\" srcset=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/proper-call-after-nav.png 413w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/proper-call-after-nav-300x266.png 300w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/proper-call-after-nav-165x146.png 165w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/proper-call-after-nav-50x44.png 50w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/proper-call-after-nav-79x70.png 79w\" sizes=\"auto, (max-width:767px) 413px, 413px\" \/><\/p>\n<h5>Minimize the number of controls you create<\/h5>\n<p>For example, instead of having 4 image controls laying on top of each other with different Visible property settings, use one image with logic in its Image property to show different images.<\/p>\n<p><a href=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-5.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1630 size-full\" src=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-5.jpg\" alt=\"\" width=\"1363\" height=\"209\" srcset=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-5.jpg 1363w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-5-300x46.jpg 300w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-5-768x118.jpg 768w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-5-1024x157.jpg 1024w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-5-260x40.jpg 260w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-5-50x8.jpg 50w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-5-200x31.jpg 200w\" sizes=\"auto, (max-width:767px) 480px, (max-width:1363px) 100vw, 1363px\" \/><\/a><\/p>\n<h5>Use parent\/child relationships for relative styling<\/h5>\n<p>Have one control\u2019s styling be used as the master to style other controls.\u00a0 In general,\u00a0use relative styling for the color, fill, x, y, width, height properties.<\/p>\n<p><a href=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-6.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1631 size-full\" src=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-6.jpg\" alt=\"\" width=\"866\" height=\"356\" srcset=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-6.jpg 866w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-6-300x123.jpg 300w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-6-768x316.jpg 768w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-6-260x107.jpg 260w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-6-50x21.jpg 50w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-6-170x70.jpg 170w\" sizes=\"auto, (max-width:767px) 480px, (max-width:866px) 100vw, 866px\" \/><\/a><\/p>\n<h5>Galleries<\/h5>\n<p>Use galleries for almost everything that is repetitive and linear.<\/p>\n<p>The brute force method may be the fastest to make initially, but it will be very painful to modify later.<\/p>\n<p>If you have a series of info\/controls to present which seem repetitive, always consider if you can combine a clever internal collection with a gallery.<\/p>\n<p><a href=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-7.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1632 size-full\" src=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-7.jpg\" alt=\"\" width=\"673\" height=\"399\" srcset=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-7.jpg 673w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-7-300x178.jpg 300w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-7-246x146.jpg 246w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-7-50x30.jpg 50w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-7-118x70.jpg 118w\" sizes=\"auto, (max-width:767px) 480px, 673px\" \/><\/a><\/p>\n<p><strong>Update 10-29-2018:\u00a0<\/strong>Nesting gallery controls inside fluid grid controls is not supported and should not be done.<\/p>\n<h5>Forms<\/h5>\n<p>Use forms for repetitive data entry fields.<\/p>\n<p>Use forms to quickly group a number of fields versus using several textboxes.<\/p>\n<p>A form for data like this is much easier to work with than individual textboxes because Forms allow you to take advantage of parent\/child relationships to implement relative styling.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1633\" src=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-8.jpg\" alt=\"\" width=\"269\" height=\"432\" srcset=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-8.jpg 269w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-8-187x300.jpg 187w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-8-91x146.jpg 91w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-8-31x50.jpg 31w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PA-Code-8-44x70.jpg 44w\" sizes=\"auto, (max-width:767px) 269px, 269px\" \/><\/p>\n<h5>Code comments\u00a0and documentation<\/h5>\n<p>COMMENT YOUR CODE!<\/p>\n<p>To comment code in PowerApps you can use this simple trick; simply put your comments in quotes, like this:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1613\" src=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PACommentCode.jpg\" alt=\"\" width=\"339\" height=\"61\" srcset=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PACommentCode.jpg 339w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PACommentCode-300x54.jpg 300w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PACommentCode-260x47.jpg 260w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PACommentCode-50x9.jpg 50w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PACommentCode-200x36.jpg 200w\" sizes=\"auto, (max-width:767px) 339px, 339px\" \/><\/p>\n<p>Create pages to document the collections and variables used in the PowerApp.\u00a0 Don&#8217;t link to these pages from the other pages in your app, they are only seen when the PowerApp is open in edit mode.<\/p>\n<p>Here&#8217;s an example from the Microsoft PowerApp Company Pulse template.<\/p>\n<p><a href=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PACollectionsAndVariables.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1615 size-full\" src=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PACollectionsAndVariables.jpg\" alt=\"\" width=\"742\" height=\"611\" srcset=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PACollectionsAndVariables.jpg 742w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PACollectionsAndVariables-300x247.jpg 300w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PACollectionsAndVariables-177x146.jpg 177w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PACollectionsAndVariables-50x40.jpg 50w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PACollectionsAndVariables-85x70.jpg 85w\" sizes=\"auto, (max-width:767px) 480px, 742px\" \/><\/a><\/p>\n<p>Create pages to document the setup process for your PowerApp.\u00a0 Don&#8217;t link to these pages from the other pages in your app, they are only seen when the PowerApp is open in edit mode.\u00a0 Most PowerApps rely on a data source you must create, like a SharePoint list, an Excel document, a CDS Entity, or a Flow.\u00a0 Document how to create the data sources and any other assets your PowerApp relies upon to work.<\/p>\n<p>Here&#8217;s an example from the Microsoft PowerApp Company Pulse template.<\/p>\n<p><a href=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PASetings1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1617 size-full\" src=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PASetings1.jpg\" alt=\"\" width=\"749\" height=\"853\" srcset=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PASetings1.jpg 749w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PASetings1-263x300.jpg 263w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PASetings1-128x146.jpg 128w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PASetings1-44x50.jpg 44w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PASetings1-61x70.jpg 61w\" sizes=\"auto, (max-width:767px) 480px, 749px\" \/><\/a><\/p>\n<h5>Configuration values<\/h5>\n<p>Use textboxes in the setup pages to make it very easy for you to change application settings without editing code.\u00a0 This allows the folks who deploy your application to quickly set these values and reduces the chance our code gets messed up during deployment.\u00a0 Think of this like the Application Settings screen for an ASP.NET web application in the Azure portal that allows you to set the Applications Settings you could also set in the web.config file.<\/p>\n<p>Here&#8217;s an example from the Microsoft PowerApp Company Pulse template.\u00a0 Here you can see textboxes that allow the PowerApps admin to configure settings values.<\/p>\n<p><a href=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PASetings2.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1618 size-full\" src=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PASetings2.jpg\" alt=\"\" width=\"720\" height=\"841\" srcset=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PASetings2.jpg 720w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PASetings2-257x300.jpg 257w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PASetings2-125x146.jpg 125w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PASetings2-43x50.jpg 43w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PASetings2-60x70.jpg 60w\" sizes=\"auto, (max-width:767px) 480px, 720px\" \/><\/a><\/p>\n<p>Here you can see the name of the textbox control used to hold the Twitter account settings value.<\/p>\n<p><a href=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PASetings3.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1620 size-full\" src=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PASetings3.jpg\" alt=\"\" width=\"995\" height=\"373\" srcset=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PASetings3.jpg 995w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PASetings3-300x112.jpg 300w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PASetings3-768x288.jpg 768w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PASetings3-260x97.jpg 260w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PASetings3-50x19.jpg 50w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PASetings3-960x360.jpg 960w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PASetings3-187x70.jpg 187w\" sizes=\"auto, (max-width:767px) 480px, (max-width:995px) 100vw, 995px\" \/><\/a><\/p>\n<p>Here you can see where the value is used to return Tweets for the Twitter account from the Twitter connector.<\/p>\n<p><a href=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PASetings4.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1621 size-full\" src=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PASetings4.jpg\" alt=\"\" width=\"1025\" height=\"74\" srcset=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PASetings4.jpg 1025w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PASetings4-300x22.jpg 300w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PASetings4-768x55.jpg 768w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PASetings4-1024x74.jpg 1024w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PASetings4-260x19.jpg 260w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PASetings4-50x4.jpg 50w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PASetings4-200x14.jpg 200w\" sizes=\"auto, (max-width:767px) 480px, (max-width:1025px) 100vw, 1025px\" \/><\/a><\/p>\n<h5>Common Data Service (CDS)<\/h5>\n<p>Use a single screen to handle edit\/insert operations.<\/p>\n<p>If possible, use a CardGallery to handle updating data instead of referencing individual controls in a Patch function.<\/p>\n<p>When naming context variables, indicate which record they are associated with.<\/p>\n<h5>Before moving a PowerApp between environments do the following things.<\/h5>\n<p>Remove the data sources.\u00a0 Make sure you provide instructions on the setup pages that describe how to add them back to the application.\u00a0\u00a0Here&#8217;s an example from the Microsoft PowerApp Company Pulse template where we do that.<\/p>\n<p><a href=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PASetings5.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1624 size-full\" src=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PASetings5.jpg\" alt=\"\" width=\"426\" height=\"732\" srcset=\"https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PASetings5.jpg 426w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PASetings5-175x300.jpg 175w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PASetings5-85x146.jpg 85w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PASetings5-29x50.jpg 29w, https:\/\/toddbaginski.com\/blog\/wp-content\/uploads\/2018\/02\/PASetings5-41x70.jpg 41w\" sizes=\"auto, (max-width:767px) 426px, 426px\" \/><\/a><\/p>\n<p>Make sure all your application settings are defined.\u00a0 For example, choose an icon (don&#8217;t use the generic one that it comes pre-set with!), give the PowerApp a name, description and category, and select a background color.\u00a0 If you want to use a background color that is not in the color picker see <a href=\"https:\/\/toddbaginski.com\/blog\/how-to-use-a-custom-background-color-on-the-powerapp-loading-screen\/\" target=\"_blank\" rel=\"noopener\">this article<\/a> on my blog.<\/p>\n<h5>Excel formatting<\/h5>\n<p>PowerApps use DataTables in Excel to connect to data in Excel worksheets.\u00a0 Keep these things in mind when creating Excel documents as data sources.<\/p>\n<p style=\"padding-left: 30px;\">Name your DataTables with a descriptive name, you will see it in the PowerApp when you write the code to connect to it.<\/p>\n<p style=\"padding-left: 30px;\">Use one DataTable per worksheet.<\/p>\n<p style=\"padding-left: 30px;\">Name the DataTable and Worksheet the same.<\/p>\n<p style=\"padding-left: 30px;\">Use descriptive column names in the Data Tables.<\/p>\n<p style=\"padding-left: 30px;\">Use Pascal casing<\/p>\n<h5>Multiple form factors<\/h5>\n<p>When you make the same PowerApp and target both Phone and Tablet layouts, first create one version of the PowerApp, run it through testing and finalize it.\u00a0 Then, convert it to the other version before you modify the layout and screens.\u00a0 This ensures that your expressions, controls, variables, data sources, etc. all have the same names.\u00a0 This makes it MUCH easier to support the PowerApps and develop it.\u00a0 See <a href=\"https:\/\/toddbaginski.com\/blog\/how-to-convert-a-powerapp-from-one-layout-to-another\/\" target=\"_blank\" rel=\"noopener\">this article<\/a> on my blog to see how to convert one form factor to another.<\/p>\n<h5>Related articles<\/h5>\n<p>I encourage you to read these articles from Mehdi as well.<\/p>\n<p><a href=\"https:\/\/powerapps.microsoft.com\/en-us\/blog\/performance-considerations-with-powerapps\/\" target=\"_blank\" rel=\"noopener\">Performance considerations with PowerApps<\/a><\/p>\n<p><a href=\"https:\/\/powerapps.microsoft.com\/en-us\/blog\/tips-for-a-maintainable-extensible-app\/\" target=\"_blank\" rel=\"noopener\">Tips for making your apps more maintainable<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>All of these coding guidelines and tips have been incorporated into the official PowerApps Canvas App Coding Standards and Guidelines whitepaper by Pat Dunn and myself.\u00a0<span class=\"excerpt-hellip\"> [\u2026]<\/span><\/p>\n","protected":false},"author":1,"featured_media":1646,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[103,96,46,104,121],"tags":[42,10,54,112],"class_list":["post-1599","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cloud","category-mobile","category-most-popular","category-office-365","category-powerapps","tag-cloud","tag-custom-development","tag-mobile","tag-powerapps"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts\/1599","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/comments?post=1599"}],"version-history":[{"count":45,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts\/1599\/revisions"}],"predecessor-version":[{"id":1849,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts\/1599\/revisions\/1849"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/media\/1646"}],"wp:attachment":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/media?parent=1599"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/categories?post=1599"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/tags?post=1599"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}