Open custom pages as dialogs and use cloud flows

The sample in this article demonstrates how you can build simple custom pages that open as dialogs when a command is selected. You might 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 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 view 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 currently supports only JavaScript. Power Fx isn't supported.

1. For the command properties Action, select Run JavaScript.
2. Select + Add library.
3. On the Add JavaScript Library list, select + New web resource to create a new JavaScript web resource.
4. On the New web resource pane, enter a Name, and optionally a Display name and Description.
5. For Type, select JavaScript (JS).
6. In the Code box, paste your JavaScript. For example, depending on the type of dialog you want to use, copy and paste an example from the Navigate API reference .
7. Select Save and publish to save and publish the web resource.
8. 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 (web resource) 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, if the name isn't specified, 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