Open custom pages as dialogs and use cloud flows

This sample demonstrates how you can build simple custom pages that open as dialogs when a command is clicked. You may also call a cloud flow from the custom page dialog.

Prerequisites

• Add a custom page to your model-driven app
• Optionally trigger a cloud flow from the custom page

Create a command

First, you'll need to determine the table and command bar location to place the command.

1. Open the app designer, and then add the desired table to your model-driven app. More information: Build your first model-driven app

2. Publish the app.

3. Select the desired table from the Pages area in the app designer.

4. Select ... (ellipsis), and then select Edit command bar.

   

5. Select the location of the command bar you want, and then select Edit. More information: Command bar locations

   

6. Select + New on the command designer command bar, and then enter the command properties: More information:

   • Create a JavaScript web resource for your command.
   • For other properties, see Create a new command.

Create a JavaScript web resource for your command

Note

This commanding customization is currently only supported using JavaScript. Currently, Power Fx isn't supported.

1. For the command properties Action, select Run JavaScript.
2. Select + Add library
3. Select New to create a new JavaScript web resource.
4. On the Web Resource: New browser window, enter a Name and optionally a Display name name and Description.
5. For Type, select Script (JScript).
6. Select Text Editor.
7. Paste in your JavaScript. For example, depending on the type of dialog you wish to use, copy and paste an example from the Navigate API reference .
8. Select Save, and then select Publish to save and publish the web resource.
9. Close the browser window tab to return to the command designer.

Call the JavaScript from your command

1. In the Add JavaScript Library dialog, select the library you created in the previous steps, and then select Add.

   Tip

   If you can't find the web resource enter the name in the Search box.

2. In the Command properties pane, enter the name of the JavaScript Function. In this example, openDialog is entered.

   

3. Optionally, change the Visibility logic.

4. Select Save and Publish.

See also

Design a custom page for your model-driven app

Navigating to a custom page using client API

Using PowerFx in custom page