What is powerapps-modals?

Overview
powerapps-modals gives you the tool to build attractive modals in Model-driven apps fast & easy. You just need to configure the modal configuration and start calling it from your client code.
Why?
Roadmap
Click here to see the roadmap of powerapps-modals
Installation
Go to this link and download the latest release managed zip file, and then install it in your environment
How to use?
- Install the zip files in your environment
- Prepare your Json
{
"icon": "success",//warning //error
"labels": [
{ "text": "Activation Succeeded", "type": "h1" },
{
"text": "Enter customer name and email to submit the request to the next stage",
"type": "h2",
},
],
"inputs": [
{
"id": "customername", //used to get the value when the modal object is returned
"label": "Customer Name",
},
{
"id": "customeremail",
"label": "Customer Email",
},
],
"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",
},
],
}
- Call it from your script
let pageInput: Xrm.Navigation.PageInputHtmlWebResource = {
pageType: "webresource",
webresourceName: "vite_/viteapps/pages/modals.html",
data: JSON.stringify(modalJsonObject), //modalJsonObject, pass your json object here
};
let navigationOptions: Xrm.Navigation.NavigationOptions = {
target: 2, // 2 is for opening the page as a dialog.
width: 400, // default is px. can be specified in % as well.
height: 500, // default is px. can be specified in % as well.
position: 1, // Specify 1 to open the dialog in center; 2 to open the dialog on the side. Default is 1 (center).
title: "Record activation modal", //recommended to enter title here
};
Xrm.Navigation.navigateTo(pageInput, navigationOptions).then(
function success(returnedValues) {
console.log(returnedValues);
/*
Return values object comes in the below format
{
inputs:object //holds the inputs and what the user filled them in with, you can get them by using the input id as the identifier
clickedButton:string // the id of the button the user clicked
}
for the above example you can get your inputs like the below
*/
let clickedButton = returnedValues.clickedButton; //if the user clicked on submit button it will return "button-submit"
let customerName = returnedValues.inputs["customername"]; //returns what user filled in the customer name input
let customerEmail = returnedValues.inputs["customeremail"]; //returns what user filled in the customer email input
},
function error(e) {
// Handle errors
}
);
That's it :)
Published on:
Learn moreRelated posts
Forms or Controls? That is the question in Power Apps
I get often asked, should I use Forms or Controls in Power Apps for data entry. This question can be answered either way. But do you know why ...
Power Apps – Create offline profiles in the maker studio for Canvas apps
We are announcing the ability to create offline profiles in the maker studio for Canvas apps in Power Apps. This feature will reach general av...
Power Apps – Manage your source code for canvas apps
We are announcing the ability to manage your source code for canvas apps in Power Apps. This feature will reach general availability on Septem...
August 2025 Power Apps Pulse
Power Apps – Header and navigation refresh
We are announcing a refresh to the header and navigation of model-driven apps in Power Apps. This feature will reach general availability on O...
Power Apps – Fill forms faster with smart paste
We are announcing the ability to fill forms faster with smart paste in Power Apps. This feature will reach general availability on October 1, ...
Power Apps – Visualize the data in your view easily with Copilot
We are announcing the ability to visualize data as a chart generated by Copilot in Power Apps. This feature will reach general availability on...
Power Apps’ User defined functions GA
User defined functions in Power Apps' Canvas apps have reached general availability (GA)! Use them to modularize your logic making apps easier...