Show custom page dialog using Next Gen Commanding & Smart Buttons

As a follow-on to my last post on adding custom page dialogs to model-driven forms, in this post, I'm going to show you how you can easily do the same using the Next Gen Commanding Buttons.

Ribbon Workbench Smart Buttons have two parts:

  • Smart Button Manifest - the manifest file included in the smart button solution that defines the templates that are picked up by the Ribbon Workbench
  • JavaScript library - the actual run-time JavaScript library that is called by the smart buttons themselves

Since the JavaScript library is just a normal web resource, it can be called from a Commanding V2 button as well since you can use JavaScript actions as well as Power Fx actions!

1. Ensure you have the latest version of the smart button solution installed and add a custom page to your model-driven app as described by my last post.

2. Edit the command bar using the new command bar editor.

3. Add a new button to the command bar and select Run Javascript instead of Run formula for the Action parameter.

4. Use the + Add Library button. Search for smartbuttons and select the dev1_/js/SmartButtons.ClientHooks.js library.

5. Set the function parameter to be SmartButtons.ClientHooks.SmartButtons.OpenDialog

6. Add the following parameters:

Parameter 1 (On a Grid): SelectedControlSelectedItemIds

Parameter 1 (On a Form): PrimaryItemIds

Parameter 2: The unique name of your custom page

Parameter 3: The width of your dialog (or zero for a sidebar)

Parameter 4: The height of your dialog (or zero for a side-bar)  

Parameter 5:  The title of your dialog

Parameter 6: PrimaryControl

Parameter 7: SelectedControl 

Parameter 1 is a dynamic property that passes the id of the record currently selected - Parameters 6 & 7 give the code a context to use when calling the client-side api.
Once this is done you will see something like the following:

Commanding V2 designer with show dialog smart button

7. If you are adding a button to a grid, you will also need to set Visibility to Show on condition from formula with the expression:

CountRows(Self.Selected.AllItems)=1

This will ensure that the button is only shown when a single record is selected in the grid.

8. Save and Publish

...and that's all there is to it! Using Smart Buttons in the Ribbon Workbench has the advantage that it will set up much of this for you and only ask you for the parameters needed, but the new commanding designer is so easy to use it makes using the Smart Button library really straightforward. 

P.S. There is a bug that will be fixed by Microsoft in the coming weeks where commanding v2 JavaScript buttons do not show up correctly on forms.

See more at community Summit NA!

Those nice people at Dynamic Communities have asked me to be a Community Ambassador for SUMMIT NA 2021. This is going to be an exciting in-person event (fingers crossed) where I'll be speaking about custom pages and Power FX command buttons - it would be great to see you there if you are at all able to travel to Houston, Texas. Can't wait to show you all the cool new features. You can also register using the Promo code Durow10 to get a 10% discount if you've not already registered!

@ScottDurow 😊

Comments are closed