Blog

Welcome, fellow CRM wizards! ✨

Buckle up for an enchanting journey into the realm of JavaScript, where we’ll unlock its boundless potential to empower your CRM. This comprehensive guide will be your trusty grimoire, filled with practical spells (code snippets) and insights to unleash your inner CRM sorcerer, regardless of your experience level.

Why JavaScript in Dynamics 365?

Dynamics 365 embraces JavaScript as its client-side scripting language, granting you the power to:

• Extend Forms: Breathe life into static forms by dynamically controlling field visibility, setting values based on other fields, and crafting custom calculations or validations.
• Automate Workflows: Banish repetitive tasks with automated actions triggered by specific events, like changing priorities based on issue types.
• Enhance User Experience: Impress your users with custom UI elements like dialogs, interactive grids, and personalized layouts for different roles.
• Boost Productivity: Supercharge your workflows by eliminating manual data entry and retrieval, saving precious time and effort.

Your JavaScript Toolkit:

Now, let’s delve into the core spells in your grimoire:

1. Form Scripting:

• Form Event Programming is the art of scripting JavaScript to choreograph client-side scenarios within CRM forms. Picture this: a user opens a form, updates a field, or gracefully glides through tabs. Each of these moments can be transformed into a magical encounter with the right incantations—JavaScript code snippets carefully woven into the fabric of your Dynamics 365 CRM.

2. Events:

• JavaScript functions come alive upon specific events: Think of them as triggers. Common events include “OnLoad” (when the form opens), “OnChange” (when a field changes), and “OnSave” (before saving the record).

3. Working with Controls:

• Manipulate form controls with ease: Use Xrm.Page.getControl("control_name") to access specific fields, buttons, or sections. Then, cast spells like "setDisabled(true)" to hide a field or "setValue(your_value)" to change its content.

4. Web Resources:

• Organize and reuse your spells: Store your JavaScript code in web resources, like external spellbooks. This promotes code cleanliness and allows easy sharing among developers.

5. Debugging:

• Unravel any malfunctions: Use console.log(message) to cast an investigative spell, revealing the inner workings of your code and identifying any errors.

Xrm.Page vs. formContext:

• Dynamics 365 9.0+ introduces formContext: Think of it as a more advanced and consistent way to interact with form elements compared to the older Xrm.Page. Embrace this improved spellbook for better compatibility and clarity.

Remember:

• Always test your spells in a safe environment: Don’t unleash your magic on production servers until it’s thoroughly tested and debugged.
• Practice makes perfect: Experiment with different code snippets, combine spells, and explore hidden formulas to craft your own unique JavaScript sorcery.

Interactive code snippets and real-world scenarios

Now, let’s delve into the grimoire with interactive code snippets and real-world scenarios:

Scenario: Our client, Contoso, wants to automate setting the “Priority” field based on the selected “Issue Type” on their case form.

Spell 1: Form Events – Reacting to Changes

function attributeOnChange(executionContext) {
  var formContext = executionContext.getFormContext();
  var issueType = formContext.getAttribute("issue_type").getValue();
  if (issueType === "Critical") {
    formContext.getAttribute("priority").setValue(100000000); // Set high priority for critical issues
  } else if (issueType === "High") {
    formContext.getAttribute("priority").setValue(50000000); // Set medium priority for high issues
  } else {
    formContext.getAttribute("priority").setValue(1); // Set low priority for other issues
  }
}

// Attach this function to the "OnChange" event of the "issue_type" field.

Explanation: This code fires every time the user changes the “Issue Type” field. It checks the selected value and assigns the corresponding priority level to the “Priority” field automatically.

Spell 2: Read Values from Lookups – Fetching Related Data

function getContactName(executionContext) {
  var formContext = executionContext.getFormContext();
  var customerId = formContext.getAttribute("customerid").getValue()[0].id; // Get ID from lookup

  Xrm.WebApi.retrieveRecord("contact", customerId, "?$select=fullname").then(
    function success(result) {
      formContext.getControl("contact_name").setValue(result.fullname); // Set retrieved name
    },
    function (error) {
      console.error(error); // Handle error
    }
  );
}

