Monday, April 5, 2021

Step By step process to Add Ribbon button and onclick open Modal Dialog Form

Start your work with Ribbon Workbench:

Follow the step-by-step process to add a Ribbon Button on the entity form and perform Create and update operations with the click of the ribbon button.

In this blog, I'm going to show you step by step process:
1. To add a button on Ribbon (let's say Update) on the email activity form.
2. Onclick of Update button opens a new record form 
in the pop-up window in Modal Dialog Form if the record doesn't match with the record ID on the email activity form (Lookup Field: "to").
3. Else OnClick open update form in the pop-up window in Modal Dialog Form if record exists with the record ID on the email activity form (Lookup Field: "to").


Click here to learn more about Xrm.Navigation.navigateTo

Note: A new feature in the 2020 Release Wave 1 enables users to open records in a modal dialog without leaving the main record form in model-driven apps for Dynamics 365 and Power Apps.

Here are few more references related to the dynamics 365 ribbon button: 
To hide and show button on dynamics 365 ribbon.

----------------------------------------------------------------------------------------------------------
Let's begin: 

1. First Create a basic javascript file (email.js), add method (OnclickOfRibbonButton), and logic in it. Which can be used on the ribbon button click functionality.

Here you start, follow the example below add below code in your email.js webresource file:

if ("undefined" == typeof (NEW)) {
    NEW = { __namespace: true };
}
 
NEW.Email = {
    OnclickOfRibbonButton: function (primaryControl) {
        try {
            var formContext = primaryControl;
            var navigationOptions = {
                target: 2,
                height: { value: 80, unit: "%" },
                width: { value: 30, unit: "%" },
                position: 2
            };
            if (formContext.getAttribute("to").getValue() != null || formContext.getAttribute("to").getValue() != undefined) {
                var toId = formContext.getAttribute("to").getValue()[0].id.replace("{", "").replace("}", "").toLowerCase();
              // Open the Modal Dialog Update form in the pop-up window with Matching record ID.
                var pageInput = {
                    pageType: "entityrecord",
                    entityName: "new_customentity",
                    entityId: toId  // Pass record ID (lookupID) which you want to update 
                };
                Xrm.Navigation.navigateTo(pageInput, navigationOptions).then(
                    function success() {
                        // Run success code - Add your logic here 
                    },
                    function error() {
                        // Handle errors
                    }
                );
            }
            else {
              // Open the Modal Dialog New Create Form in the pop-up window.
                var pageInput = {
                    pageType: "entityrecord",
                    entityName: "new_customentity"
                };
                Xrm.Navigation.navigateTo(pageInput, navigationOptions).then(
                    function success(result) {
                           // Run success code - Add your logic here 
                    },
                    function error() {
                        // Handle errors
                    }
                );
            }
            return true;
        }
        catch (error) {
 
        }
 
    },
};

2. Now navigate to Settings -> Customizations -> Solutions
-> Create a new solution for your ribbon changes 
-> add an email entity (only entity, do not include any dependent file, uncheck and         proceed) to the solution (where you want to place your ribbon button),
-> keep the solution minimum (do not add anything else).

3. Open Ribbon Workbench (you can use XrmToolBox for a better experience): select the solution where you added an email entity and look for an entity left side (verify if the email is as a selected entity there)

4. Navigate to left-hand side inside Toolbox -> Click & hold the button and place it on the form as shown)




5. As highlighted in the image update the ribbon button values:

-> Change the default Id name to proper meaning full name.
-> Change the Label default name to some meaning full name
-> Add Tool Tip title 
-> Add Tool Tip Description
-> Select command (Command you can add after Step No. 6 is completed)


6.  No Go and Add Command (+) 
-> Change the default Id name to proper meaning full name.
-> Add Action: Custom Javascript Action:  in Library file select email                         webresource file by clicking on the search icon,  Add calling Function                     name: NEW.Email.OnclickOfRibbonButton.
-> Click on Add Parameter: Add CRM Parameter and Select Value:                             PrimaryControl 


7. Add Display Rule -> Update appropriate Id name-> Click on Add Display Steps     -> Select FormStateRule -> Set Default: true -> InvertResult: true



8.  Click on: Publish

9. Go to CRM Email Message form look for Ribbon Button and perform click operation. Click On -> Update Button


10.  As the record doesn't exist on the email activity (with passed ID) so a new Modal Dialog pop-up window form gets open.



 
That's all Thank you !!!
Keep Learning...