InputCanvas appIntermediate

Form section

A white form card with title, two-column fields, a notes box, a toggle and Cancel and Save buttons, sized to its fields.

Form section in Power Apps Studio
Version
2.0.0
Updated
Verified in Studio
Not yet
Tags
forminputdropdowndate picker

Overview

A form in a white card, built from loose modern inputs instead of a Form control: title and description, two fields per row, a notes box, a toggle, and Cancel and Save buttons at the bottom right. Cancel resets every input.

The card is exactly as tall as its fields, so it never shows a scrollbar, and it is at most 720 pixels wide.

When to use

  • Short forms of up to about eight fields, or a step in a wizard.
  • Forms that don't map one to one onto a table, where an edit form gets in the way.

When not to use

  • Editing a whole record of one table: an edit form with modern cards gives you validation and SubmitForm.
  • Long forms; split them into sections or steps.

Controls used

ControlVersion
GroupContainer1.5.0
ModernText1.0.0
ModernTextInput1.1.2
ModernDropdown1.0.3
ModernDatePicker1.0.2
ModernToggle1.0.1
ModernButton1.0.0

YAML

Works as is, with example data inline. Paste it into a screen or container; the steps are underHow to paste.

Not yet verified in Power Apps Studio. The control versions are drafted from documentation. If Studio flags one, see How to paste for the fix.

