{"content":"I recently encountered a requirement on a model-driven app project to display a custom ribbon button only when the form had no unsaved changes—in other words, the button needed to be hidden whenever the form was dirty.\nWhile the solution is quite simple, I thought it would be a good idea to write about it and put all the pieces of the puzzle together. I also explore and provide a solution for the 2 current button extension models—the Classic Ribbon and the Modern commanding .\nClassic Ribbon vs Modern Commanding If you\u0026rsquo;re familiar with custom button development for model-driven apps, you know there are currently two extension models: the Classic Ribbon and the Modern commanding experience. See the official doc below.\n🔗Command designer overview - Power Apps | Microsoft Learn\n🔗Command bar customization limitations - Power Apps | Microsoft Learn\n🔗Customize commands and the ribbon (model-driven apps) - Power Apps | Microsoft Learn\nDespite Microsoft advocating for Modern commanding over the Classic Ribbon, I personally feel more comfortable with the classic approach and have often encountered limitations with the Modern experience.\nBut let’s not dive into politics here (we’ve already got enough of that these days 😉). Instead, I’ll walk through solutions for both extension models, so you can choose the best fit for your needs.\nDetecting Form State - Classic Ribbon The first step is quite obvious, we need to check the form\u0026rsquo;s state to see if there are any unsaved changes. Fortunately, the client API provides a method that can be used in both form and ribbon JavaScript customizations to accomplish this.\nformContext.data.entity.getIsDirty(); 🔗entity.getIsDirty (Client API reference) - Power Apps | Microsoft Learn\nUsing this method, let\u0026rsquo;s create a simple function in a JavaScript web resource that will assess whether our button should be shown or not, depending on the getIsDirty status. We will use it to configure the button enable rule in the next step.\n//Ribbon Enable Rule function ShowWhenNotDirty(primaryControl) { let formContext = primaryControl let isDirty = formContext.data.entity.getIsDirty() return !isDirty } Configuring the button Enable Rule Of course I will be using the amazing Ribbon Workbench for XrmToolBox by Scott Durow. If you\u0026rsquo;ve been living under a rock, mastering this tool is an absolute must for anyone serious about Model-driven app ribbon customization.\n🔗Develop 1 Ltd | Ribbon Workbench for Dynamics 365 \u0026amp; Dynamics CRM\nSince there are plenty of great resources available to help you get started with custom buttons and actions, I’ll skip the basics and focus solely on setting up the enable rule of the button.\nLet\u0026rsquo;s say we already created a button and its command using the Ribbon Workbench. For now the button\u0026rsquo;s command only executes a custom JavaScript function when clicked.\nTo set a dynamic visibility rule for the button, simply add an Enable Rule to the command\nAnd add a Custom Rule step\nHook the custom rule to the ShowWhenNotDirty JavaScript function defined earlier. Don\u0026rsquo;t forget to add the Crm Parameter named PrimaryControl to the rule parameters otherwise the form context will not be passed to the function.\nAnd that\u0026rsquo;s all there is for the button configuration. Now let\u0026rsquo;s achieve the same functionality using the Modern commanding experience.\nDetecting Form State - Modern Commanding Things are a bit different with the Modern commanding model. At the time of writing, even if it is possible to link a custom JavaScript function to the button command (action), only PowerFx functions are allowed for the visibility rules.\nNo issue here since there is an Unsaved form state provided by the Selected object injected by the host and available in PowerFx expressions.\nOur visibility rule can now be expressed like this.\nNot(Self.Selected.Unsaved) 🔗Use Power Fx with commands - Power Apps | Microsoft Learn\nAgain, I won’t go into all the details of setting up the button and will focus only on configuring the visibility rule.\nStarting with an existing button that has no visibility rule ( Visibility is set to Show).\nChange the Visibility to Show on condition from formula and put the PowerFx expression specified above.\nSimple as that! I have to admit, the setup is much easier with the Modern commanding approach.\nRefreshing the ribbon on form change At this point, you might be disappointed to see the button will still be displayed when the form state becomes unsaved—but there’s a good reason for that.\nNatively, the ribbon is only refreshed during the onLoad event of the form, causing all visibility rules of the ribbon to be evaluated at this time.\nSince the form’s unsaved status is set during the user session and after the initial load, it doesn’t really help in this case. We need to explicitly refresh the ribbon whenever form attributes change by invoking the following function.\nformContext.ui.refreshRibbon() 🔗ui.refreshRibbon (Client API reference) in model-driven apps - Power Apps | Microsoft Learn\nThe hard way to achieve this would be to manually add this function to the OnChange event of every field on the form, ensuring the ribbon refreshes when a value changes. But you can imagine waste of time for the initial setup and the nightmare it would be to maintain 🤢.\nInstead, I found this nifty solution provided by Andrew Butenko in the thread below.\n🔗https://community.dynamics.com/forums/thread/details/?threadid=2d8cfb18-13e4-403d-8e13-de5c2f27959c\nThe goal here is to add a function on the OnLoad of the form that will dynamically register an OnChange event on every attributes of the underlying record. 👉 This is a very cool pattern that can be applied to many other use cases.\nfunction onLoad(executionContext) { let formContext = executionContext.getFormContext(); formContext.data.entity.attributes.forEach(function(a){ a.addOnChange(function(){ formContext.ui.refreshRibbon(); }); }); } Last step is to configure the OnLoad event on the form to execute the function above and we are good to go.\nTesting the solution Now, as we can appreciate in the clip below, the custom buttons will automatically disappear whenever the form\u0026rsquo;s state is Unsaved and reappear upon saving the form.\nHope this helps 😎!\nLinks Use Power Fx with commands - Power Apps Use Power Fx to customize the command bar. learn.microsoft.com ","date":"2025-03-09T19:56:52Z","image":"/model-driven-app-trick-how-to-hide-a-ribbon-button-when-the-form-is-dirty/stormseeker-oXo6IvDnkqc-unsplash-1.jpg","permalink":"/model-driven-app-trick-how-to-hide-a-ribbon-button-when-the-form-is-dirty/","title":"Model-Driven App Trick : How to Hide a  Ribbon Button when the Form is Dirty"}