How to Notify User if Required Fields are Empty in Canvas Apps

Overview

In this tutorial we will cover how to let the user know they have not filled out all the required information on a form. Notifications will be visual queues such as a error banner at the top, setting the fill of required fields red, and setting focus to the field without data.

YouTube

Required Field Identifiers

To inform users of what fields are required can be done by using labels with a red asterisk. Hopefully, when seeing this visual queue, users will populate the data, but this is not always the case.

Note – Since the asterisk color is different from the label color, you will need to use a different label.

Update Button OnSelect

Go to the OnSelect property of the button that is saving data. In this property, we will update the formula to perform the following actions:

• Check if any of the required fields are blank using OR condition
  • If field is a text input, IsBlank(TextInput1.Text) is used to verify text is present
  • If field is a date picker, IsBlank(DatePicker1.SelectedDate) is used to verify a date is present
  • If field is a combo box or drop down, IsBlank(ComboBox1.Selected) is used to confirm a selection has been made
• Notify the user that required information has not been populated
• Update a variable (requiredDataMissing) to identify required data is missing. This will be used to display a red fill for fields with missing data
• Set focus to the text input with missing data. Note – SetFocus() function cannot be used on Drop down, Combo box and dates

If the conditions above are not met for missing required data, the formula will proceed with the appropriate actions ex) updating the database.

If(IsBlank(text_AccountName_DV.Text) || IsBlank(combo_Status_DV.Selected) || IsBlank(date_LastContacted_DV.SelectedDate),
    Notify("Required information is missing", NotificationType.Error, 10000);
    UpdateContext({requiredDataMissing: true});

    If(IsBlank(text_AccountName_DV.Text),
        SetFocus(text_AccountName_DV);
    ),

    Patch(Accounts, gallery_Accounts_DV.Selected,
        {
            'Account Name': text_AccountName_DV.Text,
            'Account Status': combo_Status_DV.Selected.Value,
            'Last Contacted': date_LastContacted_DV.SelectedDate
        }
    );

    Refresh(Accounts);

    UpdateContext({requiredDataMissing: false})
)

Update Fill Property for Required Fields

For each required field, go to the fill property and update it to perform the following actions:

• If the variable requiredDataMissing is true and the field is blank, display a red fill
• Otherwise, display black fill by default

If(requiredDataMissing && IsBlank(Self.Text), 
    RGBA(255, 85, 85, 0.1), 
    RGBA(255, 255, 255, 1)
)

Final Result

If you select your button and there is missing required data, you will receiving the notification and red fill in input controls like below.

Once the user starts entering in required data, the fill will go back to the default fill which is white in this case.