Overlays & Menus

Popover with Form

Added Aug 12, 2026

A wider popover panel with a title, description, and a small 4-row form (Host/Port/Timeout/Retries): an editable settings card revealed on click. Inspired by the shadcn/ui PopoverDemo composition.

CopySnips Live Preview

How to Use

On the Settings tab, edit the trigger button text, popover title, and description. The 4 form rows (Host/Port/Timeout/Retries) are fixed; edit galPopoverFormFields.Items directly in the pasted YAML to relabel, add, or remove rows. The Preview tab and the copyable YAML update together.
Paste the YAML into Power Apps Studio (Ctrl+V). Two independent top-level controls are added: btnPopoverFormTrigger (the button) and conPopoverFormPanel (the floating panel), positioned directly below it. They are NOT nested, the same trigger+panel pattern used by Combobox/Avatar Dropdown/Popover, keeping every size literal instead of computed from cross-referenced siblings.
The form rows are a Gallery (galPopoverFormFields) with one row template, the same Gallery-driven pattern as Combobox's option list and Avatar Dropdown's menu, rather than 4 separate hardcoded rows. Each row's Classic/TextInput is genuinely editable (Default:=ThisItem.Value, not DisplayMode.View); typing in it doesn't write back to the Items array, matching the shadcn/ui source's own uncontrolled defaultValue inputs. Its FocusedBorderThickness is 1 (unlike the trigger button's 0): a visible focus outline while typing is wanted here.
Click the button to open the popover, click it again to close it. Click-outside-to-close isn't reliably available in Classic Power Apps controls (same limitation as Combobox/Avatar Dropdown/Popover).
No OnVisible initialisation needed: the popover starts closed.

Problem Solved

Provides a ready-made trigger+floating-panel pattern for a small settings form (label+input rows), a very common UI piece (e.g. quick config, inline editing), which Power Apps has no native "popover" control for.

Integration

Trigger text, title, and description are plain settings-driven text substituted directly into the copied YAML. Form row labels/values live in galPopoverFormFields.Items (a fixed array); edit that array directly in the pasted YAML. Read typed values from each row's inputPopoverFormFieldValue.Text, or wire up a Submit action of your own (none is included by default, matching the source, which has no submit button either).

- btnPopoverFormTrigger:
    Control: Classic/Button@2.2.0
    Properties:
      Align: =Align.Center
      BorderColor: =RGBA(226, 232, 240, 1)
      BorderStyle: =BorderStyle.Solid
      BorderThickness: =1
      Color: =RGBA(15, 23, 42, 1)
      Fill: =RGBA(255, 255, 255, 1)
      FocusedBorderThickness: =0
      Font: =Font.'Open Sans'
      FontWeight: =FontWeight.Semibold
      HoverBorderColor: =RGBA(148, 163, 184, 1)
      HoverColor: =RGBA(15, 23, 42, 1)
      HoverFill: =RGBA(248, 250, 252, 1)
      OnSelect: =Set(varPopoverFormOpen, !varPopoverFormOpen)
      PressedFill: =RGBA(241, 245, 249, 1)
      RadiusBottomLeft: =8
      RadiusBottomRight: =8
      RadiusTopLeft: =8
      RadiusTopRight: =8
      Size: =11
      Text: ="Server Settings"
      Height: =36
      Width: =150
      X: =20
      Y: =20
- conPopoverFormPanel:
    Control: GroupContainer@1.5.0
    Variant: ManualLayout
    Properties:
      BorderColor: =RGBA(226, 232, 240, 1)
      BorderThickness: =1
      DropShadow: =DropShadow.Bold
      Fill: =RGBA(255, 255, 255, 1)
      Height: =240
      RadiusBottomLeft: =8
      RadiusBottomRight: =8
      RadiusTopLeft: =8
      RadiusTopRight: =8
      Visible: =varPopoverFormOpen
      Width: =310
      X: =20
      Y: =64
    Children:
      - conPopoverFormBody:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            DropShadow: =DropShadow.None
            Height: =Parent.Height
            LayoutAlignItems: =LayoutAlignItems.Stretch
            LayoutDirection: =LayoutDirection.Vertical
            LayoutGap: =10
            PaddingBottom: =16
            PaddingLeft: =16
            PaddingRight: =16
            PaddingTop: =16
            Width: =Parent.Width
          Children:
            - conPopoverFormHeader:
                Control: GroupContainer@1.5.0
                Variant: AutoLayout
                Properties:
                  DropShadow: =DropShadow.None
                  FillPortions: =0
                  Height: =45
                  LayoutAlignItems: =LayoutAlignItems.Stretch
                  LayoutDirection: =LayoutDirection.Vertical
                  LayoutGap: =2
                  LayoutMinHeight: =0
                  LayoutMinWidth: =0
                Children:
                  - lblPopoverFormTitle:
                      Control: Label@2.5.1
                      Properties:
                        AlignInContainer: =AlignInContainer.Stretch
                        Color: =RGBA(15, 23, 42, 1)
                        Font: =Font.'Open Sans'
                        FontWeight: =FontWeight.Semibold
                        Height: =18
                        LayoutMinHeight: =0
                        LayoutMinWidth: =0
                        Size: =11
                        Text: ="Server Configuration"
                  - lblPopoverFormDescription:
                      Control: Label@2.5.1
                      Properties:
                        AlignInContainer: =AlignInContainer.Stretch
                        Color: =RGBA(100, 116, 139, 1)
                        Font: =Font.'Open Sans'
                        Height: =25
                        LayoutMinHeight: =0
                        LayoutMinWidth: =0
                        Size: =10
                        Text: ="Configure your server connection."
                        VerticalAlign: =VerticalAlign.Top
            - galPopoverFormFields:
                Control: Gallery@2.15.0
                Variant: Vertical
                Properties:
                  DelayItemLoading: =false
                  FillPortions: =0
                  Height: =160
                  Items: =[{Label:"Host",Value:"localhost"}, {Label:"Port",Value:"8080"}, {Label:"Timeout",Value:"30s"}, {Label:"Retries",Value:"3"}]
                  LayoutMinHeight: =0
                  LayoutMinWidth: =0
                  ShowScrollbar: =false
                  TemplatePadding: =0
                  TemplateSize: =40
                Children:
                  - lblPopoverFormFieldLabel:
                      Control: Label@2.5.1
                      Properties:
                        Color: =RGBA(15, 23, 42, 1)
                        Font: =Font.'Open Sans'
                        Height: =16
                        Size: =10
                        Text: =ThisItem.Label
                        Width: =90
                        Y: =8
                  - inputPopoverFormFieldValue:
                      Control: Classic/TextInput@2.3.2
                      Properties:
                        BorderColor: =RGBA(226, 232, 240, 1)
                        BorderThickness: =1
                        Color: =RGBA(15, 23, 42, 1)
                        Default: =ThisItem.Value
                        FocusedBorderThickness: =1
                        Font: =Font.'Open Sans'
                        Height: =32
                        HoverFill: =Color.Transparent
                        RadiusBottomLeft: =6
                        RadiusBottomRight: =6
                        RadiusTopLeft: =6
                        RadiusTopRight: =6
                        Size: =10
                        Width: =170
                        X: =106

Implementation

Copies the customized component code directly to your clipboard. Use Ctrl+V in Power Apps Studio.

Something not pasting right? Troubleshooting guide

Popover with Form

Content

How to Use

Problem Solved

Integration

YAML Code

Implementation