Welcome to deBUG.to Community where you can ask questions and receive answers from Microsoft MVPs and other experts in our community.
0 like 0 dislike
4 views
ago in Videos by 71 81 131

At the prestigious Saudi Arabia Power Platform Bootcamp, organized by Heba Kamal, Mohamed El-Qassas, and Dr. Ahmed Bahaa, Microsoft MVP and MCT Natalie Leners delivered a highly technical deep dive into one of the most requested enterprise integrations:

Calling Power Automate flows directly from Dataverse and Power Pages.

For developers working with Power Automate, Power Pages, and Microsoft Dataverse, this session offered a practical, production-ready roadmap to extend portal capabilities far beyond standard form submissions.


Why This Integration Matters

Modern enterprise portals are no longer static data-entry forms. Businesses demand:

  • Real-time external system integration
  • Immediate feedback (ticket numbers, case status, confirmations)
  • Seamless API communication
  • Secure backend automation

Out of the box, Power Pages handles structured form submissions well. But when clients require dynamic, real-time data retrieval, developers must bridge the front-end and back-end using:

  • JavaScript
  • Power Automate Cloud Flows
  • Secure authentication mechanisms

That’s where this session becomes game-changing.


The Core Challenge: Real-Time Data Retrieval from External Systems

Natalie’s session was inspired by a real-world enterprise requirement:

A portal where users submit data and immediately receive a response from an external system — without page reloads or manual follow-ups.

Example scenarios include:

  • Generating a ticket number
  • Checking case status
  • Fetching weather or external API data
  • Triggering robotic process automation (RPA)

To accomplish this, Power Pages must communicate securely with a Power Automate flow and return processed data instantly to the user interface.


Step 1: Creating the Power Page Flow (The Right Way)

A critical best practice emphasized during the session:

The flow must be created directly inside the Power Pages portal via the “Setup” workspace — not from the standalone Power Automate portal.

This ensures proper site binding and authentication.

1️⃣ The Trigger: Power Pages Trigger

Use the Power Pages trigger, which allows the portal to send inputs such as:

  • Location
  • Record ID
  • User input values

This trigger acts like a secure “knock on the door” from the website.


2️⃣ The Action Layer

In the demo, Natalie used the MSN Weather connector to retrieve live weather data.

However, in production scenarios, this could be:

  • Custom Connectors
  • REST APIs
  • ERP integrations
  • External SaaS platforms
  • Desktop flows (RPA)

3️⃣ Returning Data to Power Pages

The flow must end with: “Return value(s) to Power Pages”

Without this step, the portal will not receive any data back — even if the flow runs successfully.

This is where many implementations fail.


Step 2: Security Configuration and Web Roles

One of the most overlooked — and most critical — aspects is security.

After creating the flow:

  • It must be explicitly added to the Power Page site
  • Appropriate Web Roles must be assigned

If Web Roles (Anonymous or Authenticated users) are not configured:

  • The flow will not trigger
  • No network request will appear
  • Developers may wrongly assume JavaScript errors

This is not a coding issue — it’s an authorization issue.


Step 3: Implementation Methods

Natalie demonstrated two powerful approaches to trigger flows.


Method A: Dataverse Forms Integration

This method uses a standard Dataverse form embedded in Power Pages.

1️⃣ Field Preparation

Enable the Description property of the field in the form designer.

Why?

Because the field description becomes the injection point where JavaScript inserts the returned value from the flow.


2️⃣ Identifying the Schema Name

Using browser Developer Tools (F12):

  • Inspect the field
  • Identify its logical name (e.g., crc69_location)

JavaScript must reference the exact logical schema name — not the display label.


3️⃣ JavaScript Injection

Using Visual Studio Code for the Web, developers:

  • Add JavaScript to the Basic Form
  • Capture user input
  • Call the Power Automate flow endpoint
  • Inject returned data dynamically

This creates a real-time, responsive user experience.


Method B: Custom Pages with HTML & Liquid

For more advanced scenarios, developers can:

  • Build a custom page
  • Use HTML and Liquid templates
  • Trigger flows via custom submit buttons

Returned data can be displayed as:

  • Adaptive Cards
  • Dynamic HTML rows
  • Structured multi-field outputs

This method offers greater flexibility when handling:

  • Multiple response values
  • Complex UI formatting
  • Dashboard-style pages

The Technical Secret: CSRF Token Authentication

A critical element of the JavaScript call is the CSRF (Cross-Site Request Forgery) token.

This token:

  • Acts as a bearer authentication mechanism
  • Confirms that the Power Page is authorized
  • Prevents malicious cross-site attacks

Without this token, the flow call will fail due to security validation. Enterprise-grade portals cannot ignore this layer.


Performance Considerations

One key warning from the session: Avoid triggering flows on every keystroke.

For example:

Typing “Riyadh” could generate 6 separate flow runs.

Best practice recommendations:

  • Trigger on button click
  • Use debouncing logic
  • Validate minimum input length

Flow consumption and performance optimization are essential in enterprise environments.


Pro Tips for Developers

✔ Always press Ctrl+S in VS Code
✔ Click Sync in Power Pages Designer
✔ Confirm Web Role permissions
✔ Validate flow URL endpoints
✔ Test using browser network inspection

These small operational steps prevent hours of troubleshooting.


Expanding the Possibilities

While the demo used weather data, real-world use cases include:

  • ERP system lookups
  • Dynamics 365 integrations
  • Government service portals
  • RPA-triggered local automation
  • AI-powered backend enrichment

This pattern essentially transforms Power Pages from a static portal into:

A dynamic, API-driven enterprise application layer.


Final Thoughts: Turning Power Pages into a Dynamic Enterprise Platform

This session at the Saudi Arabia Power Platform Bootcamp demonstrated that: Power Pages is not limited to form submission.

With:

  • Proper flow configuration
  • Secure role assignment
  • Clean JavaScript implementation
  • Optimized trigger logic

Developers can build interactive, real-time enterprise portals powered by Power Automate and Dataverse.

For organizations embracing digital transformation in Saudi Arabia and beyond, this integration pattern unlocks:

  • Faster service delivery
  • Better user experiences
  • Seamless system orchestration
  • Scalable automation architecture

The message was clear:

With the right architecture, Power Pages becomes more than a portal — it becomes an intelligent front-end gateway to enterprise automation.


🌍 Register Now ...

🔗 Stay Connected


If you don’t ask, the answer is always NO!
...