Working with Modern Command Bar Designer in PowerApps

Introduction

Previously, the customization of classic commands (previously referred to as the ribbon) lacked flexibility with low-code solutions. When utilizing code for command customizations, the process was challenging, time-consuming, and susceptible to errors. Those who have worked with RibbonWorkbench will relate to this. To facilitate the adaptation of commanding to low-code environments and enable the integration of custom pages to unify canvas and model-driven apps, it became essential to revamp and reconstruct the command infrastructure.

The introduction of modern commanding brings forth numerous enhanced capabilities and significantly simplifies the customization process. Now let's discuss some use cases.

Use Cases

1. Visibility Based on Record Status: Suppose you have a status field on the "Project" entity, and you want to show a "Close Project" button only when the status is set to "In Progress". We can make use of the Modern Command Bar to define a rule for the visibility of the "Close Project" button based on the status field.
2. Notification on Button Click: When the user clicks on the "Close Project" button, you want to display a notification message confirming the action. We can make use of the Modern Command Bar to associate PowerFx commands with the button click action.
3. Update record on Button Click: When a user clicks on the "Close Project" button, the record's status should be updated to "Completed". We can make use of Modern Command Bar to associate PowerFx commands with the button click action providing a streamlined way to mark records as finished directly from the command bar.

There might be several other use cases as well. Now let's discuss how we can perform the above use cases with a different scenario.

Steps to set commands in the command bar designer

Scenario: A bank named 'SG BANK' offers credit limits to Businesses based on certain criteria. Users should be able to avail the same by providing details such as Business Name, Annual Income, and Number of Employees(All things subject to verification by the Bank).

Criteria for Credit

1. If the Business's Annual Income > ₹100,00,00,000 or Number of Employees >1000 then assign credit limit = ₹10,00,00,000
2. Else If Business's Annual Income is between ₹50,00,00,000 & ₹100,00,00,000 and Number of Employees is between 500 & 1000 then assign credit limit = ₹5,00,00,000

Visibility Rules: The avail credit button should be visible based on the criteria defined

Action: Credit limit should be assigned at the click of a button and Business should be notified.

Step 1. Log in to make.powerapps.com -> Switch to your working environment -> Click on New Solution.

Step 2. A new pop-up will appear on the right-hand side. Populate Solution Name: "SG Bank" -> Publisher: "Default Publisher" -> Click on Create as shown below.

Step 3. In Solution, Click on New -> App -> Model Driven App as shown below.

Step 4. A new pop-up will appear. Populate App Name: 'SG BANK' -> Give Description -> Click on Create as shown below.

Step 5. Click on the New button on the left-hand side as shown below.

Step 6. A new pop-up will appear. Select Dataverse Table -> Click on Next as shown below.

Step 7. Select Existing table -> Check Account Entity/Table -> Click on Add as shown below.

Step 8. Click on New Group -> Update Title Name: Businesses as shown below.

Step 9. Click on Account form -> Select Account(Main Form) -> Disable all forms in the app(Select only form(s) which should be visible) as shown below.

Step 10. Click on Accounts view -> Edit Command Bar -> Click on Edit in New Tab as shown below:

Save and Publish Changes before making changes in the new tab.

Step 11. Select Main Form -> Click on Edit as shown below:

Step 12. In the command bar editor, select commands on the left-hand side -> Click on New -> Click on Command as shown below:

Step 13. A new pop-up will appear. Select PowerFx -> Click on continue

Step 14. A new command button will be added. Give a name to the command button: "Avail Credit" -> Select a desired icon.

Step 15. Now define an action for OnSelect on the command button. Select Run Formula in the Action dropdown. Click on the Open Formula bar. Paste below command snippet below in the formula bar.

Patch(Accounts, Self.Selected.Item, {'Credit Limit': 50000000});
Notify( "Credit Limit has been set to ₹50000000", NotificationType.Success)

Step 16. Now we need to define visibility for the command button. In the visibility section, select Show on condition from the formula in the drop-down -> Click on formula bar -> Paste the below-given command snippet in the formula bar.

(Self.Selected.Item.'Number of Employees'<1000 && Self.Selected.Item.'Number of Employees'> 500) && (Self.Selected.Item.'Annual Revenue'<1000000000 && Self.Selected.Item.'Annual Revenue'>500000000)

Step 17. Create a new command button by repeating Step 12 and Step 13. Give a name to the command button: "Avail Prime Credit" -> Select a desired icon.

Now define an action for OnSelect on the command button. Select Run Formula in the Action dropdown. Click on the Open Formula bar. Paste below command snippet below in the formula bar.

Patch(Accounts, Self.Selected.Item, {'Credit Limit': 100000000});
Notify( "Credit Limit has been set to ₹100000000", NotificationType.Success)

Step 18. Now we need to define visibility for the command button. In the visibility section, select Show on condition from the formula in the drop-down -> Click on formula bar -> Paste the below-given command snippet in the formula bar.

Self.Selected.Item.'Number of Employees'>1000 || Self.Selected.Item.'Annual Revenue'>1000000000

Save and Publish Changes.

Step 19. Now go back to the Model-driven app edit view. Select the Accounts form and click on the edit icon as shown below:

Step 20. In the form edit view, drag and drop the Credit Limit (Base) column below the Account Name column.

Save and Publish changes.

Step 21. Now go back to the SG BANK solution and play the MDA(model-driven app).

Step 22. In SG BANK MDA, click on the new button as shown below.

Step 23. In the screenshot below, we can verify that both command buttons created are not visible as conditions are not met. Let populate Annual Revenue: ₹60,00,00,000 and Number of Employees: 600.

Step 24. After values are populated, we can see in the screenshot below 'Avail Credit' command button is visible but the Credit Limit will not be populated unless the Avail Credit button is clicked.

Step 25. Once the user clicks the Avail Credit button, the Credit Limit column is populated with ₹5,00,00,000 and the User is notified via a message shown above the command bar.

Step 26. Now let's verify the condition for the 'Avail Prime Credit command button'. Populate annual Revenue: ₹110,00,00,000 and Number of Employees: 1100.

In the screenshot below we can see that the 'Avail Prime Credit' command button is visible once the fields are populated as mentioned. However the credit limit will not be updated until the user clicks on the button.

Step 27. Once the user clicks the Avail Prime Credit button, the Credit Limit column is populated with ₹10,00,00,000 and the User is notified via a message shown above the command bar.

Conclusion

In this article, we discussed how we can work with a modern command bar designer. This feature has various use cases and we illustrated the same using a demo.

Modern Command Bar might be preferred over the Ribbon Workbench when a developer is looking for the following features: Simplified User Interface (UI), Mobile Responsiveness, Enhanced User Experience, Out-of-the-Box Experience, Modern Look and Feel and Consistency with Microsoft's Design Guidelines.

Although the modern command bar has many advantages it is still developing so we should adapt to it with extra care. Detailed limitations w.r.t command bar can be found here: Command bar customization limitations. Please feel free to reach out in case of any concerns or queries.