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:

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.