// Attach this function to a button click or form event like "OnLoad".

Explanation: This code retrieves the customer name from the “Customer” lookup field and displays it in a separate field named “Contact Name”. It uses the Xrm.WebApi to communicate with the Dynamics 365 data platform seamlessly.

Spell 3: Show/Hide Fields and Tabs – Tailoring the User Interface

function hideAdvancedOptions(executionContext) {
  var formContext = executionContext.getFormContext();
  if (formContext.getAttribute("is_experienced_user").getValue()) {
    formContext.ui.tabs.get("advanced_options").setVisible(true); // Show advanced tab for experienced users
  } else {
    formContext.ui.tabs.get("advanced_options").setVisible(false); // Hide advanced tab for new users
  }
}

// Attach this function to a checkbox click or form event like "OnLoad".

Explanation: This code dynamically controls the visibility of the “Advanced Options” tab based on the user’s experience level. By tailoring the form based on user roles, you can provide a more intuitive and efficient experience.

Beyond the Basics: Advanced Spells for Experienced Alchemists

Now, let’s venture deeper into the grimoire with some advanced incantations:

• XrmWebApi: This powerful spell allows you to perform complex data retrieval and manipulation, fetching related records and navigating intricate relationships within your data.
• Custom Grid Commands: Empower your users with bespoke buttons and actions within grids, enabling mass updates, sending emails based on selection, and seamless navigation to related records.
• Error Handling: Even the most skilled wizards encounter mishaps. Gracefully handle errors with try-catch blocks, providing informative messages and preventing frustration for your users.

Spell 4: XrmWebApi – Beyond Basic Data Retrieval

Xrm.WebApi.retrieveRecord("account", accountId, "?$select=primarycontactid($select=fullname&$expand=parentcustomeraccount($select=name))").then(
  function success(result) {
    console.log(result.primarycontactid.fullname); // Access contact fullname
    console.log(result.primarycontactid.parentcustomeraccount.name); // Access parent account name
  },
  function (error) {
    console.error(error);
  }
);

Explanation: This code uses the XrmWebApi to perform a more complex data retrieval. It fetches an account record, then expands the associated primary contact and its parent customer account, accessing their names within the same call. This is just a glimpse of the advanced data manipulation power you wield with XrmWebApi.

Spell 5: Custom Grid Commands – Empowering Users

function openCaseDetails(executionContext) {
  var gridContext = executionContext.getGridContext();
  var selectedCases = gridContext.getSelectedRows();
  for (var i = 0; i < selectedCases.length; i++) {
    Xrm.Navigation.openEntityForm("incident", selectedCases[i].getEntity().getId());
  }
}

// Add this function to a custom button in the case grid.

Explanation: This code empowers users with a custom grid button named “Open Case Details.” Clicking the button retrieves selected cases and opens their individual forms. Imagine the possibilities: you can create buttons to trigger mass updates, send emails based on grid data, or navigate to related records seamlessly.

Spell 6: Error Handling – Graceful Recovery from Mishaps

function saveRecord(executionContext) {
  try {
    executionContext.getFormContext().data.save();
    console.log("Record saved successfully!");
  } catch (error) {
    console.error(error.message);
    Xrm.Navigation.openAlertDialog({
      text: "Error saving record: " + error.message,
      title: "Save Error"
    });
  }
}

// Attach this function to a "Save" button click event.

Explanation: Even the most powerful wizards encounter errors. This code demonstrates handling exceptions during record saving. It catches any errors, logs them for debugging, and displays a user-friendly alert, minimizing frustration and providing valuable information.

Interactive Challenges:

• Can you use JavaScript to format dates and numbers differently depending on user language settings?
• How would you create a custom progress bar on a form to track record completion? Share your ideas in the comments!
• Can you use JavaScript to validate email addresses on your forms? Share your solution in the comments!

Remember, with each spell cast, you become a more adept Dynamics CRM alchemist! Combine these spells, explore hidden formulas, and craft your own JavaScript magic to transform your CRM experience. Stay tuned for more advanced lessons and real-world scenarios in the next chapters of our JavaScript journey! ✨