Creating Dynamic Popup Windows in Dynamics 365 with Xrm.Navigation.navigateTo

 

Creating Dynamic Popup Windows in Dynamics 365 with Xrm.Navigation.navigateTo

Introduction

Utilizing Xrm.Navigation.navigateTo in Microsoft Dynamics 365 allows for the creation of dynamic popup windows, enriching the user experience with interactive and custom interfaces. This article demonstrates how to leverage this method to implement a popup window that facilitates a user confirmation process tied to a custom action, typically initiated from a ribbon button.

Detailed Implementation Process

1. Ribbon Button Click Event Handler:

// Triggered by the custom ribbon button click

function RibbonButtonClickHandler(primaryControl, customParameter) {

    const customAttributeValue = primaryControl.getAttribute("custom_attribute").getValue();

    const localizedMessage = GetLocalizedString(customParameter);

   

    ExecuteCustomAction(primaryControl, "custom_ActionName", localizedMessage, "Action Confirmation Title",

                        "Custom Label Text", true, customAttributeValue, "Processing...");

}

• Initiates the process when a custom ribbon button is clicked.
• Retrieves data from the form and invokes the action execution function.

2. Executing Custom Action with User Confirmation:
3. // Executes a custom action with user confirmation

   async function ExecuteCustomAction(primaryControl, actionName, confirmationMessage, confirmationTitle, labelText, requireText, attributeValue, progressMessage) {

       try {

           const userConfirmationResult = await GetUserConfirmation(confirmationTitle, labelText, confirmationMessage, requireText, attributeValue, "#4f8c98", "#25525F", "FFFFFF");

          

           if (!userConfirmationResult || userConfirmationResult === "cancelled") return;

          

           Xrm.Utility.showProgressIndicator(progressMessage);

          

           const recordId = primaryControl.data.entity.getId().replace(/[{}]/g, "");

           const actionData = PrepareActionData(recordId, actionName, userConfirmationResult);

           const response = await Xrm.WebApi.online.execute(actionData);

          

           await ProcessActionResponse(response, primaryControl);

       } catch(err) {

           console.error(err);

       } finally {

           Xrm.Utility.closeProgressIndicator();

       }

   }

   
   
4. • Displays a custom popup for confirmation, waiting for user input.
   • Proceeds with the action if the user confirms.

   3. Implementing the User Confirmation Popup:
   4. // Opens a popup for user confirmation

      async function GetUserConfirmation(title, labelText, confirmationMessage, requireText, attributeValue, backgroundColor, backgroundDarkerColor, textColor) {

          try {

              const formData = { requireText, labelText, confirmationMessage, attributeValue, backgroundColor, backgroundDarkerColor, textColor };

              const pageInput = { pageType: "webresource", webresourceName: "custom_WebResource.html", data: JSON.stringify(formData) };

              const navigationOptions = { target: 2, height: 285, width: 450, position: 1, title };

              const response = await Xrm.Navigation.navigateTo(pageInput, navigationOptions);

              return response ? response.returnValue : "";

          }

          catch(err) {

              console.error(err);

              return "";

          }

      }

      
      
   5. • Creates and displays a dynamic popup window using a web resource.
      • The popup collects user input and returns it for further processing.

      Conclusion

      This example showcases the practical use of Xrm.Navigation.navigateTo for creating interactive popup windows in Dynamics 365. By integrating custom web resources, developers can build sophisticated workflows that enhance the CRM's functionality and user interaction. The code provided offers a foundation that can be tailored to a variety of scenarios, allowing for creative and user-centric solutions in Dynamics 365 environments.