Power Apps Custom Page Modal Dialog For Model-Driven Apps

Power Apps custom pages can be used to build a modal dialog in model-driven apps. A modal dialog is a pop-up menu that lets the user fill in some information then click OK or cancel. This technique requires a little bit of JavaScript code. But don’t worry. If you’re a JavaScript beginner I’ve got code you can copy and paste into your own model-driven app to make it work. In this article, I will teach you how to make a Power Apps custom page modal dialog.

Table of Contents
• Introduction: The Review Comments Dialog Box
• Add A New Custom Page To The Model-Driven App
• Configure The App Display Settings
• Setup The Custom Page App Object And Screen
• Create The Custom Page Modal Dialog Main Container
• Insert A Comments Box Into The Modal Dialog
• Create OK and Cancel Buttons For The Modal Dialog
• Add A Button To The Main Form Command Bar
• Add JavaScript Code To The Button To Open The Modal Dialog
• Write The JavaScript Code To Open The Modal Dialog
• Test The Custom Page Modal Dialog

Introduction: The Review Comments Dialog Box

The I/T department uses the Asset Checkout app to manage loaning devices for users. The Reviews table stores user reviews for the device they borrowed. Comments can be edited using a modal dialog built using a custom page.

Create A New Power Apps Model-Driven App

Open Power Apps Studio and navigate to the Create page. Select the Asset Checkout model-driven app template.

Click the Create button.

The Asset Checkout app will open in the model-driven app editor.

Add A New Custom Page To The Model-Driven App

Press the Add page button in the model-driven app editor

Select Custom page.

Choose Create a new custom page called Review Modal then click the Add button. This will open a new custom page in the canvas app designer.

Configure The App Display Settings

In Power Apps Studio, the custom page will appear on the screen as a full-size page. To make the modal dialog smaller, open the Advanced Settings menu and go to Display. Change the Width and Height to 600 x 300 pixels. Also, toggle off the Scale to fit option. This will allow the modal dialog to become responsive and properly sized on mobile, tablet and PC.

Setup The Custom Page App Object And Screen

We will starting building the custom page modal dialog by updating the app object.

Write this code in the OnStart property of the app object. It gets the recordId from Dataverse and stores it in a variable called gblReviewId. The GUID is in the format “{725851A0-B573-4A33-B609-DA0F2E202EFA}” so we must remove the curly braces and change the data type from string to GUID.

Later in this tutorial, we will learn how to pass a GUID to the modal dialog using URL parameters. Nothing should appear in the custom page at this point. Then we use the variable gblReviewId to obtain the Review record from the reviews table and store it in a variable named gblReview.

Set(
    gblReviewId,
    GUID(Mid(Param("recordId"),2, Len(Param("recordId"))-2))
);
Set(
    gblReview,
    LookUp(
        Reviews,
        Review = gblReviewId
    )
)

To use the Reviews table in the OnStart property code make sure it is added to the Data menu.

Also, change the minimum screen width and height to 200 x 200.

MinScreenHeight: 200
MinScreenWidth: 200

Then set the width and height of the screen named Review Modal.

Set the following properties to change the screen width and height. The height property uses a formula to check whether the app is running in studio mode or in play mode. In play mode, the modal dialog comes with a header that is 53 pixels tall. Therefore, when we are in studio mode we must decrease custom page modal dialog height by 53 pixels.

We will set the pagetype URL parameter later in the tutorial. For now, enter the code shown below and trust me that it will work.

Height: App.Height - If(IsBlank(Param("pagetype")), 53)
Width: Max(App.Width, App.MinScreenWidth)

Create The Custom Page Modal Dialog Main Container

Add a vertical container to the screen to hold all of the dialog’s controls.

Position the container in at X & Y co-ordinates (0, 0) and set the width and height to match the size of the screen.

Height: Parent.Height
Width: Parent.Width
X: 0
Y: 0

We want controls placed inside the main container to flow from top-to-bottom and stretch to fill the size of the container.

Use these values to define the LayoutJustifyContent and LayoutAlignItems properties of the container.

