Customize The Command Bar In A Power Apps Model-Driven App

Imported reference from Matthew Devaney's blog for learning purposes. Original: https://www.matthewdevaney.com/customize-the-command-bar-in-a-power-apps-model-driven-app/. Author: Matthew Devaney.

Customize The Command Bar In A Power Apps Model-Driven App Posted by - Matthew Devaney on - October 31, 2021 26 Comments

Have you ever wanted to add your own buttons to the command bar in a Power Apps model-driven app? Recently Power Apps added the ability to do this and the best part is the only coding language you need to know is Power FX : the same language used to create canvas apps. This significantly lowers the bar for model-driven app development – now every maker can customize the command bar, not just those who know Javascript how to use the Ribbon Workbench .

In this article I will show you how to customize the command bar in a Power Apps model-driven app by creating a button to copy one-or-more records in a table. Table of Contents Introduction: The Product Pricing App

Setup The Dataverse Table And Model-Driven App Add A New Custom Command To A Form

Write Power FX Code To Copy A Single Record

Test Copying A Single Record Using The Command Bar Add A New Custom Command To A Grid-View

Write Power FX Code To Copy Multiple Records

Control Visibility Of A Custom Command Bar Button

Test Copying Multiple Records Using The Command Bar Introduction: The Product Pricing App

The Product Pricing model-driven app is used by employees at a fashion company to track which products the company sells and the price. Employees can make a copy of any existing product in the database to add a new product that is similar.

Setup The Dataverse Table And Model-Driven App

Create a new Dataverse table called Product with the following columns: Name Description (single-line text)

Type (choice) [Men’s Clothing, Women’s Clothing, Shoes, Jewelry, Bags & Accessories] Price

Populate the Product table with this data: Name Description Type Price Beaded Bracelet Bracelet with beads Jewelry 10.00 Blouse Black L Large black blouse for women Women’s Clothing 25.00 Blouse Black M Medium black blouse for women Women’s Clothing 25.00 Blouse Black S Small black blouse for women Women’s Clothing 25.00 Blouse Black XL Extra large black blouse for women Women’s Clothing 25.00 Leather Purse Dark Brown

Large dark brown purse with many pockets Bags & Accessories 50.00 Polo Shirt Red L Large red polo shirt for men Men’s Clothing 30.00 Polo Shirt Red M Medium red polo shirt for men Men’s Clothing 30.00 Polo Shirt Red S Small red polo shirt for men Men’s Clothing 30.00 Polo Shirt Red XL Large red polo shirt for men Men’s Clothing 30.00 Running Shoes Size 10 US White White running shoes for size 10 feet Shoes 65.00 Running Shoes Size 6 US White White running shoes for size 6 feet Shoes 65.00 Running Shoes Size 7 US White White running shoes for size 7 feet Shoes 65.00 Running Shoes Size 8 US White White running shoes for size 8 feet Shoes 65.00 Running Shoes Size 9 US White White running shoes for size 9 feet Shoes 65.00

Create a new model-driven app, add the Product table to the sitemap and configure the Active

Products view to look like the image below. Then setup the Main Form as shown in the image below. Add A New Custom Command To A Form

An employee can make a copy of an existing product by opening up the product’s form and clicking the copy button in the command bar. To create a new command, select the three dots beside the product table and choose Edit Command Bar .

Select the Main form for Product table and click Edit.

The command designer screen appears showing all of the commands for the Main form . Select New Command from the left-menu.

Then change the label of the command to copy and also change the icon to copy.

Write Power FX Code To Copy A Single Record

Now that we have added a copy button to the form’s command bar we must write some Power FX code to tell the button what to do. With the Copy command selected, choose Open Formula Bar from the right menu.

Then put this code into the formula bar. The patch function will create a new record in the product table with the same name, description, type and price of the current item being shown in the form. Patch ( Products , Defaults ( Products ), {

Name : Self.Selected.Item.Name, Description: Self.Selected.Item.Description, Type: Self.Selected.Item.Type, Price: Self.Selected.Item.Price } ) Code language: CSS ( css )

Test Copying A Single Record Using The Command Bar

We are now finished making our copy command. Save and publish the command bar and then click Play to test it out.

Open any record in the Product table, navigate to its form and click the Copy command. When we do this a copy of the record is created and we get redirected to the new product’s form. Click Save & Close when the new form appears. Now we can see a copy of the record in the Products grid-view. Add A New Custom Command To A Grid-View

An employee can make also make a copy of multiple existing products by opening up the product’s grid-view, selecting the products and clicking the copy button in the command bar. To create a new command, select the three dots beside the product table and choose Edit Command Bar .

Select the Main Grid for Products the Product table and click Edit.

The command designer screen appears showing all of the commands for the Main grid . Select New Command from the left-menu.

Then change the label of the command to copy and also change the icon to copy.

Write Power FX Code To Copy Multiple Record s

Next we will write the code to copy multiple selected records in the grid-view. With the Copy command selected click Open Formula Bar from the right-side.

Then put this code into the formula bar. The ForAll function will loop through all of the selected items and create a new record in the product table with the same name, description, type and price of the each item. ForAll ( Self .Selected .AllItems As tblProducts , Patch ( Products , Defaults ( Products ), {

Name : tblProducts.Name, Description: tblProducts.Description, Type: tblProducts.Type, Price: tblProducts.Price } ) ) Code language: CSS ( css ) Control Visibility Of A Custom Command Bar Button

The Copy command should only be displayed in the command bar when a record is selected in the grid-view. Go to the right-menu and click Show on condition from formula.

Then use this code in the Visible property. ! IsEmpty ( Self .Selected .AllItems ) Code language: CSS ( css )

Test Copying Multiple Records Using The Command Bar

Let’s test the new Copy command for multiple records. Save and Publish the command bar and then click the Play button to start the app.

Open the Products grid-view, select multiple records in the grid and then click the Copy button. Copies of each record selected will appear in the grid-view. Did You Enjoy This Article? 😺

Subscribe to get new Copilot Studio articles sent to your inbox each week for FREE Enter your email address Sign Me Up Questions?

If you have any questions or feedback about Customize The Command Bar In A Power Apps Model-Driven App 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. Command Bar Model-Driven Apps Power FX Matthew Devaney M365 Copilot Power Apps

How To Create Copilot Custom UI Widgets In Power Apps