Faster data entry with the SetFocus function

Welcome the SetFocus function to Canvas apps!  You’ve got data to enter.  Get it done fast by having the app position the cursor in the input field where we should begin.  And when you go to validate, the app can take you directly to the offending entry, even if it scrolled off screen.

The above are just a few good reasons why you may want to move the input focus for your users.  Users can always set the focus themselves by using the tab key, touch, mouse, or other gestures, but doing it automatically for them can enhance efficiency, discoverability, and accessibility.

Let’s look at some concrete examples.  There are directions for creating these examples and more details on SetFocus in the documentation.

Many shopping carts allow the customer to reuse the shipping address as the billing address, alleviating the need to enter the same information twice. If a different billing address is desired, the billing address text input boxes are enabled, and it is helpful to guide the customer to these newly enabled controls for faster data entry.

In this example, when we uncheck the Check box control, focus automatically moves to the Name text input control.  To accomplish this, the Check box control’s Uncheck property is to the formula:

 SetFocus( BillingName )

Pretty easy.  Does SetFocus make a huge difference here?  No.  In fact using SetFocus is always optional as the user can accomplish the same behavior by using the keyboard, touch, mouse, or other means.  The point is they don’t need to.   As makers, we can help our users by doing this small amount of work for them, guiding their eyes to what they need to fill in next, making their data entry more efficient by keeping fingers on the keyboard, all of which leads to increased satisfaction for your app.

Another example.  When validating a form, it can be very helpful to not only display a message but to take the user to the offending field. It can be particularly helpful if the field in question is scrolled off the screen and not visible.

If you watch the above animation carefully, you’ll notice that the mouse cursor never leaves the top of the screen, yet the body of the screen is scrolling down.  That’s because the validation logic not only uses Notify to display a message but also uses SetFocus to move the input focus, even if the offending control is scrolled off the screen and cannot be seen:

If( IsBlank( Name ),           Notify( "Name requires a value", Error );               SetFocus( Name ),
    IsBlank( Street1 ),        Notify( "Street Address 1 requires a value", Error );   SetFocus( Street1 ),
    IsBlank( Street2 ),        Notify( "Street Address 2 requires a value", Error );   SetFocus( Street2 ),
    IsBlank( City ),           Notify( "City requires a value", Error );               SetFocus( City ),
    IsBlank( County ),         Notify( "County requires a value", Error );             SetFocus( County ),
    IsBlank( StateProvince ),  Notify( "State or Province requires a value", Error );  SetFocus( StateProvince ),
    IsBlank( PostalCode ),     Notify( "Postal Code requires a value", Error );        SetFocus( PostalCode ),
    IsBlank( Phone ),          Notify( "Contact Phone requires a value", Error );      SetFocus( Phone ),
    Notify( "Form is Complete", Success )
)

Before going on, it is important to note that SetFocus does not work with controls in the Gallery control, Edit form control, or within a component.  Although this example looks like a form control, it is in fact a Scrollable screen, available under the Insert tab, New screen button.

Similar to guiding users to a newly exposed control as we did in the first example, it is helpful to focus the first input control for immediate data entry when displaying a data entry screen.

In this animation, the data entry screen on the left does not use SetFocus. Upon display no input control has focus, requiring the user to select the Name field before a value can be entered.

On the right we have exactly the same app with one modification. The OnVisible property of the data entry screen has the formula:

SetFocus( Name )

This sets the focus to the Name field automatically. The user can begin entering text immediately.

There are a few more SetFocus limitations to be aware of:

• It is worth repeating: SetFocus cannot be used with a control in a Gallery control, Edit form control, or inside a component.
• SetFocus can only be used with the Button, Icon, Image, Label, and TextInput controls.  We will be making it available for other controls in time.
• The control must be on the same screen as the formula that is calling the SetFocus function.
• The control needs to be enabled.  If it is disabled, the SetFocus is ignored.
• On Apple iOS, the soft keyboard will only be displayed automatically if SetFocus was initiated by a direct user action. For example, invoking from a button’s OnSelect property will display the soft keyboard while invoking from a screen’s OnVisible will not.