Starting your app – good practices

Planning your controls

Now you have read my blog on Data Structure and have a great one in place, you are ready to get in and construct your app. You have put in a gallery and a form and are ready to write some code. What else do you have to do?

Firstly, planning to lay a foundation for your app, you need to know “where everything is”. You will have to refer to all of your controls (screens, galleries, forms, controls) constantly in your code. You are assisted in this endeavor by the built-in IntelliSense function, which “predicts” what you might want to type and displays it in a panel below where you are putting your code. Although this does not write code for you (and you can certainly put in values that are not what you are trying to do), but it does show you all the valid values that might apply at that stage of the code. Why am I mentioning this in particular – because you need to be able to start typing in a value you will already have an idea on what it is. Let me explain

The built-in automatic naming convention of Power Apps is OK for Data Cards, but pretty useless for anything else. Next week, can you remember exactly what DataCardValue23 holds? So now I am going to discuss proper naming conventions. These can be individual to your thoughts, but whatever you do, do it consistently.

Firstly, you already have the relevant field name, so that should form the “core” of the control name. Also, the most important ones to name are the ones containing data. You can do the labels for the sake of consistency, but they are not really necessary.

Next you have the Error and Star fields – no real need to rename these, but one tip here – if you are going to use the built-in SharePoint validation for things like compulsory fields, keep them on the controls where this is necessary, but if you are going to use your own validation (as I do) delete the lot and it saves overhead on the form loading (particularly relevant on large forms on mobile devices).

Below are some of the conventions I use.

• Screens – scrPurpose  – I also try to start these with different alpha letters for reasons discussed below
• Galleries – galListName – The name of the data source it is based on. If I have more than one gallery on different screens based on the same table, I put the first letter of the screen “Purpose” at the end. This rules also applies to all the controls listed below
• Variables – UpdateContext Variables varName, Set Variables gblName
• Forms – frmListName
• Data Cards – dcFieldName
• Text Fields – Text content – txFieldName
• Text Fields – Number content – tnFieldName
• Label – lbFieldName (if you do them)
• DatePickers – dpFieldName
• ComboBoxes – cbFieldName
• Dropdowns – ddFieldName
• Image controls – imFieldName
• Check Boxes – ckFieldName
• Toggle – tgFieldName

I could list the rest, but I am sure you will get the idea. As an example, a ComboBox with the Field Widgets in it on scrProjects would be cbWidgetsP

The point here is that once you get all of this in place, you will not be wondering whether the value you are after is DataCardValue23_1 or DataCardValue15_3, you have the Combo Box mentioned above, will start typing cbwid and the rest will immediately come up in the IntelliSense box for you to select. You will also know you have the correct field.

Also with this in mind, keep the names as short as reasonable practical, or you will be doing a lot of typing before what you want appears in IntelliSense.

While on the subject of Combo Boxes and Drop Downs, the output of these will be cbFieldName.Selected.xxxx where you will see xxxx being either Value, Result or a Field Name in IntelliSense.

Now you have got all your controls named with something that will make sense (not only to you now, but also a “future you” or another person looking at the code), you are ready to get into writing the code you need.

Group your controls

A small but very useful thing you can do it to group your controls into logical sets. On the Home tab, you will find the Group option. Select all the controls you require to be in the group and Select Group > Group. It is then good to give the group a logical name – I use grpxxxx for instance if I had a number of controls in a header on the Projects screen, I would include the header and all the controls into a Group called something like grpProjectsHead. The advantages of these include: –

• Organising your content into logical “containers” that make them much easier to find – not unlike Windows or Outlook folders.
• You can “bulk-set” some properties, in particular Visible and Reorder for all the controls in the group at the time. Note if you add additional controls after this they will not automatically take these properties.
• The entire Group can be moved on the screen together by and dragging.

If however you want to remove a control later, you will need to select Group > Ungroup and then if necessary put back the ones you wanted.

Design

Now are there now other things you might do in preparation of the app to make future changes much easier? If you are going to make changes to the design, I recommend you go the extra effort and capture all of this at App OnStart in Variables.

To explain, I generally use a colour scheme around a base colour (generally a dark one) with various shades of ColorFade on different elements. If you set this base color as a Variable (as well as the more commonly used lighter ones), you simply refer to these in the elements of all the controls.

So for example (this is a really dark blue)

Set(gblBaseCol,ColorFade(RGBA(9, 33, 98, 1),-30%));
Set(gblBaseHover,ColorFade(varBaseCol,85%));
Set(gblBaseShade,ColorFade(varBaseCol,90%));
Set(gblBasePress,ColorFade(varBaseCol,30%));
Set(gblBaseText,Black)

Sets the base, alternate row shade, pressed, hover and Text colours you can apply to all controls, so if in the future, you want the app to be Red, you simply change varBaseColor.

You can apply this logic to everything from particularly the colours above, to control heights and font type/sizes. If you are going to change them, seriously consider doing them in this way.