Exercise - Use custom pages with commands

15 minutes

In this exercise, you’ll add a command bar button that opens a custom page in a modal dialog.

Important

Use a test or developer environment with Microsoft Dataverse provisioned and the sample apps enabled. If you don't have one, you can sign up for the community plan.

Task: Create custom page

In this task, you'll add a new custom page to the Fundraiser application.

Navigate to https://make.powerapps.com and make sure you have your test environment selected.
Select Apps, select the Fundraiser application and, then select Edit.
Select + New.
Select Custom page.
Select Create custom page, enter What if for Name, and select Create.
Select the Data tab and then select Add data.
Search for fundraiser and select the Fundraiser table.
Select the Tree view tab and then select App object.
Select OnStart, and paste the formula below in the formula bar. This formula creates variables:
1. The record variable holds the current record on the form.
2. The remainingAmount variable holds the remaining amount for the fundraiser goal.
3. The numberOfPeople variable keeps track of how many people donate to reach the fundraiser goal. We initialize this variable with 1.
4. The averageDonation variable keeps track of the amount each person donates to reach the fundraiser goal. We initialized this variable with the remaining amount.
```
Set(record,LookUp(Fundraisers,Fundraiser=GUID(Substitute(Substitute(Param("recordId"),"{",""),"}",""))));Set(remainingAmount,record.'Fundraiser Goal'-record.'Total Donations');Set(numberOfPeople,1);Set(averageDonation,remainingAmount)
```
Select Screen1 and then select + Insert.
Expand the Layout group and select Vertical container.
Select the container.
Go to the formula bar and change the Width value of the container to 1280.
Change the Height value of the container to 680.
The container should now look like the image below.
Select the container and select the + Insert button.
Select Label from the Popular group.
Enter Number of people for Text.
Select the container and select the + Insert button.
Select Text box from the Popular group.
Rename the Text box to Number of people.
Set the Value of the Number of people text box to numberOfPeople.
Select the container and select the + Insert button.
Find/select a Label.
Enter Amount per person for Text.
Select the container and select the + Insert button.
Find/select a Text box.
Rename the Text box Amount per person.
Set the Value of the Amount person text box to averageDonation.
Set the OnChange value of the Amount per person text box to the formula below. This formula will set the number of people based on a given average donation.
```
If(Value('Amount per person'.Value) > 0, Set(numberOfPeople, remainingAmount /'Amount per person'.Value), Set(numberOfPeople, 1))
```
Select the Number of people text box.

Set the OnChange value of the Number of people text box to the formula below. This formula sets the average donation based on a given number of people.

If(Value('Number of people'.Value) > 0, Set(averageDonation, remainingAmount / 'Number of people'.Value), Set(numberOfPeople, 1);Set(averageDonation, remainingAmount))

Select Save and wait for the page to be saved.
Select Publish.
Select Publish this version.
When the The page has saved successfully dialog box appears, select Dismiss.
Close the custom page editor browser window or tab.
You should now be back on the Model-driven application editor. Select OK.
Select Save and wait for the app to be saved.
Select Publish and wait for the app to be published.
Start a new browser session, navigate to https://make.powerapps.com and make sure you have your test environment selected.
Select Solutions and open the Default Solution.
Select Pages, locate the What if page you created and copy the Name. Keep this name on a notepad, you'll need it in a future step.
You can close this browser session after you copied the name.

Task: Add command button

In this task, you'll add a new command button to the Fundraiser table main form.

Open a text editor and paste the JavaScript below. This JavaScript opens a centered dialog.

function calculate(itemId)
{
// Centered Dialog
var pageInput = {
    pageType: "custom",
    name: "[YOUR CUSTOM PAGE NAME]",
    recordId: itemId
};
var navigationOptions = {
    target: 2, 
    position: 1,
    width: {value: 50, unit:"%"},
    title: "What if"
};
Xrm.Navigation.navigateTo(pageInput, navigationOptions)
    .then(
        function () {
            // Called when the dialog closes
        }
    ).catch(
        function (error) {
            // Handle error
        }
    );
}

Replace [YOUR CUSTOM PAGE NAME] with your custom page name that you copied in task 1.
Save the file locally on your computer and name it WhatIf.js. Make sure the file extension is .js.
Go back to the model-driven app designer.
Select the ... button of the Fundraiser and select Edit command bar.
Select Main form and then select Edit.
Select + New and then select Command.
Select Power Fx and then select Continue.
Enter What if for Label, select Use Icon, select Recalculate, and select Run JavaScript for Action.
Select + Add library.
Select + New web resource.
Select Choose file.
Select the WhatIf.js file you created and select Open.
Enter What If JS for Display name, enter WhatIfJS for Name, select JavaScript (JS) for Type, and then select Save and publish.
Search for what if, select the What If JS web resource you just added, and then select Add.
Enter calculate for Function name and select + Add parameter.
Select FirstPrimaryItemId for Parameter 1.
Select Save and Publish and wait for the publishing to complete.
Select Play.
Select Fundraisers and open one of the fundraiser records.
You should see the What If command bar button you added. Select the What if command bar button.
The what if dialog should come to view.
Change the Number of people value to 5. The Amount per person should update to how much each person needs to donate to reach the fundraiser goal.
Change the Amount per person value and see how that calculates the number of people.

Congratulations, you've created a custom page and opened it as dialog by using a command bar button. Let's review what we've learned in this module.

Feedback

Was this page helpful?