Loading...

How to use powerapps-modals

How to use powerapps-modals

In this blog, I'm writing some examples that power-apps modals can be used.

🧑💻 Source code

Main function to call modals here

function displayPopup(modalObject: any, width, height, position) {
  var pageInput: Xrm.Navigation.PageInputHtmlWebResource = {
    pageType: "webresource",
    webresourceName: "vite_/viteapps/pages/modals.html",
    data: JSON.stringify(modalObject),
  };
  var navigationOptions: Xrm.Navigation.NavigationOptions = {
    target: 2, // 2 is for opening the page as a dialog.
    width: width, // default is px. can be specified in % as well. 400
    height: height, // default is px. can be specified in % as well. 500
    position: position, // Specify 1 to open the dialog in center; 2 to open the dialog on the side. Default is 1 (center). 1
    title: "Record activation modal", //change the title here, recommended to enter title here
  };
  Xrm.Navigation.navigateTo(pageInput, navigationOptions).then(
    function success(returnedValues) {
      console.log(returnedValues);
    },
    function error(e) {
      // Handle errors
    }
  );
}

Success modal with dropdown input

image.png

image.png

1- Json object

 {
    icon: "success",
    labels: [
      { text: "Published!", type: "h1" },
      {
        text: "Your record is published, please identify the category",
        type: "h2",
      },
    ],
    inputs: [
      {
        id: "choiceexample",
        label: "Category",
        type: "choice",
        options: [
          { id: "opt1", label: "Customer" },
          { id: "opt2", label: "Prospect" },
          { id: "opt3", label: "Partner" },
        ],
      },
    ],
    buttons: [
      {
        id: "button-cancel", //used to know what button was clicked, retunred with modal return object
        label: "Cancel",
        type: "white", //blue //red
      },
      {
        id: "button-submit",
        label: "Submit",
        type: "blue",
      },
    ],
  }

2- Call from JS

displayPopup(yourJsonObject, 400, 400, 1); //width & height 400px, and 1 is the position as a popup

Alert confirmation modal

image.png

1- Json object

{
    icon: "warning",
    labels: [
      { text: "Confirmation", type: "h1" },
      {
        text: "Are you sure you want to submit the record details?",
        type: "h2",
      },
    ],
    buttons: [
      {
        id: "button-cancel", //used to know what button was clicked, returned with modal return object
        label: "No",
        type: "white", //blue //red
      },
      {
        id: "button-submit",
        label: "Yes",
        type: "blue",
      },
    ],
  }

2- Call from JS

displayPopup(yourJsonObject, 400, 300, 1); //width 400px & height 300px, and 1 is the position as a popup

Error dialog with Radio buttons

image.png

1- Json Object

{
    icon: "error", //warning //error
    labels: [
      { text: "Error", type: "h1" },
      {
        text: "You can't deactivate the record without entering the record type",
        type: "h2",
      },
    ],
    inputs: [
      {
        id: "radioexample",
        label: "Type",
        type: "radio",
        options: [
          { id: "opt1", label: "One time" },
          { id: "opt2", label: "Regular" },
          { id: "opt3", label: "Premium" },
        ],
      },
    ],
    buttons: [
      {
        id: "button-cancel", //used to know what button was clicked, returned with modal return object
        label: "Cancel",
        type: "white", //blue //red
      },
      {
        id: "button-submit",
        label: "Deactivate",
        type: "red",
      },
    ],
  }

2- Call from JS

 displayPopup(yourJsonObject, 400, 500, 1);//400px width, 500px height, postition 1 for render as popup

Side dialog with multiple inputs

image.png

1- Json Object

{
    icon: "success",
    labels: [
      { text: "Great!", type: "h1" },
      {
        text: "Enter details here",
        type: "h2",
      },
    ],
    inputs: [
      {
        id: "choiceexample",
        label: "Category",
        type: "choice",
        options: [
          { id: "opt1", label: "Customer" },
          { id: "opt2", label: "Prospect" },
          { id: "opt3", label: "Partner" },
        ],
      },
      {
        id: "customername", //used to get the value when the modal object is returned
        label: "Customer Name",
      },
      {
        id: "customeremail",
        label: "Customer Email",
      },
      {
        id: "radioexample",
        label: "Type",
        type: "radio",
        options: [
          { id: "opt1", label: "One time" },
          { id: "opt2", label: "Regular" },
          { id: "opt3", label: "Premium" },
        ],
      },
    ],
    buttons: [
      {
        id: "button-cancel", //used to know what button was clicked, returned with modal return object
        label: "Cancel",
        type: "white", //blue //red
      },
      {
        id: "button-submit",
        label: "Submit",
        type: "blue",
      },
    ],
  }

2- Cal from JS

displayPopup(yourJsonObject, 400, "100%", 2);//Width 400px, height 100% of the height page(becomes responsive) and 2 as position to render it on the side of the page

Published on:

Learn more
Vite apps
Vite apps

Vite apps

Share post:

Related posts

🔓 Understanding the “Access app scope” Feature in Canvas App Components (Power Apps)

💡 Introduction In Power Apps Canvas Apps, components play a crucial role in building reusable UI and logic blocks. However, traditionally, co...

4 days ago

Using Form fill Assist Toolbar to streamline data entry in Power Apps

We tried the AI Form Filling Assistance feature in model-driven Power Apps and found it very helpful. One part that we liked the most was the ...

11 days ago

Improving the UI of Canvas Power Apps with AI

Copilot is not (yet) capable of making Canvas Power Apps for us (Yes, I have tested the new Plan designer as well as the current Power Apps co...

20 days ago

What’s new in Power Apps: May 2025 Feature Update

Build 2025 Sessions We had a great set of sessions at Microsoft Build, you can watch the recordings on demand to catch up! AI-powered Developm...

27 days ago

What’s new in Power Apps: May 2025 Feature Update

Build 2025 Sessions We had a great set of sessions at Microsoft Build, you can watch the recordings on demand to catch up! AI-powered Developm...

27 days ago
Stay up to date with latest Microsoft Dynamics 365 and Power Platform news!
* Yes, I agree to the privacy policy