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

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

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:

NameDescriptionTypePrice
Beaded BraceletBracelet with beadsJewelry10.00
Blouse Black LLarge black blouse for womenWomen’s Clothing25.00
Blouse Black MMedium black blouse for womenWomen’s Clothing25.00
Blouse Black SSmall black blouse for womenWomen’s Clothing25.00
Blouse Black XLExtra large black blouse for womenWomen’s Clothing25.00
Leather Purse Dark BrownLarge dark brown purse with many pocketsBags & Accessories50.00
Polo Shirt Red LLarge red polo shirt for menMen’s Clothing30.00
Polo Shirt Red MMedium red polo shirt for menMen’s Clothing30.00
Polo Shirt Red SSmall red polo shirt for menMen’s Clothing30.00
Polo Shirt Red XLLarge red polo shirt for menMen’s Clothing30.00
Running Shoes Size 10 US WhiteWhite running shoes for size 10 feetShoes65.00
Running Shoes Size 6 US WhiteWhite running shoes for size 6 feetShoes65.00
Running Shoes Size 7 US WhiteWhite running shoes for size 7 feetShoes65.00
Running Shoes Size 8 US WhiteWhite running shoes for size 8 feetShoes65.00
Running Shoes Size 9 US WhiteWhite running shoes for size 9 feetShoes65.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
    }
)



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 Records

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
        }
    )
)




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)




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.





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.

Matthew Devaney

Subscribe
Notify of
guest
11 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Julien
Julien
6 months ago

Hello Matthew,

Thank you for sharing this amazing article.

What about if you want to show/hide a button based on the current user signed-in or specific security role or a specific “Team” Group? Will it be possible to control that kind of visibility using the new command bar without writing any JS Code?

Matt B
6 months ago
Reply to  Julien

Hey Julien
I saw this post last night from Joe Griffin, might be useful to you answering your question:
https://www.linkedin.com/posts/joejgriffin_evaluating-users-current-security-role-via-activity-6860599588194140160-noUF

(Matt, as always another great article – I always look forward to the next one! I noticed that the images in the blog for ‘duplicating a record in a form view’ and ‘copying multiple records in a grid view’ are around the wrong way 🙂

Matt

Julien
Julien
6 months ago

Dear Matthew,

Thank you for your answer and for providing the above example.

I hope in the future we can leverage those two tables to control the visibility using Power FX.

Best,

Julien
Julien
6 months ago
Reply to  Matt B

Hey Matt,

Thank you for providing the above article.

Edin Muderizovic
Edin Muderizovic
6 months ago

Hi Matthew,
thank You for this article, it is really useful. However, I would like to add after Product Name a word “copy”, so that users know it is a copy of the original product and he needs to change a name or whatever else. This is possible on the “Patch” button, I assume?

Murat
Murat
6 months ago

Hello Matthew,

Thank you for sharing this valuable information with us, while I’m trying to implement this feature into my solution I’m facing some impediments. I had created a new field for my table and I want to update it with a new command button. But this new field doesn’t list on the Patch command. All the other fields exist but the new one doesn’t show off. I already tried to publish solutions etc. Do you have any recommendations for this issue?

Murat
Murat
6 months ago

Hello Matthew,

I found out what’s cause of my problem, you can delete this and the previous messages of my.

Guillermo
Guillermo
3 days ago

Hello, Thank you for Sharing.

I try to use you code but i have a problem with the relationships, The field is always blank. How can i fill the default field with a 1 to N relathionship table?

Best regards.