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 naming convention

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

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top