Customize the command bar using command designer

This article guides you through creating and editing modern commands using the command designer and Power Fx.

Open the app designer

Either Create a new model-driven app using modern app designer or Open an existing model-driven app using app designer.

Create a new model-driven app using modern app designer

1. Sign into Power Apps .

2. On the left navigation pane, select Solutions. If the item isn’t in the side panel pane, select …More and then select the item you want.

3. Open or create a solution to contain the new model-driven app.

4. Select New > App > Model-driven app.

5. Enter a Name for your app, and then select Create. More information: Build your first model-driven app

   

Open an existing model-driven app using app designer

1. Sign into Power Apps
2. On the left navigation pane, select Solutions. If the item isn’t in the side panel pane, select …More and then select the item you want.
3. Open the solution containing the existing model-driven app.
4. Select the model-driven app, and then select ... > Edit to open the modern app designer.

Create or edit modern commands

Once you are in the app designer, use the command designer to customize your command bars.

Edit the command bar

Open the command designer to edit a command bar

1. Select any table from the Pages area in the app designer.

2. Select ..., and then select Edit command bar.

   

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

   

Create a new command

Unlike classic commands, modern commands are only displayed within the app you're editing. This prevents unwanted command transferring to other apps as well as better runtime performance.

The first time command designer is opened for an app, a prompt to either use JavaScript only or Power Fx is displayed. Selecting Power Fx also allows you to use JavaScript if desired. Selecting Power Fx in the dialog creates a command component library to store Power Fx formulas.

1. Open the command designer to edit a command bar, and then select New > Command.

2. On the right pane, enter or select from the following options:

   • Label (optional). Enter a label that displays on the command button.

   • Icon. Select an icon for the command button. You can choose from any system icons or web resource SVG files. To upload your own icon, choose Web resource then upload an SVG format file. Then, select Save and Publish the web resource. For more information about how to create a web resource for the icon image you want, go to Create or edit model-driven app web resources to extend an app.

   • Action. Select from the following:

     • Run formula. Enter the Power Fx formula to run the command action. More information: Use Power Fx for actions and visibility
     • JavaScript. Provide the JavaScript library and command to run the command action. More information: Use JavaScript for actions

   • Visibility. Select whether to Show the command button or to Show on condition from formula.

   • Tooltip title. Optionally, enter a tooltip title. The title appears to the user when they hover their mouse over the command.

   • Tooltip description. Optionally, enter a tooltip description. The description appears for the user below the tooltip title when they hover their mouse over the command.

     

   • Accessibility text. Optionally, enter the text that will be read by screen readers.

   • Order number. The order the command displays in at runtime in relation to other commands within the same command bar.

3. Drag and drop the command to the desired location. You can arrange modern commands among classic commands.

4. Select Save and Publish to make the command available to app users.

5. Select Play to run the app and test your changes.

Use Power Fx for actions and visibility

You can use Power Fx for both actions (what happens when the command button is selected) as well as visibility (logic to control when the button is visible). Power Fx isn't supported in classic commands.

Notice the model-driven app command has a formula bar experience that is similar to canvas apps. For working with Dataverse data you can use Power Fx formulas just as you would in canvas apps. More information: Using Power Fx with commands

Use JavaScript for actions

JavaScript is supported with both classic and modern commands. However, it's simpler to create commands and associate your JavaScript using the modern command designer.

1. For the Action select Run JavaScript.

2. Select Add library or select another one from the list. The list is populated with any libraries in use by the current command bar.

   

3. Select Add and search for existing JavaScript web resources or you can add your own.

   

4. Enter the Function name. For example, select the Main_system_library.js library then call this function: XrmCore.Commands.Open.opennewrecord.

5. Add parameters to pass to your function. For more information about the available parameters, go to Grid values.

   

See also

Modern commanding overview