Overlays & Menus

Command

Added Aug 12, 2026

A search box paired with a grouped, icon-led command list: two headed groups, a separator, and one disabled item. Inspired by the shadcn/ui CommandDemo composition.

Suggestions

Settings

CopySnips Live Preview

How to Use

On the Settings tab, edit the search box's placeholder text, the two group heading labels (default "Suggestions"/"Settings"), and each of the 6 command items' Label, Icon (pick from the curated icon dropdown; each option shows the actual glyph), and Enabled toggle. The item COUNT is fixed at 6 (3 under the first heading, 3 under the second); there's no add/remove control, only in-place editing; the separator between the two groups isn't settings-driven. The Preview tab and the copyable YAML update together.
Paste the YAML into Power Apps Studio (Ctrl+V). One GroupContainer (conCommand) is added. Everything nests inside it via Vertical AutoLayout.
The search box has a magnifying-glass icon to its left (imgCommandSearchIcon) and genuinely filters the list as you type: galCommandItems.Items reads inputCommandSearch.Text directly and filters to rows whose Label contains that text (case-insensitive substring match), no screen variable needed. Headings and the separator always stay visible even if every item beneath them is filtered out; clearing the search restores the full list.
The whole list (2 group headings, 6 items, 1 separator) is ONE Gallery (galCommandItems) with a single shared row template; each row's Type field ("heading"/"separator"/"item") controls which parts of the template are visible for that row, so headings/separators/items don't need separate hardcoded controls.
Icons (including the search icon) are hand-drawn inline SVG (via Image + EncodeUrl), not Classic/Icon: the curated Icon dropdown's options don't map to Power Apps' built-in Icon.* set at all; each is a small hand-drawn SVG shape (Calendar/Smile/Calculator/User/Credit Card/Settings/Star/Heart/Bell/Mail/Folder/File) baked directly into the generated Items formula's IconPath field, and imgCommandItemIcon wraps whichever one you pick in a shared <svg> shell.
A disabled item (Enabled off) looks disabled (muted text/icon color, no hover highlight) and btnCommandItemHit uses DisplayMode.Disabled to block clicks, paired with DisabledFill/DisabledBorderColor:=Color.Transparent so Power Apps' own built-in disabled appearance stays fully transparent instead of painting over the icon/label beneath it. An enabled row shows a light grey hover fill.
Clicking an item does nothing by default (OnSelect:=false, a placeholder); wire btnCommandItemHit's OnSelect to your real per-command action once connected.
No OnVisible initialisation needed.

Problem Solved

Provides a ready-made command-palette-style list (grouped, icon-led) which Power Apps has no native equivalent for (the closest native control, Classic/ComboBox, has no per-item icon/grouping support). Unlike a typical PA component, the group headings and each item's label/icon/enabled state are editable straight from the website's Settings tab, no need to hand-edit a Table()/array literal in Studio for routine content changes.

Integration

The search placeholder, the two group headings, and the 6 items' Label/Icon/Enabled are all settings-driven; the website computes galCommandItems.Items (a Filter() over the assembled array) from them and bakes it into the copied YAML. Only the SHAPE (which items sit under which heading, where the separator goes) stays fixed; edit galCommandItems.Items directly in the pasted YAML if you need to change that structure itself. Wire btnCommandItemHit.OnSelect to your real per-command action once connected.