component.yaml
- FormSectionRoot:
    Control: GroupContainer@1.5.0
    Variant: AutoLayout
    Properties:
      BorderColor: =ColorFade(App.Theme.Colors.Darker70, 88%)
      BorderThickness: =1
      DropShadow: =DropShadow.Light
      Fill: =Color.White
      Height: =FormSectionHeader.Height + FormSectionRow1.Height + FormSectionRow2.Height + FormSectionNotesField.Height + FormSectionFollowUp.Height + FormSectionFooter.Height + 5 * 16 + 48
      LayoutDirection: =LayoutDirection.Vertical
      LayoutGap: =16
      PaddingBottom: =24
      PaddingLeft: =24
      PaddingRight: =24
      PaddingTop: =24
      RadiusBottomLeft: =16
      RadiusBottomRight: =16
      RadiusTopLeft: =16
      RadiusTopRight: =16
      Width: =Min(720, Parent.Width)
    Children:
      - FormSectionHeader:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            AlignInContainer: =AlignInContainer.Stretch
            DropShadow: =DropShadow.None
            FillPortions: =0
            Height: =50
            LayoutDirection: =LayoutDirection.Vertical
            LayoutGap: =4
            LayoutMinHeight: =50
            LayoutMinWidth: =120
          Children:
            - FormSectionTitle:
                Control: ModernText@1.0.0
                Properties:
                  AccessibleLabel: =Self.Text
                  AlignInContainer: =AlignInContainer.Stretch
                  FontWeight: =FontWeight.Semibold
                  Height: =26
                  LayoutMinHeight: =0
                  LayoutMinWidth: =80
                  PaddingBottom: =0
                  PaddingTop: =0
                  Size: =18
                  Text: ="Inspection details"
                  Wrap: =false
            - FormSectionDescription:
                Control: ModernText@1.0.0
                Properties:
                  AccessibleLabel: =Self.Text
                  AlignInContainer: =AlignInContainer.Stretch
                  Color: =ColorFade(App.Theme.Colors.Darker70, 45%)
                  Height: =20
                  LayoutMinHeight: =0
                  LayoutMinWidth: =80
                  PaddingBottom: =0
                  PaddingTop: =0
                  Size: =13
                  Text: ="Plan a visit and tell the inspector what to look at."
                  Wrap: =false
      - FormSectionRow1:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            AlignInContainer: =AlignInContainer.Stretch
            DropShadow: =DropShadow.None
            FillPortions: =0
            Height: =64
            LayoutDirection: =LayoutDirection.Horizontal
            LayoutGap: =16
            LayoutMinHeight: =64
            LayoutMinWidth: =120
          Children:
            - FormSectionNameField:
                Control: GroupContainer@1.5.0
                Variant: AutoLayout
                Properties:
                  DropShadow: =DropShadow.None
                  FillPortions: =1
                  Height: =64
                  LayoutDirection: =LayoutDirection.Vertical
                  LayoutGap: =4
                  LayoutMinHeight: =64
                  LayoutMinWidth: =120
                Children:
                  - FormSectionNameLabel:
                      Control: ModernText@1.0.0
                      Properties:
                        AccessibleLabel: =Self.Text
                        AlignInContainer: =AlignInContainer.Stretch
                        FontWeight: =FontWeight.Semibold
                        Height: =20
                        LayoutMinHeight: =0
                        LayoutMinWidth: =60
                        PaddingBottom: =0
                        PaddingTop: =0
                        Size: =13
                        Text: ="Site name"
                  - FormSectionName:
                      Control: ModernTextInput@1.1.2
                      Properties:
                        AccessibleLabel: =FormSectionNameLabel.Text
                        AlignInContainer: =AlignInContainer.Stretch
                        Height: =40
                        LayoutMinHeight: =40
                        LayoutMinWidth: =100
                        Placeholder: ="Warehouse Ghent"
                        Size: =14
            - FormSectionTypeField:
                Control: GroupContainer@1.5.0
                Variant: AutoLayout
                Properties:
                  DropShadow: =DropShadow.None
                  FillPortions: =1
                  Height: =64
                  LayoutDirection: =LayoutDirection.Vertical
                  LayoutGap: =4
                  LayoutMinHeight: =64
                  LayoutMinWidth: =120
                Children:
                  - FormSectionTypeLabel:
                      Control: ModernText@1.0.0
                      Properties:
                        AccessibleLabel: =Self.Text
                        AlignInContainer: =AlignInContainer.Stretch
                        FontWeight: =FontWeight.Semibold
                        Height: =20
                        LayoutMinHeight: =0
                        LayoutMinWidth: =60
                        PaddingBottom: =0
                        PaddingTop: =0
                        Size: =13
                        Text: ="Inspection type"
                  - FormSectionType:
                      Control: ModernDropdown@1.0.3
                      Properties:
                        AccessibleLabel: =FormSectionTypeLabel.Text
                        AlignInContainer: =AlignInContainer.Stretch
                        Height: =40
                        ItemDisplayText: =ThisItem.Value
                        Items: |
                          =Table(
                              {Value: "Fire safety"},
                              {Value: "Electrical"},
                              {Value: "Hygiene"},
                              {Value: "Machinery"},
                              {Value: "Building"}
                          )
                        LayoutMinHeight: =40
                        LayoutMinWidth: =100
                        Size: =14
      - FormSectionRow2:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            AlignInContainer: =AlignInContainer.Stretch
            DropShadow: =DropShadow.None
            FillPortions: =0
            Height: =64
            LayoutDirection: =LayoutDirection.Horizontal
            LayoutGap: =16
            LayoutMinHeight: =64
            LayoutMinWidth: =120
          Children:
            - FormSectionDateField:
                Control: GroupContainer@1.5.0
                Variant: AutoLayout
                Properties:
                  DropShadow: =DropShadow.None
                  FillPortions: =1
                  Height: =64
                  LayoutDirection: =LayoutDirection.Vertical
                  LayoutGap: =4
                  LayoutMinHeight: =64
                  LayoutMinWidth: =120
                Children:
                  - FormSectionDateLabel:
                      Control: ModernText@1.0.0
                      Properties:
                        AccessibleLabel: =Self.Text
                        AlignInContainer: =AlignInContainer.Stretch
                        FontWeight: =FontWeight.Semibold
                        Height: =20
                        LayoutMinHeight: =0
                        LayoutMinWidth: =60
                        PaddingBottom: =0
                        PaddingTop: =0
                        Size: =13
                        Text: ="Planned date"
                  - FormSectionDate:
                      Control: ModernDatePicker@1.0.2
                      Properties:
                        AccessibleLabel: =FormSectionDateLabel.Text
                        AlignInContainer: =AlignInContainer.Stretch
                        DefaultDate: =Today()
                        Height: =40
                        LayoutMinHeight: =40
                        LayoutMinWidth: =100
                        Size: =14
                        StartOfWeek: =StartOfWeek.Monday
            - FormSectionPriorityField:
                Control: GroupContainer@1.5.0
                Variant: AutoLayout
                Properties:
                  DropShadow: =DropShadow.None
                  FillPortions: =1
                  Height: =64
                  LayoutDirection: =LayoutDirection.Vertical
                  LayoutGap: =4
                  LayoutMinHeight: =64
                  LayoutMinWidth: =120
                Children:
                  - FormSectionPriorityLabel:
                      Control: ModernText@1.0.0
                      Properties:
                        AccessibleLabel: =Self.Text
                        AlignInContainer: =AlignInContainer.Stretch
                        FontWeight: =FontWeight.Semibold
                        Height: =20
                        LayoutMinHeight: =0
                        LayoutMinWidth: =60
                        PaddingBottom: =0
                        PaddingTop: =0
                        Size: =13
                        Text: ="Priority"
                  - FormSectionPriority:
                      Control: ModernDropdown@1.0.3
                      Properties:
                        AccessibleLabel: =FormSectionPriorityLabel.Text
                        AlignInContainer: =AlignInContainer.Stretch
                        Height: =40
                        ItemDisplayText: =ThisItem.Value
                        Items: |
                          =Table({Value: "Low"}, {Value: "Normal"}, {Value: "High"})
                        LayoutMinHeight: =40
                        LayoutMinWidth: =100
                        Size: =14
      - FormSectionNotesField:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            AlignInContainer: =AlignInContainer.Stretch
            DropShadow: =DropShadow.None
            FillPortions: =0
            Height: =112
            LayoutDirection: =LayoutDirection.Vertical
            LayoutGap: =4
            LayoutMinHeight: =112
            LayoutMinWidth: =120
          Children:
            - FormSectionNotesLabel:
                Control: ModernText@1.0.0
                Properties:
                  AccessibleLabel: =Self.Text
                  AlignInContainer: =AlignInContainer.Stretch
                  FontWeight: =FontWeight.Semibold
                  Height: =20
                  LayoutMinHeight: =0
                  LayoutMinWidth: =60
                  PaddingBottom: =0
                  PaddingTop: =0
                  Size: =13
                  Text: ="Notes for the inspector"
            - FormSectionNotes:
                Control: ModernTextInput@1.1.2
                Properties:
                  AccessibleLabel: =FormSectionNotesLabel.Text
                  AlignInContainer: =AlignInContainer.Stretch
                  Height: =88
                  LayoutMinHeight: =88
                  LayoutMinWidth: =100
                  Placeholder: ="Access codes, contact person, known issues"
                  Size: =14
                  Type: =TextInputType.Multiline
      - FormSectionFollowUp:
          Control: ModernToggle@1.0.1
          Properties:
            AccessibleLabel: =Self.Label
            AlignInContainer: =AlignInContainer.Stretch
            Height: =40
            Label: ="Needs a follow-up visit"
            LayoutMinWidth: =120
            Size: =14
      - FormSectionFooter:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            AlignInContainer: =AlignInContainer.Stretch
            DropShadow: =DropShadow.None
            FillPortions: =0
            Height: =40
            LayoutDirection: =LayoutDirection.Horizontal
            LayoutGap: =8
            LayoutJustifyContent: =LayoutJustifyContent.End
            LayoutMinHeight: =40
            LayoutMinWidth: =120
          Children:
            - FormSectionCancel:
                Control: ModernButton@1.0.0
                Properties:
                  AccessibleLabel: =Self.Text
                  Appearance: =ButtonAppearance.Secondary
                  Height: =40
                  LayoutMinHeight: =40
                  LayoutMinWidth: =96
                  OnSelect: =Reset(FormSectionName); Reset(FormSectionType); Reset(FormSectionDate); Reset(FormSectionPriority); Reset(FormSectionNotes); Reset(FormSectionFollowUp)
                  Size: =14
                  Text: ="Cancel"
                  Width: =96
            - FormSectionSave:
                Control: ModernButton@1.0.0
                Properties:
                  AccessibleLabel: =Self.Text
                  Appearance: =ButtonAppearance.Primary
                  Height: =40
                  LayoutMinHeight: =40
                  LayoutMinWidth: =120
                  OnSelect: =Notify("Saved " & FormSectionName.Text & " (example only).", NotificationType.Success)
                  Size: =14
                  Text: ="Save inspection"
                  Width: =144