LayoutJustifyContent: LayoutJustifyContent.Start
LayoutAlignItems: LayoutAlignItems.Stretch

Insert A Comments Box Into The Modal Dialog

The key feature of the modal dialog is text box to display comments and let user make edits. Insert a text input into the main container.

Use this code in the Value property of the text input (modern control). It will display the current record’s comments when the model-driven app is in play mode, but not in studio.

gblReview.Comments

Ensure the text input’s Align In Container property is “Set by Container.” This will make it stretch to fill the available space.

Create OK and Cancel Buttons For The Modal Dialog

The modal dialog’s OK and Cancel buttons will be placed below the comments box. Create a new horizontal container to hold them.

Set the Justify property of the container to End and the Align property to Top.

Insert a button into the horizontal container with the text “OK.”

Use this code in the OnSelect property of the button. It saves text from the comments box to the current record and closes the modal dialog using the back function.

Patch(
    Reviews,
    gblReview,
    {Comments: txt_Modal_Description.Value}
);
Back()

Insert another button into the horizontal container with the word “Cancel.”

Use this code in the OnSelect property of the form to close the modal dialog without saving.

Back();

We are now done building the canvas app. Save and publish the app. Then the close the canvas app editor.

Add A Button To The Main Form Command Bar

Now that the Review Modal custom page is completed we will add a button to the model-driven form so a user can open it. Go back to the model-driven app editor and click the three dots beside the Review Table. Choose Edit Command Bar.

Select Main form.

In the command bar edit, go to the ribbon menu and choose New > Command.

Add JavaScript Code To The Button To Open The Modal Dialog

Select the newly added button from the center menu of the screen. Give the icon a label called “Open Dialog” and choose an icon for it. Then update the Action dropdown to Run JavaScript and select Add Library.

On the Add JavaScript library menu click New web resource.

Then Power Apps will navigate to this screen.

Write The JavaScript Code To Open The Modal Dialog

Now we need to write some JavaScript code to open the custom page as a modal dialog. If you have not written any JavaScript code before, don’t worry. I will provide you with the necessary code you can copy and paste into a text file while making only a few minor changes.

Copy and paste this code into Windows Notepad and save it as a Javascript file (extension .js). You will need to update the name parameters with your own custom page’s logical name.

function openCustomPageDialog(primaryControl, firstSelectedItemId, selectedEntityTypeName)
{
    // Centered Dialog
    var pageInput = {
        pageType: "custom",
        name: "cr5b0_reviewmodal_57388",
        entityName: selectedEntityTypeName, // "sample_review"
        recordId: firstSelectedItemId // "{087AA308-B321-E811-A845-000D3A33A3AC}" 
    };
    var navigationOptions = {
        target: 2,
        position: 1,
	height: {
	    value: 260,
	    unit: "px"
	},
	width: {
	    value: 50,
	    unit: "%"
	},
	title: "Edit Comments"
    };
    Xrm.Navigation.navigateTo(pageInput, navigationOptions).then(
        function () {
            // Refresh the main form when the dialog is closed
            primaryControl.data.refresh();
        }
    ).catch (
        function (error) {
            // Handle error
        }
    );
}

Get the logical name by going to the Solutions menu in make.powerapps.com, go to the Default Solution, choose the Pages category and look for the Page. The logical name is displayed in the Name column.

Save the JavaScript file and upload it in the command bar editor. Click save and publish.

As a final step, set the command button parameters as shown below. These values get passed into the JavaScript function when the Open Dialog button is pressed.

• Parameter 1 – PrimaryControl (identifier for the open dialog button)
• Parameter 2 – FirstPrimaryItemId (current record GUID)
• Parameter 3 – SelectedEntityTypeName (table name)
  
  

Save and Publish the command bad and then press Play.

Test The Custom Page Modal Dialog

It’s time to test our custom page modal dialog. Open the model-driven app in play mode and select Reviews. Open the first record in the app.

Click on the Open Dialog button.

The Power Apps custom page modal dialog appears on the screen!

Questions?

If you have any questions or feedback about Power Apps Custom Page Modal Dialogs For Model-Driven Apps please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion.