Canvas App Success Screen manual

Canvas App Success Screen manual.md

Auto-generated request IDs with a success screen

Adding a Submit button, a generated X-00000 request ID, and an in-place success panel to a customized SharePoint list form. New-item form only.

What you end up with: the user fills the form and clicks Submit. The item saves, gets an ID like M-00005 written to its Title, and a success panel replaces the form showing that ID. Editing an existing item is untouched: no Submit button, no new ID.

1. Prerequisites

• A SharePoint list with a Title column and a choice column (here RequestType, with values Onboarding, Access, Misc).
• The list form customized in Power Apps: Integrate → Power Apps → Customize forms.
• Coauthoring on if you plan to edit the YAML externally: Settings → Updates → Coauthoring.

Title carries the generated ID, so it must not be filled in by hand. If your list marks Title as required, that is fine: the form writes it after the save.

2. Keep everything on one screen

Build the success panel as an overlay on the existing FormScreen1, not as a second screen.

Why this matters. In a list form, SharePointIntegration lives at app level and its OnNew / OnEdit / OnSave rules reference the form control. Introducing a second screen and navigating between them adds cross-screen event dependencies, which App Checker flags and which can leave the form stuck on Getting your data … forever. An overlay avoids the whole category.

3. Hide the Title card on new items

Select Title_DataCard1 and set:

Property	Value
Visible	!IsBlank(SharePointIntegration.Selected)
Required	false
DisplayMode	DisplayMode.View

SharePointIntegration.Selected is blank on the new form and populated on the edit form, which is the reliable way to tell the two apart. Leave Update as the default DataCardValue1.Text.

Consequence worth knowing. A hidden data card contributes nothing to the submitted record, so a new item saves with a blank Title. That blank is exactly what step 5 uses as its new-vs-edit marker.

4. Add the Submit button

Insert a Button on the screen, below the form, and set:

OnSelect: SubmitForm(SharePointForm1)

Visible: And(Not(varShowSuccess), IsBlank(SharePointIntegration.Selected))

The Visible rule is what keeps this off the edit form. Also shrink the form so the button is not overlapped:

SharePointForm1.Height:  Parent.Height - Self.Y - 76
SharePointForm1.Visible: !varShowSuccess

5. Generate the ID in the form's OnSuccess

This is the core of the feature. Set SharePointForm1.OnSuccess to:

If(
    IsBlank(Self.LastSubmit.Title),

    // NEW item: build the ID, write it back, show the panel
    Set(
        varRequestID,
        Switch(
            Self.LastSubmit.'Request Type'.Value,
            "Onboarding", "O",
            "Access",     "A",
            "Misc",       "M",
            "X"
        ) & "-" & Text(Self.LastSubmit.ID, "00000")
    );
    Patch([@ClaudeList], Self.LastSubmit, { Title: varRequestID });
    Set(varShowSuccess, true),

    // EDIT: behave like a normal form
    RequestHide()
)

How the number is produced

LastSubmit is a built-in Form output holding the record as the server returned it. .ID is SharePoint's own auto-increment column, assigned atomically at insert. Because nothing reads a counter and writes it back, several people can submit at the same moment without colliding.

Property	Behavior
Uniqueness	Guaranteed. Race-safe by construction.
Sequence	One shared sequence. Prefix varies, number keeps counting: O-00001, A-00002, M-00003.
Gaps	Permanent. Deleted items never return their number.
Capacity	"00000" pads to five digits, so up to 99999 before it widens.

If you need gapless per-prefix numbering. That cannot be made race-safe this way. It requires a separate counter list with optimistic concurrency and a retry loop, because SharePoint offers no atomic increment.

6. Build the success overlay

Paste this as a single control tree. It is one GroupContainer with seven children, so one paste builds the whole panel.

The single Visible: =varShowSuccess on the container shows and hides everything, and the children are positioned relative to the container, so moving the panel moves all of it.

