Navigate to Other form on Button click and Pre-population in Dynamics 365 | Power App

In this blog post, I will illustrate the process of opening/navigating to a new entity form from one form when a button is clicked. I will  guide on writing the required JavaScript code and seamlessly integrating this script into a Dynamics 365 ribbon button from scratch.

For a comprehensive walkthrough with detailed steps and best practices, you can refer to the video linked below.

Step 1: Create an JavaScript Web Resource

• In Dynamics 365, go to Settings > Customizations.
• Click on Customize the System.
• In the Solution Explorer, expand the Components node, right-click on Web Resources, and then click New.

General Information:

Name: Enter a name for your web resource (e.g., "CustomScript").

Display Name: Provide a display name.

Type: Choose "Script (JScript)" as the type.

Text Editor: Paste your JavaScript code into the text editor.

Write a JavaScript function that will be triggered when the button is clicked. For example:

//Navigate to Contact Form and pre-populate fields

function openContact() {

  // Get the GUID of the primarycontact from the accoun form

  var primaryContactId = Xrm.Page.data.entity.attributes.get("primarycontactid").getValue()[0].id;

    // Logical name of the Contact entity

  var contactEntityLogicalName = "contact";

  var defaultOptionForValue = 2;

  // Get the GUID of the Account record

  var accountRecordId = Xrm.Page.data.entity.getId();

  console.log(accountRecordId);

  console.log(defaultOptionForValue);

    // Construct the URL to open a new contact form

  var url =

    Xrm.Page.context.getClientUrl() +

    "/main.aspx?etn=" +

    contactEntityLogicalName +

    "&pagetype=entityrecord";

  // Append the contact to the URL to prepopulate the contact field

  //url += "&extraqs=nvcms_case=" + encodeURIComponent(primaryContactId);

  url += "&extraqs=" + encodeURIComponent("new_primarycontactt=" + primaryContactId + "&new_option=" + defaultOptionForValue + "&new_accountt=" + accountRecordId);

  

  // Open a new Contact form in a new tab

  window.open(url,"_blank");

}

Save and Publish the web resource.

Step 3: Create a Ribbon Button

• Select Entity and choose the entity to which you want to add the ribbon button.
• Drag your custom button to the desired location on the entity form (e.g., the ribbon bar).
• In the Properties window for the button, specify a unique Id, Label, and optional Tooltip.
• In the Command Core section, Create a command and add it in your button
• Specify the Command created for the button.
• In the Actions section, add a JavaScript Function action. Select the JavaScript function you created earlier (openContact in this example).
• Save and Publish the ribbon customization.

Save and Publish the ribbon customization.

Return to your CRM and open the form where you added the button. Upon clicking the button, you will be redirected to another new form where certain fields will be pre-populated.

Call HTML WebResource on click of Button in Dynamics 365 | Power App

In this blog post, I will demonstrate how to open a popup UI (HTML Web Resource) when a button is clicked. I will guide you through the process of creating a custom button using Ribbon Workbench, generating an HTML Web Resource, and writing the necessary JavaScript code to integrate the HTML content seamlessly into Dynamics 365 from scratch.

For a comprehensive walkthrough with detailed steps and best practices, you can refer to the video linked below.

Step 1: Create an HTML Web Resource

In Dynamics 365, go to Settings > Customizations.
Click on Customize the System.
In the Solution Explorer, expand the Components node, right-click on Web Resources, and then click New.
Choose HTML as the Type, and provide a Name for your web resource.

General Information:

Name: Enter a name for your web resource (e.g., "CustomScript").

Display Name: Provide a display name.

Type: Choose "Webpage"(HTML) as the type.

Text Editor: Enter or paste your HTML code in the HTML text editor. Example below

<!DOCTYPE html>
<html>
<body>
<h1>TEST PAGE</h1>
</body></html>

Save and Publish the web resource.

Step 2: Create a JavaScript Function

Create a new JavaScript web resource.

Write a JavaScript function that will be triggered when the button is clicked. For example:

var pageInput = {
    pageType: "webresource",
    webresourceName: "cr985_DynamixPower"  //filename of your html webresource
};
var navigationOptions = {
    target: 2,
    width: 500, // value specified in pixel
    height: 400, // value specified in pixel
    position: 1
};
Xrm.Navigation.navigateTo(pageInput, navigationOptions).then(
    function success() {
            // Run code on success
    },
    function error() {
            // Handle errors
    }
);

Step 3: Create a Ribbon Button

• Select Entity and choose the entity to which you want to add the ribbon button.
• Drag your custom button to the desired location on the entity form (e.g., the ribbon bar).
• In the Properties window for the button, specify a unique Id, Label, and optional Tooltip.
• In the Command Core section, Create a command and add it in your button
• Specify the Command created for the button.
• In the Actions section, add a JavaScript Function action. Select the JavaScript function you created earlier (onButtonClick in this example).
• Save and Publish the ribbon customization.

Save and Publish the ribbon customization.

Return to your CRM and open the form where you added the button. Clicking the button should trigger a popup window as shown below. If it doesn't appear, please refer to the video above for troubleshooting steps.

Reference - https://learn.microsoft.com/en-us/power-apps/developer/model-driven-apps/clientapi/reference/xrm-navigation/navigateto