Loading...

What is powerapps-modals?

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?

189830933-f09313aa-1229-4d18-84bf-acfe3cb8f8b4.png

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?

  1. Install the zip files in your environment
  2. 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",
      },
    ],
  }
  1. 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 more
Vite apps
Vite apps

Vite apps

Share post:

Related 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 ...

8 days ago

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...

9 days ago

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...

9 days ago

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...

12 days ago

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, ...

14 days ago

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...

14 days ago

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...

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