Make it yours

The example runs on sample data. Replace these properties to connect it to your app.

Text on FormSectionTitle

The card heading. FormSectionDescription under it and every field label work the same way; inputs read their label for AccessibleLabel.

In the YAML

YAML
Text: ="Inspection details"

Your version

YAML
Text: ="Site visit"

Items on FormSectionType

The dropdown options. Choices on a choice column returns a Value column, which is what ItemDisplayText already shows.

In the YAML

YAML
Items: |
  =Table(
      {Value: "Fire safety"},
      {Value: "Electrical"},
      {Value: "Hygiene"},
      {Value: "Machinery"},
      {Value: "Building"}
  )

Your version

YAML
Items: =Choices(Inspections.Type)

OnSelect on FormSectionSave

Save the values. The example only shows a notification.

In the YAML

YAML
OnSelect: =Notify("Saved " & FormSectionName.Text & " (example only).", NotificationType.Success)

Your version

YAML
OnSelect: |
  =Patch(
      Inspections,
      Defaults(Inspections),
      {
          Site: FormSectionName.Text,
          Type: FormSectionType.Selected,
          'Planned date': FormSectionDate.SelectedDate,
          Notes: FormSectionNotes.Text,
          'Follow-up': FormSectionFollowUp.Checked
      }
  );
  Notify("Inspection saved", NotificationType.Success)

How to paste

  1. Open your app in Power Apps Studio.
  2. Check that modern controls are on: Settings → Updates → Modern controls and themes. In newer environments they are on by default.
  3. Copy the YAML with the Copy button above the code.
  4. In the Tree view, select the screen or container that should hold the component and press Ctrl+V. The whole component arrives as one container, FormSectionRoot, with all its controls inside.
  5. Work through Make it yours to swap the example data for your own.

Where your version of Studio has a code view for a control or screen, you can paste the same YAML there instead of into the tree view.

When Studio flags a control version

Each control in the YAML names its version, like Control: ModernButton@1.0.0. If that version is newer than what your environment knows, Studio falls back to the version it has or flags the control. All controls of one type in an app must also use the same version, so an app that already has an older ModernButton can reject the paste. To fix it, insert the same control from the Insert pane, copy it as code, note the version on its Control: line, update every matching line in the YAML and paste again.