Key Design variations
There are multiple historical components in the Ribbon Workbench that date back to the time when the Ribbon predominated over command bars (and the underlying RibbonXml that supports it). Groups, Tabs, and Templates have no meaning in the current command bar. Because of this, the model for modifying the model-driven app command bar has been greatly simplified with the new Power Fx command buttons.
The following are some of the main design variations:
In the Ribbon Workbench, you would create a button and then associate it with a command.
When using Power Fx commands, the button, command, and visibility rules are all connected as a single unit.
Localized Labels are included in solution translations –
Button label translations were part of the RibbonXml in the Ribbon Workbench.
whereas with Power Fx commands, you can utilise the usual export/import translations functionality to provide translations for the solution.
Separate solution components are used to deploy customizations –
The entity/table solution component was used to deploy your command buttons in the Ribbon Workbench.
To deploy command buttons using Power Fx commands, Add the Component Library in your solution.
The lengthy export/unpack/update/rezip/import cycle that occurs when you publish from inside the Ribbon Workbench is not necessary because the Power Fx commands are deployed using Component Libraries. This speeds up working with the Power FX Command buttons!
To view command details, a Power FX solution packager is required –
The expressions are located inside the .msapp files when exporting the solution that contains the Command Component Libraries. To access the details, use the new Power Fx Solution Packager functionality to extract into yaml files and add them to source control. The good news is that canvas app unpacking/packing is now included in the PAC CLI.
JavaScript commands can still be used!
One of the most essential aspects of the new commanding capability is that you can still use your old JavaScript for commands (but not Enable rules at this time). Why is this important? Because it makes the transition to Version 2 commands easier in cases when the capability is not yet available in Power Fx expressions.
Common Prerequisites
The table below shows the common requirements I find when customizing the command bar with the Ribbon Workbench. There are still certain gaps that will require the use of the Ribbon Workbench for the time being but these will be resolved over time.
Common Requirements | Ribbon Workbench | Commanding v2 |
|---|---|---|
Hide existing OOTB button | Hide Action | Not yet available |
Move existing OOTB button | Customize Button and Drag to the new location | Not yet available |
Change label/icon of existing OOTB button | Customize Button and edit properties | Not yet available |
Change command of existing OOTB button | Customize Command and edit actions | Not yet available |
Pass CommandValueId to JavaScript Context when the same command is used on multiple buttons | Set CommandValueId property | Not applicable since the command is not separate from the button |
Update a form value and then save the record | Ribbon Workbench 'QuickJS' Smart Button or custom JavaScript. The PrimaryControl parameter gives the event context, which can be used to access the form context. | Patch(Accounts,Self.Selected.Item,{'Credit Hold':'Credit Hold (Accounts)'.Yes}); Note: The form is automatically saved and refreshed! |
Update/Create a related record | 'QuickJS' Ribbon Workbench Smart Button or custom JavaScript that uses the WebApi and then performs refresh on the formContext provided by a PrimaryControl parameter | Update Related Record: Patch(Accounts,Self.Selected.Item,{'Description':"edit"}); Create related record (An additional data source must be added to the component library ) Patch(Tasks,Defaults(Tasks),{Regarding:Self.Selected.Item,Subject:Concatenate("Test",Text(Now()))}); Note: The form is automatically refreshed! |
Add buttons to a flyout button | Use the Flyout or SplitButton toolbox control with a MenuSection | [UPDATE] Now available at GA! |
Dynamically populate a flyout button (e.g. from a WebApi call) | Use the PopulateQueryCommand with a Custom JavaScript Action | Not yet available |
Add buttons to the Application Ribbon so that they appear in multiple locations | Add the Application Ribbon to the solution loaded into the Ribbon Workbench. The entity type can be used in an EntityRule to show buttons for multiple entities. | [UPDATE] Although you cannot add to the Global Command Bar - you can change the scope of buttons to appear across apps or across all tables. There is no designer support at this time for changing scope. |
Display a blocking wait spinner whilst a long-running task is in progress | Use showProgressIndicator inside Custom JavaScript | Not yet available in Power Fx command expressions |
Run a workflow | Ribbon Workbench 'Run Workflow' Smart Button or custom JavaScript. | Trigger a workflow on change of a form field change |
Run a Report | Ribbon Workbench 'Run Report' Smart Button or custom JavaScript. | Use a Custom JavaScript function - you can call the Smart Button JavaScript |
Run a Cloud Flow | Ribbon Workbench 'Run Webhook' Smart Button or custom JavaScript. | Use a Custom JavaScript function - you can call the Smart Button JavaScript Open a custom page using Navigate() (or JavaScript) and then run the flow from there. |
Open a popup custom page dialog from a button | Ribbon Workbench 'Open dialog' Smart Button linked to a Canvas App | Use a Custom JavaScript function - you can call the Smart Button JavaScript or use your own JavaScript. There is also Confirm() that allows you to present a simple Yes/No style popup. |
