InputCanvas appIntermediate

Signature pad

Sign off with a finger, pen or mouse, or type your name instead, with the signer's name, the date, Clear and Confirm buttons.

Signature pad in Power Apps Studio
Version
1.0.0
Updated
Verified in Studio
Not yet
Tags
signaturesign offpenapprovalinspection

Overview

A sign-off block for inspections, deliveries and work permits. People sign in the dashed box with a finger, a pen or the mouse, above a signature line with the signer's name and the date below it. Clear starts again; Confirm locks the signature and shows who signed and when.

For people who can't draw a signature, Type instead swaps the drawing area for a text field in a handwriting font, filled in with the signer's name. The pen input is the classic control, because its Image output can be saved straight into an image column in Dataverse or SharePoint.

When to use

  • Sign-off at the end of an inspection, delivery or work permit.
  • A customer or contractor signing on the inspector's tablet.

When not to use

  • Legally binding contracts: use a signing service such as Adobe Acrobat Sign or DocuSign.
  • Approvals between colleagues: an Approve button with the user's name and time is enough.

Controls used

ControlVersion
GroupContainer1.5.0
ModernText1.0.0
PenInput2.3.0
ModernTextInput1.1.2
ModernIcon1.1.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
- SignaturePadRoot:
    Control: GroupContainer@1.5.0
    Variant: AutoLayout
    Properties:
      BorderColor: =ColorFade(App.Theme.Colors.Darker70, 88%)
      BorderThickness: =1
      DropShadow: =DropShadow.Light
      Fill: =Color.White
      Height: =SignaturePadHeader.Height + SignaturePadBox.Height + SignaturePadFooter.Height + If(SignaturePadDone.Visible, SignaturePadDone.Height + 10, 0) + SignaturePadActions.Height + 3 * 10 + 36
      LayoutDirection: =LayoutDirection.Vertical
      LayoutGap: =10
      PaddingBottom: =16
      PaddingLeft: =20
      PaddingRight: =20
      PaddingTop: =20
      RadiusBottomLeft: =16
      RadiusBottomRight: =16
      RadiusTopLeft: =16
      RadiusTopRight: =16
      Width: =Min(480, Parent.Width)
    Children:
      - SignaturePadHeader:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            AlignInContainer: =AlignInContainer.Stretch
            DropShadow: =DropShadow.None
            FillPortions: =0
            Height: =48
            LayoutDirection: =LayoutDirection.Vertical
            LayoutGap: =2
            LayoutMinHeight: =48
            LayoutMinWidth: =120
          Children:
            - SignaturePadTitle:
                Control: ModernText@1.0.0
                Properties:
                  AccessibleLabel: =Self.Text
                  AlignInContainer: =AlignInContainer.Stretch
                  FontWeight: =FontWeight.Semibold
                  Height: =24
                  LayoutMinHeight: =24
                  PaddingBottom: =0
                  PaddingLeft: =0
                  PaddingTop: =0
                  Size: =16
                  Text: ="Sign off"
                  Wrap: =false
            - SignaturePadIntro:
                Control: ModernText@1.0.0
                Properties:
                  AccessibleLabel: =Self.Text
                  AlignInContainer: =AlignInContainer.Stretch
                  Color: =ColorFade(App.Theme.Colors.Darker70, 45%)
                  Height: =22
                  LayoutMinHeight: =22
                  PaddingBottom: =0
                  PaddingLeft: =0
                  PaddingTop: =0
                  Size: =13
                  Text: ="I confirm the inspection was carried out as recorded."
                  Wrap: =false
      - SignaturePadBox:
          Control: GroupContainer@1.5.0
          Variant: ManualLayout
          Properties:
            AlignInContainer: =AlignInContainer.Stretch
            BorderColor: =If(IsBlank(locSignaturePadSigned), ColorFade(App.Theme.Colors.Darker70, 75%), App.Theme.Colors.Primary)
            BorderStyle: =BorderStyle.Dashed
            BorderThickness: =1
            DropShadow: =DropShadow.None
            Fill: =ColorFade(App.Theme.Colors.Darker70, 97%)
            FillPortions: =0
            Height: =180
            LayoutMinHeight: =180
            LayoutMinWidth: =120
            RadiusBottomLeft: =12
            RadiusBottomRight: =12
            RadiusTopLeft: =12
            RadiusTopRight: =12
          Children:
            - SignaturePadCross:
                Control: ModernText@1.0.0
                Properties:
                  AccessibleLabel: ="Sign above the line"
                  Color: =ColorFade(App.Theme.Colors.Darker70, 55%)
                  Height: =30
                  PaddingBottom: =0
                  PaddingTop: =0
                  Size: =20
                  Text: ="×"
                  Width: =30
                  X: =20
                  Y: =Parent.Height - 70
            - SignaturePadLine:
                Control: GroupContainer@1.5.0
                Variant: ManualLayout
                Properties:
                  DropShadow: =DropShadow.None
                  Fill: =ColorFade(App.Theme.Colors.Darker70, 70%)
                  Height: =1
                  Width: =Parent.Width - 48
                  X: =24
                  Y: =Parent.Height - 40
            - SignaturePadHint:
                Control: ModernText@1.0.0
                Properties:
                  AccessibleLabel: =Self.Text
                  Align: =Align.Center
                  Color: =ColorFade(App.Theme.Colors.Darker70, 55%)
                  Height: =24
                  PaddingBottom: =0
                  PaddingTop: =0
                  Size: =12
                  Text: =If(Not(IsBlank(locSignaturePadSigned)), "Signature confirmed", locSignaturePadTyped, "Type your full name", "Sign with your finger, a pen or the mouse")
                  Width: =Parent.Width - 48
                  X: =24
                  Y: =Parent.Height - 32
            - SignaturePadPen:
                Control: PenInput@2.3.0
                Properties:
                  AccessibleLabel: ="Signature"
                  BorderThickness: =0
                  Color: =App.Theme.Colors.Darker70
                  DisplayMode: =If(IsBlank(locSignaturePadSigned), DisplayMode.Edit, DisplayMode.View)
                  Fill: =Color.Transparent
                  Height: =Parent.Height - 36
                  Mode: =PenMode.Draw
                  ShowControls: =false
                  Size: =3
                  Visible: =Not(locSignaturePadTyped)
                  Width: =Parent.Width
                  X: =0
                  Y: =0
            - SignaturePadTypedName:
                Control: ModernTextInput@1.1.2
                Properties:
                  AccessibleLabel: ="Type your full name to sign"
                  BorderStyle: =BorderStyle.None
                  Default: =SignaturePadSigner.Text
                  DisplayMode: =If(IsBlank(locSignaturePadSigned), DisplayMode.Edit, DisplayMode.View)
                  Fill: =Color.Transparent
                  Font: =Font.'Great Vibes'
                  Height: =56
                  Placeholder: ="Your name"
                  Size: =30
                  Visible: =locSignaturePadTyped
                  Width: =Parent.Width - 96
                  X: =48
                  Y: =Parent.Height - 98
      - SignaturePadFooter:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            AlignInContainer: =AlignInContainer.Stretch
            DropShadow: =DropShadow.None
            FillPortions: =0
            Height: =22
            LayoutDirection: =LayoutDirection.Horizontal
            LayoutGap: =8
            LayoutMinHeight: =22
            LayoutMinWidth: =120
            PaddingLeft: =4
            PaddingRight: =4
          Children:
            - SignaturePadSigner:
                Control: ModernText@1.0.0
                Properties:
                  AccessibleLabel: |
                    ="Signer: " & Self.Text
                  FillPortions: =1
                  FontWeight: =FontWeight.Semibold
                  Height: =22
                  LayoutMinHeight: =22
                  LayoutMinWidth: =80
                  PaddingBottom: =0
                  PaddingLeft: =0
                  PaddingTop: =0
                  Size: =13
                  Text: ="Sara Peeters"
                  Wrap: =false
            - SignaturePadDate:
                Control: ModernText@1.0.0
                Properties:
                  AccessibleLabel: |
                    ="Date: " & Self.Text
                  Align: =Align.Right
                  Color: =ColorFade(App.Theme.Colors.Darker70, 45%)
                  Height: =22
                  LayoutMinHeight: =22
                  LayoutMinWidth: =80
                  PaddingBottom: =0
                  PaddingRight: =0
                  PaddingTop: =0
                  Size: =13
                  Text: =Text(Coalesce(locSignaturePadSigned, Now()), "d mmm yyyy")
                  Width: =140
                  Wrap: =false
      - SignaturePadDone:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            AlignInContainer: =AlignInContainer.Stretch
            DropShadow: =DropShadow.None
            Fill: =App.Theme.Colors.Lighter80
            FillPortions: =0
            Height: =40
            LayoutAlignItems: =LayoutAlignItems.Center
            LayoutDirection: =LayoutDirection.Horizontal
            LayoutGap: =8
            LayoutMinHeight: =40
            LayoutMinWidth: =120
            PaddingLeft: =12
            PaddingRight: =12
            RadiusBottomLeft: =10
            RadiusBottomRight: =10
            RadiusTopLeft: =10
            RadiusTopRight: =10
            Visible: =Not(IsBlank(locSignaturePadSigned))
          Children:
            - SignaturePadDoneIcon:
                Control: ModernIcon@1.1.1
                Properties:
                  AccessibleLabel: ="Signed"
                  Height: =20
                  Icon: ="CheckmarkCircle"
                  IconColor: =App.Theme.Colors.Primary
                  LayoutMinHeight: =20
                  LayoutMinWidth: =20
                  Width: =20
            - SignaturePadDoneText:
                Control: ModernText@1.0.0
                Properties:
                  AccessibleLabel: =Self.Text
                  Color: =App.Theme.Colors.Darker70
                  FillPortions: =1
                  Height: =24
                  LayoutMinHeight: =24
                  LayoutMinWidth: =80
                  PaddingBottom: =0
                  PaddingLeft: =0
                  PaddingTop: =0
                  Size: =13
                  Text: ="Signed by " & SignaturePadSigner.Text & " on " & Text(locSignaturePadSigned, "d mmm yyyy") & " at " & Text(locSignaturePadSigned, "hh:mm")
                  Wrap: =false
      - SignaturePadActions:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            AlignInContainer: =AlignInContainer.Stretch
            DropShadow: =DropShadow.None
            FillPortions: =0
            Height: =36
            LayoutAlignItems: =LayoutAlignItems.Center
            LayoutDirection: =LayoutDirection.Horizontal
            LayoutGap: =8
            LayoutMinHeight: =36
            LayoutMinWidth: =120
          Children:
            - SignaturePadMode:
                Control: ModernButton@1.0.0
                Properties:
                  AccessibleLabel: =If(locSignaturePadTyped, "Draw your signature instead", "Type your name instead")
                  Appearance: =ButtonAppearance.Subtle
                  DisplayMode: =If(IsBlank(locSignaturePadSigned), DisplayMode.Edit, DisplayMode.Disabled)
                  Height: =36
                  Icon: =If(locSignaturePadTyped, "Edit", "DocumentText")
                  LayoutMinHeight: =36
                  LayoutMinWidth: =100
                  OnSelect: |
                    =UpdateContext({locSignaturePadTyped: Not(locSignaturePadTyped)})
                  Size: =13
                  Text: =If(locSignaturePadTyped, "Draw instead", "Type instead")
                  Width: =128
            - SignaturePadSpacer:
                Control: GroupContainer@1.5.0
                Variant: ManualLayout
                Properties:
                  DropShadow: =DropShadow.None
                  FillPortions: =1
                  Height: =1
                  LayoutMinHeight: =1
                  LayoutMinWidth: =0
            - SignaturePadClear:
                Control: ModernButton@1.0.0
                Properties:
                  AccessibleLabel: ="Clear the signature"
                  Appearance: =ButtonAppearance.Secondary
                  Height: =36
                  LayoutMinHeight: =36
                  LayoutMinWidth: =72
                  OnSelect: |
                    =Reset(SignaturePadPen);
                    Reset(SignaturePadTypedName);
                    UpdateContext({locSignaturePadSigned: Blank()})
                  Size: =14
                  Text: ="Clear"
                  Width: =80
            - SignaturePadConfirm:
                Control: ModernButton@1.0.0
                Properties:
                  AccessibleLabel: =Self.Text
                  Appearance: =ButtonAppearance.Primary
                  DisplayMode: |
                    =If(IsBlank(locSignaturePadSigned) && Not(locSignaturePadTyped && IsBlank(Trim(SignaturePadTypedName.Text))), DisplayMode.Edit, DisplayMode.Disabled)
                  Height: =36
                  Icon: ="CheckmarkCircle"
                  LayoutMinHeight: =36
                  LayoutMinWidth: =120
                  OnSelect: |
                    =UpdateContext({locSignaturePadSigned: Now()});
                    Notify("Signature saved (example only).", NotificationType.Success)
                  Size: =14
                  Text: ="Confirm signature"
                  Width: =176

Make it yours

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

Text on SignaturePadSigner

Who signs. It is shown under the line and filled in as the typed signature.

In the YAML

YAML
Text: ="Sara Peeters"

Your version

YAML
Text: =User().FullName

Text on SignaturePadIntro

What the person confirms by signing.

In the YAML

YAML
Text: ="I confirm the inspection was carried out as recorded."

Your version

YAML
Text: ="I confirm the work permit conditions were explained to me."

OnSelect on SignaturePadConfirm

Saves the signature. The example stores the drawing in an image column, or the typed name in a text column, with who signed and when.

In the YAML

YAML
OnSelect: |
  =UpdateContext({locSignaturePadSigned: Now()});
  Notify("Signature saved (example only).", NotificationType.Success)

Your version

YAML
OnSelect: |
  =Patch(
      Inspections,
      varInspection,
      {
          Signature: If(locSignaturePadTyped, Blank(), SignaturePadPen.Image),
          'Signature name': If(locSignaturePadTyped, SignaturePadTypedName.Text, Blank()),
          'Signed by': SignaturePadSigner.Text,
          'Signed on': Now()
      }
  );
  UpdateContext({locSignaturePadSigned: Now()})

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, SignaturePadRoot, 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.