Add cloud-flow sample (React)#102
Merged
Merged
Conversation
Invoke a registered Power Automate cloud flow from a code site via POST /_api/cloudflow/v1.0/trigger/<FLOW_ID> with the CSRF token, and render the response. React is the canonical reference; Angular and Vue are faithful ports of the identical scenario. Ships .powerpages-site metadata per variant and index rows in the root and SPA READMEs. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Apply learnings from end-to-end setup so makers hit fewer manual steps: - Ship the flow as an importable unmanaged solution (flow/CloudFlowSample_1_0_0_0.zip) in each variant. README "Set up the flow" now offers Option A (import the solution — fastest) and Option B (author it yourself, with an exact case-sensitive input/output checklist and a "names must match the client" warning). - Pre-fill FLOW_ID in config.ts with the bundled flow's GUID. An unmanaged import preserves the GUID, so the import path needs no edit; the comment explains both paths. - Add "Authorization (who can call the flow)" and "Troubleshooting" sections: web roles bind to contacts, the 500 is usually an auth/role issue, and the flow's run history distinguishes a portal-side problem (0 runs) from flow logic (failed run). - React: emit content-hashed bundle filenames (index-[hash].js) and match bundleFilePatterns, so re-uploading after changing FLOW_ID never serves a stale cached bundle. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…sing
Verified end-to-end against a live Power Pages site (form submit ->
flow run -> rendered response). Two correctness fixes:
- Send the X-Requested-With: XMLHttpRequest header on the trigger call.
The cloud flow endpoint only accepts AJAX requests; without this header
it rejects the call with a masked HTTP 500 ("view 'Error' not found in
/Areas/PowerAutomate/...") and the flow never runs. CSRF alone is not
enough. Confirmed: same request with the header returns 200, without it
returns 500.
- Map the response keys defensively. Power Pages lowercases the Respond
action's output property names on the wire (ticketNumber -> ticketnumber),
so the typed response is rebuilt from the lowercased keys.
READMEs updated: Key points lists both required headers; Troubleshooting
leads with the X-Requested-With cause and documents the lowercased response
keys.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Add .powerpages-site/cloud-flow-consumer/*.cloudflowconsumer.yml to each variant so `pac pages upload-code-site` registers the flow to the site and grants the Authenticated Users web role automatically — removing the manual "Set up > Cloud flows > Add cloud flow" studio step from Option A. Verified by re-uploading the React site: pac created the adx_cloudflowconsumer record (a powerpagecomponent type 33) from the YAML, with processid pointing at the bundled solution's flow GUID and the Authenticated Users role bound. The role id (d60cc079...) matches the Authenticated-Users.webrole.yml the sample already ships, so the reference resolves on a fresh deploy. Each variant uses a distinct consumer id to avoid collisions if deployed into the same environment. README Option A updated: import solution -> build -> upload, fully wired. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Capture the sample UI (form + rendered flow response) and add it as screenshot.png to each variant, fixing the broken image references in the root and SPA index tables and the per-variant READMEs. Add the matching Screenshot section to the Angular and Vue READMEs for parity with React. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Copilot stopped reviewing on behalf of
tyaginidhi due to an error
June 24, 2026 17:46
Replace the per-field ?? fallbacks with a single case-insensitive helper so all three response fields (including message) are read uniformly, rather than mapping ticketNumber/estimatedCallback defensively while reading message directly. Power Pages lowercases the Respond action's output property names on the wire, so the helper tries the exact key then its lowercase form. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Remove the Angular and Vue cloud-flow-sample variants and their README references, leaving the React + Vite sample as the single cloud-flow recipe. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
tyaginidhi
changed the title
priyanshu92
approved these changes
Jun 25, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Adds a small, single-topic sample that shows how to invoke a Power Automate cloud flow from a Power Pages code site — the smallest app that proves the concept (one form, one button, one flow call), in React.
The whole lesson lives in one file (
cloudFlowClient.ts); the rest is just UI to trigger the call and render the three states (loading, error, result).What it teaches
POST /_api/cloudflow/v1.0/trigger/<flowId>__RequestVerificationToken(CSRF) andX-Requested-With: XMLHttpRequestheaders — the endpoint only accepts AJAX requests; omitting the latter fails with a masked500Low-friction setup
The sample ships everything needed to stand it up with import → build → upload:
flow/CloudFlowSample_1_0_0_0.zip) — import it instead of hand-authoring the trigger/respond actions. An unmanaged import preserves the flow GUID, soFLOW_IDinconfig.tsis pre-filled and needs no edit..powerpages-site/cloud-flow-consumer/*.cloudflowconsumer.ymlregisters the flow to the site and grants the Authenticated Users web role automatically onpac pages upload-code-site, removing the manual Set up → Cloud flows → Add cloud flow studio step.environment-variables-samplesstyle: what it teaches, Option A (import) / Option B (author your own, with an exact case-sensitive input/output checklist), an Authorization section (web roles bind to contacts) and a Troubleshooting section (theX-Requested-With500, the lowercased response keys, flow run history).FLOW_IDchange never serves a stale cached bundle.Index rows added to the root
README.mdandsamples/spa/README.md.Verification
npm run buildclean.pac pages upload-code-sitedeploys the bundledcloud-flow-consumerregistration (creates theadx_cloudflowconsumerrecord bound to the flow + Authenticated Users role).🤖 Generated with Claude Code