NEIL PARKHURST

As I prepare for my MB2-716 exam I’m producing a series of blog posts that collectively should help others revising for the MB2-716 Certification. (Microsoft Dynamics 365 customization and Configuration.) This time I will look at mobile form customizations.

I have already covered much of the content connected with the skills measured on mobile. You can see my earlier post here. But it will do no harm to re-read the skills measured statement, I have shown below.

This time I am going to focus on the custom controls side of mobile forms. This is really important as how users interact with tablets and phones can be significantly different to the full web client on a laptop or desktop. You typically hold your phone / tablet whilst using it, and almost always you’ll be using only a touch screen. (No mouse or keyboard!) And whilst using that screen very commonly you’ll be holding the device in one hand and touching the screen with the other. With a phone, we often use them in one handed mode then just our thumb is used to navigate the screen.

Well-designed mobile forms will take this into account! This means making use of different input controls for the mobile experience. And possibly even offering different controls between tablet and phone!

By way of an example, let’s look at my customized opportunity form in the full web client. I’ve played around with a few fields but it looks pretty standard.

Now let’s view that same for on a tablet ….

I am not presenting this as a well-designed screen! In fact possibly quite the reverse!! But what I hope you can see is that on my tablet version of the form the budget amount, purchase process, decide go/no-go and estimated revenue fields have allchanged to have touch friendly controls. Such as sliders, switches and touch option sets.

When working with numbers we have several possible controls;

Number input

With this control the user enters a number but can then increment (or decrement)using the + and – buttons.

Radial knob

Great for entry of a number using your thumb!

Arc knob

Similar to the radial knob but on an arc. (Ideal for entry of a percentage amount!)

Linear gauge

Slide the circle to increase the number values.

Linear slider

Another variation of the a slide, slide the bar to increase the value.

Bullet graph

Great for showing achievement against a target / goal. In my budget entry below. My target was £700,000. (The reg line). Anything in the darker blue areas is poor. Anothing in the light blue area is ok. (Or great if above the red line.)

Star rating

Replaces the entry of a whole number on scale 0 to 5.

And for data entry we have more controls;

Optionset

Single click to select items from an optionset. (Ideal when you have just two or three possible options!)

Flip switch

Perfect for yes / no fields.

Input Mask

Input masks allow us to define the format of a text field. Useful when entering product codes, phone numbers, account numbers etc. As all of these fields could have a defined structure.

Auto-Complete

Auto complete are text fields but possible options can be offered to the users. When we set these up the possible options can come from an entity or option set.

Barcode Scanner

Use the camera on your phone to scan a barcode. This might be really useful in field service situations when assets could be tagged with barcodes etc. Clicking the barcode symbol will enable your camera and therefore the capture of a barcode.

Signature / Pen-input

The signature control can be added to a multi-line text field. Really useful for capture of a customer’s signature. This is a use once field. By that I mean that once a signature has been captured the field becomes read-only. And it can’t be changed.

Tip: These do not display correctly on the web client form! Therefore you might want to hide these fields from the web client!

Tip:
Multi-line fields default to 2,000 characters. You may need to increase this to say 3,000+ for this control to work.

There are also some controls that are connected with presenting information on forms;

Website preview

The website preview control is for fields that contain a url. With these a preview of the website can be shown right on the mobile form.

Multimedia

Used on url text fields. Allows you to play media directly in the mobile form. Enter a url, say a link to a you tube video. (Won’t play on the web client, therefore you might want to select the hide on web option.)

Customizing Controls.

Adding any of the controls I have mentioned above to your mobile forms is really easy.

First open the form you wish to customize and select an appropriate field. Make sure the field is of the “correct” type, as number controls will only show for numbers, text for text etc. Double click on the control and the field properties dialog will show. In here select the controls tab.

You can now use the “add control…” option.

Depending on the type of field you selected you will be presented with multiple control types that could be applied. In my example I selected a number field. Meaning I could use arc knob, bullet graph, linear slider etc.

Depending on the type of control you’ve selected there might be a number of properties to enter. Such as minimum or maximum values. In my example I’ve deliberately selected bullet graph that has quite a few options. (Many controls are much simpler!)

Also notice that I select if the control will show on phone or tablet. Meaning I could render different controls on web, phone and tablet.

Some controls will only apply to the mobile forms! Meaning you might want to use the “Hide on web” option. (Multimedia and signature controls might need you to select this option!)

Having made these changes you simply save the form, publish and re-load the mobile client to see your changes in action.

Tip: You can add editable grids on the mobile forms (and web forms) using a very similar approach!

I hope these notes will have helped with your MB2-716 revision. Adding various types of controls to forms and experimenting with how they behave on web, phone and tablet will be a useful exercise as part of your revision. Have fun!