How to add low-code Power Fx buttons to model-driven apps

[Update June 2022] The modern command designer is now GA!

Power Fx command bar buttons in model-driven apps is the latest exciting feature to be released into preview by the Power Platform team! Check out my first look video and Casey’s blog post.

This post shows you the steps to follow to add a command bar button on a model-driven form to create a related task for the account record and to only show this when the Credit Hold flag is set to No. This would normally require custom JavaScript and the Ribbon Workbench but now can be accomplished with a simple expression!

1. Open the new Model Driven App editor

First, we must open the new model-driven app editor to access the command bar editor.

1. Create a new model-driven app and add the account table.
2. Open the solution that contains the model-driven app using the preview editor (make.preview.powerapps.com)
3. Using the context menu on the model-driven app, select Edit -> Edit in preview
4. This will open the new app designer preview. Eventually, this will be the default experience.

2. Edit the command bar

Once the app designer has opened we can edit the command bar on the account table. We will create a form button to create a new task for the selected account.

1. Inside the Pages panel, select the Account Page context menu -> Edit command bar (preview).
2. Select the Main form command bar to edit.
3. The command bar editor will open.

3. Add Power Fx Command Button

The command bar editor will show all the buttons configured for the account main form. Some of these buttons will not be visible by default but are displayed still in the editor. This is very much like the Ribbon Workbench. The existing buttons are considered V1 buttons and cannot be edited at this time.

1. Select New command.
2. In the Command properties panel on the right, set the Label and Icon of the button.

Note: You can also upload your own svg rather than selecting from the out-of-the-box icons available.

4. Set Visibility Expression

This is where Power Fx starts to make an appearance!

1. In the Visibility section, select Shown on condition from formula that is at the bottom (you may need to scroll down).
2. Notice the Expression drop-down now shows Visible rather than OnSelect.
3. Enter the expression:
   Self.Selected.Item.'Credit Hold'='Credit Hold (Accounts)'.Yes

   Note: You can also use navigation properties to access related records in these kinds of expressions!
4. Save and Publish and then close the editor window.

5. Open Component Library and add a data source

So that we can add a new task, we must add the Tasks data source connection much like we would in a canvas app.

1. In the solution editor, select Component libraries and then open the CommandV2 component library that should have been created.
2. Once the editor has opened, select Data in the left-hand panel.
3. Select Add data.
4. Select the Tasks table from the Current environment connector.

6. Close Component Library to release the lock

When you open a component library, a lock is taken out to prevent it from being edited in multiple sessions. We must close the editor to release the lock.

1. Select File -> Save.
2. Select Publish -> Publish this version.
3. Select Close.

7. Add OnSelect Expression to create a task

Now we can add the Power Fx expression to create the new task related to the account record.

1. Open the command bar editor again using Edit command bar (preview) from inside the model-driven app editor.
2. Select the Main Form again.
3. Select the Credit Check button.
4. In the OnSelect expression enter:
   
   Patch(Tasks,Defaults(Tasks),{Regarding:Self.Selected.Item,Subject:"Credit Check Follow Up"});
   Notify("Credit task created",NotificationType.Success);
5. Select Save and Publish.
6. Select Play to open the model-driven app.

8. ...and the result!

Once the model-driven app opens, you can open an account record and see the Credit Check button appear only when the Credit Hold column is set to Yes.

Selecting the button will create a new task related to the current record! Notice that the form is automatically refreshed to show the new record created inside the related records.

Note: If you wanted to make the button appear as soon as Credit Hold is set to Yes, you would need to add a call to refreshRibbon inside the form fields onChange Event.

To add this functionality using the Ribbon Workbench would have required JavaScript and would be considerably more complex. The new commanding Power FX command buttons unlocks many customizations to low-code app makers!

There are still some requirements that are not yet possible to implement using the new Power Fx Commanding, where you will need to continue to use the Ribbon Workbench. One example of this is the more complex display/enable rules you could create such as visibility depending on the user's security privileges - but I am hopeful that these gaps will be filled in the 'fullness of time' 😊 

Watch out for more posts from me on Power Fx commands!

@ScottDurow