{"id":26447645,"url":"https://github.com/ahmadnsam/powerapps-modals","last_synced_at":"2025-03-18T13:57:59.579Z","repository":{"id":280306998,"uuid":"531677313","full_name":"ahmadnsam/powerapps-modals","owner":"ahmadnsam","description":"build simple Model-driven apps modals very quick, turn json into modals without developing PCF or HTML webresources","archived":false,"fork":false,"pushed_at":"2023-01-03T13:24:18.000Z","size":134,"stargazers_count":7,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-02T16:40:52.624Z","etag":null,"topics":["modals","model-driven-application","powerapps"],"latest_commit_sha":null,"homepage":"https://viteapps.dev/series/powerapps-modals","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ahmadnsam.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-09-01T20:32:48.000Z","updated_at":"2025-03-01T08:39:32.000Z","dependencies_parsed_at":"2025-03-02T16:40:54.444Z","dependency_job_id":"d778ccf9-1de2-4b6a-b873-e83210de9ff0","html_url":"https://github.com/ahmadnsam/powerapps-modals","commit_stats":null,"previous_names":["ahmadnsam/powerapps-modals"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahmadnsam%2Fpowerapps-modals","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahmadnsam%2Fpowerapps-modals/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahmadnsam%2Fpowerapps-modals/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahmadnsam%2Fpowerapps-modals/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ahmadnsam","download_url":"https://codeload.github.com/ahmadnsam/powerapps-modals/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244236059,"owners_count":20420753,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["modals","model-driven-application","powerapps"],"created_at":"2025-03-18T13:57:58.849Z","updated_at":"2025-03-18T13:57:59.568Z","avatar_url":"https://github.com/ahmadnsam.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# powerapps-modals\n\n#### [Documentation](https://viteapps.dev/series/powerapps-modals) | [Roadmap](https://viteapps.notion.site/Roadmap-9bb94375a6a84ec781aa803a52bc4ae0) | [Examples](https://github.com/ahmadnsam/powerapps-modals-examples)\n\n![image](https://user-images.githubusercontent.com/83499142/189826069-0664ee76-7e94-4a7c-bc00-0976347fe543.png)\n\n# Turn JSON into modals\n\n```jsonc\n  {\n    \"icon\": \"success\",//warning //error\n    \"labels\": [\n      { \"text\": \"Activation Succeeded\", \"type\": \"h1\" },\n      {\n        \"text\": \"Enter customer name and email to submit the request to the next stage\",\n        \"type\": \"h2\",\n      },\n    ],\n    \"inputs\": [\n      {\n        \"id\": \"customername\", //used to get the value when the modal object is returned\n        \"label\": \"Customer Name\",\n      },\n      {\n        \"id\": \"customeremail\",\n        \"label\": \"Customer Email\",\n      },\n    ],\n    \"buttons\": [\n      {\n        \"id\": \"button-cancel\", //used to know what button was clicked, retunred with modal return object\n        \"label\": \"Cancel\",\n        \"type\": \"white\", //blue //red\n      },\n      {\n        \"id\": \"button-submit\",\n        \"label\": \"Submit\",\n        \"type\": \"blue\",\n      },\n    ],\n  }\n\n```\n\n![image](https://user-images.githubusercontent.com/83499142/189827990-c4bc43bf-40e1-4033-bc4d-e4201d87fa55.png)\n\n# Why powerapps-modals?\n![image](https://user-images.githubusercontent.com/83499142/189830933-f09313aa-1229-4d18-84bf-acfe3cb8f8b4.png)\n\n\n# Steps\n#### 1- [Download](https://github.com/ahmadnsam/powerapps-modals/releases) the solution in your environment \n#### 2- Prepare your modal json\n```jsonc\n  {\n    \"icon\": \"success\",//warning //error\n    \"labels\": [\n      { \"text\": \"Activation Succeeded\", \"type\": \"h1\" },\n      {\n        \"text\": \"Enter customer name and email to submit the request to the next stage\",\n        \"type\": \"h2\",\n      },\n    ],\n    \"inputs\": [\n      {\n        \"id\": \"customername\", //used to get the value when the modal object is returned\n        \"label\": \"Customer Name\",\n      },\n      {\n        \"id\": \"customeremail\",\n        \"label\": \"Customer Email\",\n      },\n    ],\n    \"buttons\": [\n      {\n        \"id\": \"button-cancel\", //used to know what button was clicked, retunred with modal return object\n        \"label\": \"Cancel\",\n        \"type\": \"white\", //blue //red\n      },\n      {\n        \"id\": \"button-submit\",\n        \"label\": \"Submit\",\n        \"type\": \"blue\",\n      },\n    ],\n  }\n\n```\n#### 3- Write your script and pass the json to it\n```javascript\n  let pageInput: Xrm.Navigation.PageInputHtmlWebResource = {\n    pageType: \"webresource\",\n    webresourceName: \"vite_/viteapps/pages/modals.html\",\n    data: JSON.stringify(modalJsonObject), //modalJsonObject, pass your json object here\n  };\n  let navigationOptions: Xrm.Navigation.NavigationOptions = {\n    target: 2, // 2 is for opening the page as a dialog.\n    width: 400, // default is px. can be specified in % as well.\n    height: 500, // default is px. can be specified in % as well.\n    position: 1, // Specify 1 to open the dialog in center; 2 to open the dialog on the side. Default is 1 (center).\n    title: \"Record activation modal\", //recommended to enter title here\n  };\n  Xrm.Navigation.navigateTo(pageInput, navigationOptions).then(\n    function success(returnedValues) {\n      console.log(returnedValues);\n      /*\n        Return values object comes in the below format\n        {\n          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\n          clickedButton:string // the id of the button the user clicked\n        }\n        \n        for the above example you can get your inputs like the below\n      */\n      let clickedButton = returnedValues.clickedButton; //if the user clicked on submit button it will return \"button-submit\"\n      let customerName = returnedValues.inputs[\"customername\"]; //returns what user filled in the customer name input\n      let customerEmail = returnedValues.inputs[\"customeremail\"]; //returns what user filled in the customer email input\n    },\n    function error(e) {\n      // Handle errors\n    }\n  );\n```\n\n#### That's it!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahmadnsam%2Fpowerapps-modals","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fahmadnsam%2Fpowerapps-modals","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahmadnsam%2Fpowerapps-modals/lists"}