In this post I’ll explain the Canvas App naming conventions I use for screens and controls. This follows on from the previous post in which I discussed how and why I name variables and collections
Clear and consistent naming conventions ensure clarity for both the App Maker and anyone else looking at the code. In particular, good naming ensures screen readers pronounce appropriately named screens to assist visually impaired users
Screen Names
A screen name should describe its purpose in one or two words suffixed by the word ‘Screen’ using proper-case
It is important that plain-language is used so screen readers announce the screen clearly when the screen loads. For this reason, if a screen has more than one-purpose, consider spliting the functionality across multiple screens
A couple of examples of good screen names:
Order Form Screen
Approval Screen
Control Names
Although there is a visual indication of the individual type of control within the Canvas App tree menu, each control should also be named in a consistent format
I use a combination of the following, a prefix decribing the control type, the screen on which it us used, and it’s purpose. Camel-case is used with each item of information seperated by an underscore to make it easy to read
The example below is for a text input, located on the New Order Screen, whose purpose is to capture the first name of the person placing the order
txt_NewOrderScreen_FirstName
Further examples of control names:
drp_JoinerScreen_NewEmployee
btn_ContactScreen_SubmitForm
A list of control abbreviations is below
| Data Type | Abbreviation |
|---|---|
|
Add Picture |
pic |
|
Address Input |
add |
|
Audio |
aud |
|
Barcode Scanner |
bar |
|
Button |
btn |
|
Camera Control |
cam |
|
Canvas |
cvs |
|
Card |
crd |
|
Charts |
chr |
|
Check Box |
chk |
|
Container |
con |
|
Combo Box |
cmb |
|
Date Picker |
dte |
|
Dropdown |
drp |
|
Form |
frm |
|
Gallery |
gal |
|
Group |
grp |
|
HTML Text |
htm |
|
Icon |
ico |
|
Image |
img |
|
Label |
lbl |
|
List Box |
lst |
|
Map |
map |
|
Microphone |
mic |
|
Micorsoft Stream |
str |
|
PDF Viewer |
pdf |
|
Pen Input |
pen |
|
Radio |
rad |
|
Rating |
rtg |
|
Rich Text Editor |
rte |
|
Shape |
shp |
|
Slider |
sld |
|
Table |
tbl |
|
Text Input |
txt |
|
Timer |
tmr |
|
Toggle |
tgl |
|
Video |
vid |
Summary
Becuase of the importance of screen readers annoucing screen names correctly, the format of screen names needs to be as I’ve described above
The format of control names doesn’t have to be as perscriptive. After using other naming conventions in the past, I’ve now settled on using the above notation for controls as I find it the most descriptive and useful. If you have another preference then let me know in the comments section below