{"id":28854,"date":"2021-08-05T10:10:27","date_gmt":"2021-08-05T10:10:27","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=28854"},"modified":"2022-01-21T10:19:58","modified_gmt":"2022-01-21T04:49:58","slug":"new-command-bar-designer-using-powerfx-for-dataverse-and-dynamics-365-crm-apps-now-in-preview","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2021\/08\/new-command-bar-designer-using-powerfx-for-dataverse-and-dynamics-365-crm-apps-now-in-preview\/","title":{"rendered":"New Command bar designer using PowerFx for Dataverse and Dynamics 365 CRM apps now in Preview"},"content":{"rendered":"

In our earlier article we talked about the new app designer<\/a> experience and with the new updates in the app designer, command bar or the ribbon bar editor also gets an update.<\/p>\n

Editing or defining Command bar had been a tedious task involving editing the xml tags and I remember I could never get it right the first time especially since it involved adding a lot of related tags, until we had the now popular community tools like the Ribbon Workbench and Visual Ribbon Editor come up and now editing command bar is equivalent to using the Ribbon workbench. There would be hardly any folks that might even know how to add these without the help of these tools.<\/p>\n

Microsoft now presents a simplified command bar designer with its new app designer experience that is currently in preview.<\/p>\n

From the app designer, choose the table and click on the ellipsis to bring up the command bar editor.<\/p>\n

\"New<\/a><\/p>\n

Choose the command bar type you would like to edit.<\/p>\n

\"New<\/a><\/p>\n

This brings up the visual designer.<\/p>\n

\"New<\/a><\/p>\n

Currently you are not allowed to edit any of the system command buttons including hiding the system buttons.<\/p>\n

Click + New Command to add a new button.<\/p>\n

\"New<\/a><\/p>\n

You can drag and drop the button to position it where you want in the ribbon bar.<\/p>\n

Choose an inbuilt icon or a custom webresource for the icon image. Good to see, easy to use inbuilt icons being available for quick selection. This ensures custom apps and customizations now provide the same visual experience as the first party apps.<\/p>\n

\"New<\/a><\/p>\n

Next, set the tooltip for the command button and move to configuring the action to be performed by the button.<\/p>\n

\"New<\/a><\/p>\n

Let us explore the Run formula option first. Click on the open formula bar to notice the formula bar similar to the one we see with the canvas apps designer show up with the OnSelect event selected.<\/p>\n

\"New<\/a><\/p>\n

You can now type your PowerFx formula in the formula bar as the action to be performed when this button is clicked.<\/p>\n

To check the commands\/functions available for model driven app command bar within Power Fx read this<\/a>.<\/p>\n

For this walkthrough, I added a very simple notification command.<\/p>\n

\"New<\/a><\/p>\n

The selected property includes Item and AllItems with Item being the selected record in case only one record from the view was selected and AllItems for all the rows selected from the grid.<\/p>\n

What this command does is show an App level notification bar with the name of the selected record.<\/p>\n

\"New<\/a><\/p>\n

You are also allowed to run javascript function from your webresource libraries.<\/p>\n

To use a javascript function set the following properties:<\/p>\n

Library \u2013 The javascript webresource that contains the function<\/p>\n

Function name \u2013 Name of the function within the library to execute.<\/p>\n

Parameter \u2013 List of parameters to be passed to the function. You have access to predefined parameters as shown below:<\/p>\n

\"New<\/a><\/p>\n

Visible property \u2013 You are often required to conditionally show the button. You could do this by using the Show on condition from formula<\/p>\n

\"New<\/a><\/p>\n

Now this one only includes support for Power Fx formula. You are not allowed to set the javascript function here.<\/p>\n

\"New<\/a><\/p>\n

The button will be shown only if 1 record from the view is selected.<\/p>\n

When you run this app now, initially the button is hidden, when you choose one record, it shows up and the moment you choose another it is hidden again.<\/p>\n

\"New<\/a><\/p>\n

If you go back to your solution from where you started the app designer, you will notice the following components auto added to the solution<\/p>\n

\"New<\/a><\/p>\n

The Power Fx expression that was written for the command button action is converted to a component library. If you click on the ellipsis and choose to edit this library, it will open up in the canvas designer.<\/p>\n

\"New<\/a><\/p>\n

You can go ahead and make your edit here and save and publish for it to reflect back in your app. I modified the message from Hello to hi and here is the result.<\/p>\n

\"New<\/a><\/p>\n

Go ahead and export the solution. Unpacking the solution results in the following:<\/p>\n

\"New<\/a><\/p>\n

The commands are packaged as appactions and a canvas app with .msapp extension<\/p>\n

Conclusion<\/strong><\/p>\n

Presently, the platform will continue to support buttons added through the new designer as well as the old Ribbon editors.<\/p>\n

And we still need the Ribbon Workbench for some of the commonly used operations that are currently not supported through this new designer.<\/p>\n

One Pic = 1000 words! Analyze data 90% faster with visualization apps!<\/div><\/div><\/h2>\n

Get optimum visualization of Dynamics 365 CRM data with –<\/em>
\nKanban Board<\/a> <\/strong>\u2013 Visualize Dynamics 365 CRM data in Kanban view by categorizing entity records in lanes and rows as per their status, priority, etc.<\/em>
\nMap My Relationships<\/a><\/strong> \u2013 Map My Relationships \u2013 Visualize connections and relationships between Dynamics 365 CRM entities or related records in a Mind Map view.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

In our earlier article we talked about the new app designer experience and with the new updates in the app designer, command bar or the ribbon bar editor also gets an update. Editing or defining Command bar had been a tedious task involving editing the xml tags and I remember I could never get it\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[2354,2355],"tags":[2357,2171,2356],"class_list":["post-28854","post","type-post","status-publish","format-standard","hentry","category-dataverse","category-powerfx","tag-command-bar","tag-dataverse","tag-powerfx"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/28854","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=28854"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/28854\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=28854"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=28854"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=28854"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}