June 23, 2024

SamTech 365

PowerPlatform, Power Apps, Power Automate, PVA, SharePoint, C#, .Net, SQL, Azure News, Tips ….etc

PowerApps Best Practices – Naming Conventions

Following the release of the Microsoft PowerApps Canvas App Coding Standards and Guidelines document couple of weeks ago, I am going in a series of articles to cover different aspects of building stable and performant PowerApps Applications.

Coding Standards and Guidelines

In today’s article, I will cover the naming conventions for controls in PowerApps.

PowerApps Controls Naming Conventions

As the majority of programming languages have a preferred naming convention (for controls, variables …etc.), whether you want to use “camel case” or “Pascal case”, it is really up to you.

I have to highlight that there is nothing wrong with naming your controls label1, label2 if you are building apps for learning only. However, good luck with large business applications, with hundred of controls.

Camel Case

Following the Camel Case, your controls and variables will begin with a lowercase prefix, followed by a capital letter for each word (after the first).

txtSelectUserDropDown

Pascal Case or Upper Camel Case

Similar to the Camel case except that all the first letters of the control or variable will be in upper case.

TxtSearchUser

Naming Conventions

As you build your app with multiple screens, controls and data sources, it is important to follow a certain naming convention and make sure these are consistent across all your app.

1. Screens Names

Ideally the screens names should tell clearly the purpose of each screen.

Very important ! for accessibility needs, especially for the vision accessibility needs, you need to remember that the screen names are read aloud by screen readers, so be sure the name is self explanatory.

It is recommended to include the word “screen” in the screen names, for example:

1.1 Good screens names:

Home Screen
Products Screen
Help Screen

1.2 Bad screens names:

Dashboard
RequestDetails
ListOfProductsScreen

 

2. Controls Names

Ideally, controls’ names should use the camel case and follow the following format:

  • three letters describing the type (txt, btn, crd, img, lbl …etc)
  • Followed by the purpose of the control.

2.1 Good controls names:

lblUserName
txtSearchQuery
imgLogo
btnSubmitForm

2.2 Bad controls names:

label_search_query
TextEnterYourEmail
Image_Logo_192x192
ButtonSumit1

2.3 Abbreviations for controls:

Button –> btn
Canvas –> can
Card –> crd
Collection –> col
Dates –> dte
Combo Box –> cmb
Drop Down –> drp
Form –> frm
Gallery –> gal
Group –> grp
Icon –> ico
Image –> img
Label –> lbl
Shape –> shp
Table –> tbl
Text Input –> txt
Timer –> tim

 

3. Variables scopes

We have to be careful with the variables used in the app. Certain variables have a global scope in your app, which might lead to some sort of confusion if not names properly.

Any variable you define with the Set function has an app wide scope.

In contrary, Context variables live in the screen where they are declared from.

Global Variable : gblMyVariable

Context Variables : locTotalValue

 

1