Control the display mode through a formula

  • 8 minutes

In Power Apps, the DisplayMode property of a control allows you to modify how controls and information look and function when using the app. For example, if you have a button on your screen and you want to show users when the button is selectable. The button looks normal when it's selectable, otherwise the button is disabled, and users can't select it. You can achieve functionality like this by configuring the DisplayMode property of the control. There are three DisplayModes on every control (except for a screen):

  • DisplayMode.Disabled

  • DisplayMode.Edit

  • DisplayMode.View

When you add a control to your app, by default, its display mode is DisplayMode.Edit.

Let's explore the different modes.

DisplayMode.Edit

Using the Button control as an example, when you set the DisplayMode property to DisplayMode.Edit, the button functions as you would expect. This means that users can interact with the button by selecting it. This also means that other properties for the control, such as OnSelect, are available to trigger actions when the button is selected.

DisplayMode.Disabled

Still using a Button control as an example, when the DisplayMode property is set to DisplayMode.Disabled, the button appears greyed out and you can't select it. The reason the control looks greyed out is because of the disabled properties. Each control has slightly different disabled properties, which determine how the control looks in this mode. These properties include:

  • DisabledBorderColor - The color of a control's border.

  • DisabledColor - The color of the text in a control.

  • DisabledFill - The background color of a control.

You can customize any of these properties to suit your needs, but the default values are a great start.

DisplayMode.View

Continuing with the Button control as our example, when the DisplayMode property is set to DisplayMode.View, the button looks exactly like when it's in DisplayMode.Edit, but it's not selectable. You can probably already see how this would be frustrating/confusing for end users. To elaborate a little from the example earlier, if you plan to have a button or buttons configured in your app that a user can only select at certain times, you should consider DisplayMode.Disabled instead of DisplayMode.View. While both modes don't allow the user to select the button, the disabled mode also gives a visual indication that it's not selectable.

Try it out

  1. Add three buttons to a canvas app screen.

  2. Name them "Edit", "Disabled", and "View", respectively.

  3. Select the "Disabled" button and update the DisplayMode property to:

    DisplayMode.Disabled

  4. Select the "View" button and update the DisplayMode property to:

    DisplayMode.View

  5. Put your app in preview mode and hover over and select the different buttons. Notice that the only one that changes color and is clickable, is the "Edit" button. This image shows how the color of the "Edit" button changes as you mouse over it. The others remain as they are. The image shows what the "Edit" button looks like while hovering over it in Preview mode. You should notice that the color looks slightly darker.

Screenshot of the three buttons with a box around the Edit button.

Each Control functions slightly differently, so DisplayMode for one control might not affect another control the same way. For more information about the various controls, see Controls and Properties in Power Apps.

So, now we learned that the only controls your users can interact with are controls where the Visible property is true and where their DisplayMode is DisplayMode.Edit.