How to Customize the Submit Button Display Mode in Power Apps

by Evan Marcks | Jan 14, 2025

When building forms in Power Apps, ensuring users provide all required information before submission is crucial. One effective way to enforce this is by altering the DisplayMode property of the submit button. By disabling the button until all required fields are filled, you can improve data integrity and reduce incomplete submissions.

In this guide, we’ll demonstrate how to achieve this using conditional logic within the DisplayMode property.

The Logic Behind the DisplayMode Property

The DisplayMode property determines whether a control is enabled (DisplayMode.Edit), disabled (DisplayMode.Disabled), or read-only. By setting this property with a condition, you can control the state of the submit button based on the completion of required fields.

Here’s an example condition:

If(
    IsBlank(DataCardValue1.Text) || 
    IsBlank(DataCardValue8.SelectedDate) ||
    IsBlank(DataCardValue27.Selected) || 
    IsBlank(ComboBox2.Selected) || 
    IsBlank(DataCardValue6.Selected) ||
    !("All Employed Associates" in DataCardValue29.SelectedItems.Value),
    DisplayMode.Disabled,
    DisplayMode.Edit
)

Explanation of the Logic

IsBlank: This function checks if a field is empty or has no value.
Logical Operators (||, !): Combine multiple conditions to evaluate if any required field is incomplete or if a specific condition isn’t met.
DisplayMode.Disabled / DisplayMode.Edit: Specifies whether the submit button is active or inactive.

Understanding the Specific Condition

One of the conditions in the example involves this line:

!("All Employed Associates" in DataCardValue29.SelectedItems.Value)

This checks whether the value “All Employed Associates” is included in the selected items of DataCardValue29.

SelectedItems.Value: Retrieves the values of all selected items in a ComboBox or similar control.
in: Checks if a specific value exists in a collection or table.
!: Negates the condition, making it true if “All Employed Associates” is not selected.

Practical Use Case: For instance, if DataCardValue29 is a field where users select groups or categories, the form may require “All Employed Associates” to be explicitly included before allowing submission. This ensures critical group assignments are not missed.

Steps to Implement in Power Apps

Step 1: Identify Required Fields

Identify the fields in your form that must be completed before submission. These fields are usually represented as DataCardValue controls in Power Apps.

Step 2: Set the DisplayMode Property

Select the submit button in your Power Apps form and navigate to the DisplayMode property. Enter a condition like the example above, replacing DataCardValue1, DataCardValue8, etc., with the names of the controls in your app.

Step 3: Test the Form

Run your app and test the behavior of the submit button. Leave required fields blank to confirm the button remains disabled, and fill in all fields to ensure the button becomes enabled.

Enhancing the User Experience

Provide Error Messages: Add labels near fields to indicate what needs to be completed. Use the Visible property to show or hide these messages based on validation.
```
If(IsBlank(DataCardValue1.Text), true, false)
```
Style Disabled Buttons: Use the DisabledFill and DisabledColor properties to visually distinguish the button when it is disabled.
```
DisabledFill: RGBA(200, 200, 200, 1)
DisabledColor: RGBA(128, 128, 128, 1)
```

Include Tooltips: Add a tooltip to the submit button to inform users why it is disabled.

If(
    DisplayMode = DisplayMode.Disabled, 
    "Complete all required fields to enable the submit button.", 
    "Click to submit."
)

Best Practices

Keep Conditions Simple: Avoid overly complex conditions to ensure maintainability.
Combine Validation with Notifications: Use both visual indicators and tooltips to guide users.
Test Thoroughly: Simulate various scenarios to ensure the logic works as intended.

Conclusion

By customizing the DisplayMode property of the submit button, you can guide users through completing forms and ensure data accuracy. This approach not only improves user experience but also helps maintain the quality of submitted data.

For more information reach out to: EMarcks@mailctp.com