How to Create a Pop Up in a Model Driven App with the 'Confirm' PowerFX function!

In this tutorial, Nate Halliwell from Pragmatic Works demonstrates how to create a modal pop-up in a Model-Driven App using the Confirm function in Power FX—completely avoiding JavaScript. This makes the process more accessible for Power Platform users and introduces a simple way to prevent unintended bulk actions within your app.

Overview of the Scenario

Nate uses an asset management model-driven app, where users can view a list of assets and their associated asset items. The challenge he faces is preventing users from accidentally performing irreversible bulk operations—specifically, decommissioning all associated asset items with a single click.

Although this action works, users are not informed of the consequences or results, leading to possible errors. Nate walks us through creating a confirmation pop-up using Power FX’s Confirm function to solve this problem.

Step-by-Step: Adding a Confirmation Popup

1. Access the Command Bar:
   • Navigate to the model-driven app designer.
   • Go to the list view where the custom command exists (in this case, the "Assets" view).
   • Edit the main grid command bar and open the button in the component library.
2. Structure the Power FX Formula:
   Use the Confirm function inside an If statement to trigger a true/false response based on user interaction.

Power FX Confirm Function Breakdown

The Confirm function in model-driven apps (not available in canvas apps) returns a Boolean value based on whether the user clicks the confirm or cancel button.

Syntax Overview:

If(
  Confirm("This procedure will mark all associated items as unavailable.", 
    {
      Title: "Wait", 
      Subtitle: "Please confirm this action", 
      ConfirmButtonText: "OK", 
      CancelButtonText: "Cancel"
    }
  ),
  // TRUE: User clicked confirm
  Notify("All associated items marked as unavailable.", NotificationType.Success, 2500),
  // FALSE: User clicked cancel
  Notify("Operation cancelled.", NotificationType.Information, 2500)
)

Advantages of Using Confirm

• No JavaScript Required: Everything is handled with native Power FX.
• Improved User Experience: Users are clearly notified of the action being performed.
• Conditional Logic: Only proceed with the action if confirmation is received.
• Customizable Popup: You can define the popup’s message, title, subtitle, and button labels.

Publishing and Testing the Button

1. Save and publish the custom command after inserting the formula.
2. Switch to play mode in the app and refresh.
3. Test the button by clicking it—observe the pop-up with options to confirm or cancel.
4. If “OK” is selected, the child items are marked as unavailable and a success notification appears.
5. If “Cancel” is selected, an informational message is shown indicating that the operation was canceled.

Key Takeaways

• The Confirm function is a powerful way to prompt users before performing important operations in a model-driven app.
• Using this approach minimizes user error and enhances app safety and professionalism.
• This method is perfect for those familiar with Power FX and canvas apps who want to bring the same control to model-driven apps.

By following Nate Halliwell’s step-by-step guide, Power Platform users can implement pop-up confirmations without needing JavaScript. This is a game-changer for anyone looking to streamline user experiences while safeguarding critical operations.

Don't forget to check out the Pragmatic Works' on-demand learning platform for more insightful content and training sessions on Model Driven and other Microsoft applications. Be sure to subscribe to the Pragmatic Works YouTube channel to stay up-to-date on the latest tips and tricks.