Overriding Out Of Box Command Button Behavior - Step By Step UCI

Requirement

 
Sometime back we published a post about overriding out of the box command button behavior. This works fine for a web client but one of our blog readers reported through Twitter that this customization is not working with UCI, so I thought of re-writing the same for the UCI.
 

Details

 
Before going into details here is what you need:
 
Ribbon workbench installed on your Dynamics 365 CE organization. If not please import the solution after getting it from their site or you can also use it XrmToolBox if you are already using it.
 
Although the basic steps are the same,  some of the options have changed now. We have created a sample entity called event and created a sample solution called ribbon where we have placed this entity (we don’t need to include any metadata from this entity, we can just keep this entity without metadata). We also need to add a webresource which we will be using for writing our javasscript. So to create a script, type webresource and add a dummy method under it and keep the webresoruce name and function name in notepad. We will be using it while adding a new button.
  • Open Ribbon Workbench and select your solution.
  • Navigate to form section and right click on the Save button and select Customize Button
  • Now drag and drop a new button from the Toolbox. Next, hit the  Save button and copy all the properties of the out of the box Save button to a new button except from sequence, which will be automatically generated.
  • Now right click on the out of the box button again and select Customize Command, we need to use the same parameters and other rules for our custom command
Overriding Out Of Box Command Button Behavior - Step By Step UCI
  • Click on the  + sign button under the Commands section and create a new command for our button
  • In our custom command use your custom webresource and paste your function name, for us I am using OverrideSave method and created webresource named him_OnSave.js
Overriding Out Of Box Command Button Behavior - Step By Step UCI
  • Righit click on the out of the box button and select Uncustomized Button
  • Again right click on the out of the box button and select hide.
  • Publish your changes.
Now the main issue is to use the existing command. If you will check out of the box Save button function it is XrmCore.Commands.Save.saveForm and if we will try to use it like below,
  1. function OverrideSave() { //Capture response    
  2.     var response = confirm(“Do want to save ? ? ”);  
  3.     if (response == true) {  
  4.         //system function    
  5.         XrmCore.Commands.Save.saveForm();  
  6.     }  
  7. }   
You will get an error:

TypeError - Cannot read property ‘data’ of undefined at SaveLibrary.saveForm
 
To resolve this issue change your code like below in your webresource,
  1. function OverrideSave(primaryControl) {  
  2.     var formContext = primaryControl;  
  3.     var response = confirm("Do want to save ??");  
  4.     if (response == true) {  
  5.         formContext.data.entity.save();  
  6.     }  
  7. }   
Save and publish your changes, now when you will save your entity form, you should get a prompt and data should be saved without any issue.
 
I hope you will find it useful, make sure to provide your feedback!!
 
Keep learning and keep sharing !!