https://github.com/ahmadnsam/powerapps-modals
build simple Model-driven apps modals very quick, turn json into modals without developing PCF or HTML webresources
https://github.com/ahmadnsam/powerapps-modals
modals model-driven-application powerapps
Last synced: about 1 year ago
JSON representation
build simple Model-driven apps modals very quick, turn json into modals without developing PCF or HTML webresources
- Host: GitHub
- URL: https://github.com/ahmadnsam/powerapps-modals
- Owner: ahmadnsam
- License: mit
- Created: 2022-09-01T20:32:48.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-01-03T13:24:18.000Z (over 3 years ago)
- Last Synced: 2025-03-02T16:40:52.624Z (over 1 year ago)
- Topics: modals, model-driven-application, powerapps
- Language: CSS
- Homepage: https://viteapps.dev/series/powerapps-modals
- Size: 131 KB
- Stars: 7
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# powerapps-modals
#### [Documentation](https://viteapps.dev/series/powerapps-modals) | [Roadmap](https://viteapps.notion.site/Roadmap-9bb94375a6a84ec781aa803a52bc4ae0) | [Examples](https://github.com/ahmadnsam/powerapps-modals-examples)
# Turn JSON into modals
```jsonc
{
"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",
},
],
}
```
# Why powerapps-modals?
# Steps
#### 1- [Download](https://github.com/ahmadnsam/powerapps-modals/releases) the solution in your environment
#### 2- Prepare your modal json
```jsonc
{
"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",
},
],
}
```
#### 3- Write your script and pass the json to it
```javascript
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!