- SuccessPanel:
    Control: GroupContainer
    Variant: ManualLayout
    Properties:
      DropShadow: =DropShadow.Regular
      Fill: =RGBA(244, 249, 255, 1)
      Height: =302
      RadiusBottomLeft: =8
      RadiusBottomRight: =8
      RadiusTopLeft: =8
      RadiusTopRight: =8
      Visible: =varShowSuccess
      Width: =Min(Parent.Width - 48, 460)
      X: =(Parent.Width - Self.Width) / 2
      Y: =Max((Parent.Height - Self.Height) / 2, 24)
    Children:
      - SuccessTick:
          Control: Classic/Icon
          Properties:
            Color: =RGBA(16, 124, 16, 1)
            Height: =48
            Icon: =Icon.CheckBadge
            Width: =48
            X: =(Parent.Width - Self.Width) / 2
            Y: =28
      - SuccessHeading:
          Control: Label
          Properties:
            Align: =Align.Center
            Color: =RGBA(32, 31, 30, 1)
            Font: =Font.'Segoe UI'
            FontWeight: =FontWeight.Semibold
            Height: =36
            Size: =18
            Text: ="Request submitted"
            Width: =Parent.Width - 48
            X: =24
            Y: =88
      - SuccessCaption:
          Control: Label
          Properties:
            Align: =Align.Center
            Color: =RGBA(96, 94, 92, 1)
            Font: =Font.'Segoe UI'
            Height: =24
            Size: =10.5
            Text: ="Your request ID is"
            Width: =Parent.Width - 48
            X: =24
            Y: =128
      - RequestIdLabel:
          Control: Label
          Properties:
            Align: =Align.Center
            Color: =RGBA(0, 120, 212, 1)
            Font: =Font.'Segoe UI'
            FontWeight: =FontWeight.Bold
            Height: =52
            Size: =28
            Text: =If(IsBlank(varRequestID), "-", varRequestID)
            Width: =Parent.Width - 48
            X: =24
            Y: =154
      - SuccessHint:
          Control: Label
          Properties:
            Align: =Align.Center
            Color: =RGBA(96, 94, 92, 1)
            Font: =Font.'Segoe UI'
            Height: =22
            Size: =9
            Text: ="Keep this ID for your records."
            Width: =Parent.Width - 48
            X: =24
            Y: =208
      - NewRequestButton:
          Control: Classic/Button
          Properties:
            BorderColor: =RGBA(0, 120, 212, 1)
            BorderThickness: =1
            Color: =RGBA(0, 120, 212, 1)
            Fill: =RGBA(255, 255, 255, 1)
            Font: =Font.'Segoe UI'
            FontWeight: =FontWeight.Semibold
            Height: =40
            HoverFill: =RGBA(243, 242, 241, 1)
            OnSelect: =Set(varShowSuccess, false); Set(varRequestID, Blank()); NewForm(SharePointForm1)
            PressedColor: =RGBA(0, 120, 212, 1)
            RadiusBottomLeft: =4
            RadiusBottomRight: =4
            RadiusTopLeft: =4
            RadiusTopRight: =4
            Size: =10.5
            Text: ="New request"
            Width: =(Parent.Width - 60) / 2
            X: =24
            Y: =246
      - CloseButton:
          Control: Classic/Button
          Properties:
            BorderColor: =RGBA(0, 96, 170, 1)
            BorderThickness: =1
            Color: =RGBA(255, 255, 255, 1)
            Fill: =RGBA(0, 120, 212, 1)
            Font: =Font.'Segoe UI'
            FontWeight: =FontWeight.Semibold
            Height: =40
            HoverFill: =ColorFade(RGBA(0, 120, 212, 1), -20%)
            OnSelect: =Set(varShowSuccess, false); RequestHide()
            PressedColor: =RGBA(255, 255, 255, 1)
            PressedFill: =ColorFade(RGBA(0, 120, 212, 1), -40%)
            RadiusBottomLeft: =4
            RadiusBottomRight: =4
            RadiusTopLeft: =4
            RadiusTopRight: =4
            Size: =10.5
            Text: ="Close"
            Width: =(Parent.Width - 60) / 2
            X: =NewRequestButton.X + NewRequestButton.Width + 12
            Y: =246

Notes:

• Indentation above is top level, ready to paste into Studio. If you are pasting into a .pa.yaml screen file instead, indent every line by 6 spaces so it sits under Screens > FormScreen1 > Children.
• Use Classic/Icon, not Icon. The plain Icon control is FluentV9 and takes a text icon name, so Icon.CheckBadge does not resolve there and renders as an empty circle. Classic/Icon has a proper enum, and it uses Color rather than IconColor. Icon.Check gives a bare tick with no circle.
• The container is 302 high to fit the buttons at Y: 246. Change both together.
• The panel depends on varRequestID and varShowSuccess being set by the form's OnSuccess in step 5, and NewRequestButton references SharePointForm1 on the same screen.

7. Publish and test

1. Publish in Power Apps. The live list form serves the published version, so nothing changes until you do.
2. Create a new item, pick a request type, click Submit. Confirm the panel shows the right prefix.
3. Open an existing item. Confirm there is no Submit button and no new ID.
4. Check the list: Title should hold the generated ID.

Add a version label. A small label next to Submit (Text: "v1.3") tells you at a glance which build the published form is actually serving. Worth the two minutes the first time a publish silently does not take.

8. Troubleshooting

Symptom	Cause
Form stuck on Getting your data …	A circular dependency. Either a data card referencing its own parent form by name, or an event rule referencing a control on another screen. Run App Checker: it finds these, the formula bar does not.
Success panel shows - instead of an ID	OnSuccess took the edit branch. Verify the new item really does save with a blank Title.
New rows have an empty Title	The Patch in OnSuccess failed or never ran.
Submit appears on the edit form	The IsBlank(SharePointIntegration.Selected) clause is missing from Visible.

---

Built and verified against a SharePoint Online list form, August 2026. Control names assume the default customized-form naming (SharePointForm1, Title_DataCard1).