- conCommand:
    Control: GroupContainer@1.5.0
    Variant: AutoLayout
    Properties:
      BorderColor: =RGBA(226, 232, 240, 1)
      BorderThickness: =1
      DropShadow: =DropShadow.None
      Fill: =RGBA(255, 255, 255, 1)
      Height: =320
      LayoutAlignItems: =LayoutAlignItems.Stretch
      LayoutDirection: =LayoutDirection.Vertical
      RadiusBottomLeft: =8
      RadiusBottomRight: =8
      RadiusTopLeft: =8
      RadiusTopRight: =8
      Width: =320
      X: =20
      Y: =20
    Children:
      - conCommandSearchRow:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            DropShadow: =DropShadow.None
            FillPortions: =0
            Height: =40
            LayoutAlignItems: =LayoutAlignItems.Center
            LayoutDirection: =LayoutDirection.Horizontal
            LayoutGap: =8
            LayoutMinHeight: =0
            LayoutMinWidth: =0
            PaddingLeft: =12
            PaddingRight: =12
          Children:
            - imgCommandSearchIcon:
                Control: Image@2.2.3
                Properties:
                  AlignInContainer: =AlignInContainer.Center
                  Height: =14
                  Image: |-
                    ="data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='RGBA(148, 163, 184, 1)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>")
                  Width: =14
            - inputCommandSearch:
                Control: Classic/TextInput@2.3.2
                Properties:
                  AlignInContainer: =AlignInContainer.Stretch
                  BorderThickness: =0
                  Color: =RGBA(15, 23, 42, 1)
                  Default: =""
                  FillPortions: =1
                  FocusedBorderThickness: =0
                  Font: =Font.'Open Sans'
                  HintText: ="Type a command or search..."
                  HoverFill: =Color.Transparent
                  LayoutMinWidth: =0
                  Size: =11
      - imgCommandInputDivider:
          Control: Image@2.2.3
          Properties:
            AlignInContainer: =AlignInContainer.Stretch
            Fill: =RGBA(226, 232, 240, 1)
            Height: =1
            Image: =Blank()
            LayoutMinHeight: =0
            LayoutMinWidth: =0
      - galCommandItems:
          Control: Gallery@2.15.0
          Variant: Vertical
          Properties:
            DelayItemLoading: =false
            FillPortions: =0
            Height: =280
            Items: =Filter([{Label:"Suggestions",Type:"heading",IconPath:"",Disabled:false}, {Label:"Calendar",Type:"item",IconPath:"<rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/>",Disabled:false}, {Label:"Search Emoji",Type:"item",IconPath:"<circle cx='12' cy='12' r='10'/><path d='M8 14s1.5 2 4 2 4-2 4-2'/><line x1='9' y1='9' x2='9.01' y2='9'/><line x1='15' y1='9' x2='15.01' y2='9'/>",Disabled:false}, {Label:"Calculator",Type:"item",IconPath:"<rect x='4' y='2' width='16' height='20' rx='2'/><line x1='8' y1='6' x2='16' y2='6'/><line x1='8' y1='10' x2='8.01' y2='10'/><line x1='12' y1='10' x2='12.01' y2='10'/><line x1='16' y1='10' x2='16.01' y2='10'/><line x1='8' y1='14' x2='8.01' y2='14'/><line x1='12' y1='14' x2='12.01' y2='14'/><line x1='16' y1='14' x2='16.01' y2='14'/>",Disabled:true}, {Label:"",Type:"separator",IconPath:"",Disabled:false}, {Label:"Settings",Type:"heading",IconPath:"",Disabled:false}, {Label:"Profile",Type:"item",IconPath:"<circle cx='12' cy='8' r='4'/><path d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8'/>",Disabled:false}, {Label:"Billing",Type:"item",IconPath:"<rect x='2' y='5' width='20' height='14' rx='2'/><line x1='2' y1='10' x2='22' y2='10'/>",Disabled:false}, {Label:"Settings",Type:"item",IconPath:"<circle cx='12' cy='12' r='3'/><line x1='12' y1='2' x2='12' y2='5'/><line x1='12' y1='19' x2='12' y2='22'/><line x1='2' y1='12' x2='5' y2='12'/><line x1='19' y1='12' x2='22' y2='12'/>",Disabled:false}], Type<>"item" Or IsBlank(inputCommandSearch.Text) Or inputCommandSearch.Text in Label)
            LayoutMinHeight: =0
            LayoutMinWidth: =0
            ShowScrollbar: =false
            TemplatePadding: =0
            TemplateSize: =30
          Children:
            - lblCommandHeading:
                Control: Label@2.5.1
                Properties:
                  Color: =RGBA(100, 116, 139, 1)
                  Font: =Font.'Open Sans'
                  FontWeight: =FontWeight.Semibold
                  Height: =16
                  Size: =10
                  Text: =ThisItem.Label
                  Visible: =ThisItem.Type = "heading"
                  Width: =Parent.TemplateWidth - 24
                  X: =12
                  Y: =10
            - imgCommandSeparatorLine:
                Control: Image@2.2.3
                Properties:
                  Fill: =RGBA(226, 232, 240, 1)
                  Height: =1
                  Image: =Blank()
                  Visible: =ThisItem.Type = "separator"
                  Width: =Parent.TemplateWidth - 16
                  X: =8
                  Y: =17
            - imgCommandItemIcon:
                Control: Image@2.2.3
                Properties:
                  Image: |-
                    ="data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='" & If(ThisItem.Disabled, "RGBA(203, 213, 225, 1)", "RGBA(15, 23, 42, 1)") & "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>" & ThisItem.IconPath & "</svg>")
                  Visible: =ThisItem.Type = "item"
                  Height: =16
                  Width: =16
                  X: =12
                  Y: =10
            - lblCommandItemLabel:
                Control: Label@2.5.1
                Properties:
                  Color: =If(ThisItem.Disabled, RGBA(148, 163, 184, 1), RGBA(15, 23, 42, 1))
                  Font: =Font.'Open Sans'
                  Size: =10
                  Text: =ThisItem.Label
                  Visible: =ThisItem.Type = "item"
                  Height: =16
                  Width: =Parent.TemplateWidth - 48
                  X: =36
                  Y: =10
            - btnCommandItemHit:
                Control: Classic/Button@2.2.0
                Properties:
                  BorderColor: =RGBA(0, 0, 0, 0)
                  BorderThickness: =1
                  Color: =RGBA(0, 0, 0, 0)
                  DisabledBorderColor: =Color.Transparent
                  DisabledFill: =Color.Transparent
                  DisplayMode: =If(ThisItem.Disabled, DisplayMode.Disabled, DisplayMode.Edit)
                  Fill: =RGBA(0, 0, 0, 0)
                  FocusedBorderThickness: =0
                  Font: =Font.'Open Sans'
                  HoverBorderColor: =RGBA(0, 0, 0, 0)
                  HoverColor: =RGBA(0, 0, 0, 0)
                  HoverFill: =If(ThisItem.Disabled, RGBA(0, 0, 0, 0), RGBA(226, 232, 240, 0.15))
                  OnSelect: =If(!ThisItem.Disabled, false)
                  PressedFill: =RGBA(0, 0, 0, 0)
                  RadiusBottomLeft: =6
                  RadiusBottomRight: =6
                  RadiusTopLeft: =6
                  RadiusTopRight: =6
                  Text: =""
                  Visible: =ThisItem.Type = "item"
                  Height: =Parent.TemplateHeight
                  Width: =Parent.TemplateWidth
                  X: =0
                  Y: =0

Implementation

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

Something not pasting right? Troubleshooting guide

Command

Content

Command Items

How to Use

Problem Solved

Integration

Implementation

Command

Content

Command Items

How to Use

Problem Solved

Integration

YAML Code

Implementation