Edit

Share via

Panel control (experimental)

  • Article

[This article is pre-release documentation and is subject to change.]

A control used to group content.

Panel control.

Important

  • This is an experimental feature.
  • Experimental features aren’t meant for production use and may have restricted functionality. These features are available before an official release so that customers can get early access and provide feedback.

Description

Panels are overlays that contain supplementary content and are used for complex creation, edit, or management experiences—for example, viewing details about an item in a list or editing settings.

This canvas component mimics the style and behavior of the Fluent UI Panel control.

Properties

Key properties

Property Description
Buttons A dataset that defines the buttons.
Title Text displayed in the title section.
Subtitle Optional. Text displayed under the title.
DialogWidth Width of the panel.
ContentX The X coordinate for the content area.
ContentY The Y coordinate for the content area.
ContentWidth The width of the panel's content area.
ContentHeight The height of the panel's content area.

Buttons properties

Property Description
Label The label displayed on the button
ButtonType Enumeration that determines the styling of the button. Choose between Standard and Primary 
Table(
  {
    Label: "Cancel",
    ButtonType: 'Microsoft.CoreControls.Button.ButtonType'.Standard 
  },{
    Label: "Ok", 
    ButtonType: 'Microsoft.CoreControls.Button.ButtonType'.Primary
  }
)

Style properties

Property Description
Overlay Color Color displayed in the overlay area.
DialogWidth The width of the panel (not to be confused with the control width, which should span the app width).
Position of the panel Provide the text value Right or Left to indicate which side of the screen the panel should be rendered on.
Theme Theme object. Leaving this blank will render the default Power Apps theme. See theming for guidance on how to configure.

Event properties

Property Description
OnCloseSelect Action expression that's executed when the close button is selected.
OnButtonSelect Action expression that's executed when one of the action buttons are selected.

Behavior

Configure panel visibility

The Panel's visibility can be toggled with a Boolean (true/false) type variable.

  1. Use the following Power Fx formula to display the dialog (e.g., the OnSelect property of a button control):

    UpdateContext({ showHideDialog: true })

  2. Assign the following values to the Panel:

    Property Value
    OnCloseSelect UpdateContext({ showHideDialog: false })
    Visible showHideDialog

Configure button actions

In the OnButtonSelect property of the panel, provide actions in an If() or Switch() condition based on the Self.SelectedButton.Label text value to define the action. Depending on the action, it is common to hide the Panel after the action is completed.

Switch( Self.SelectedButton.Label,
  "Ok", Notify("The Ok button was pressed.");
);

// Closes the panel
UpdateContext({ showHideDialog: false })

Format panel content

Associate a container with the content properties of the Panel to place content in the appropriate region of the screen. Make sure to associate the content's visibility with the Panel.

Steps to format content in a panel:

  1. Add the Panel (example name: cmp_panel)

  2. Add a container (example name: c_panelContent)

  3. Modify the following properties of c_panelContent:

    Property Value
    X cmp_panel.ContentX
    Y cmp_panel.ContentY
    Width cmp_panel.ContentWidth
    Height cmp_panel.ContentHeight
    Visible cmp_panel.Visible

Limitations

This canvas component can only be used in canvas apps and custom pages.