Utilizing JavaScript in Dynamics 365 Views for Column Customization

JavaScript can be employed in Dynamics 365 to enhance the presentation and functionality of columns in entity views. By using a Web Resource and specifying a JavaScript function, you can achieve various types of custom formatting and actions.

Setting Up

Before you can use JavaScript in a D365 view, you need to:

1. Create a JavaScript Web Resource in Dynamics 365.
2. Upload your JavaScript file.
3. Link the Web Resource to your entity view.

To link a Web Resource to a column:

1. Go to Settings -> Customizations -> Customize the System.
2. Navigate to Entities -> [Your Entity] -> Views.
3. Open the view you want to customize.
4. Click on a column, and then select Change Properties.
5. In the "Web Resource" section, select the JavaScript Web Resource you've created.
6. Specify the function name to execute.

Popular Use Cases

The use cases remain the same as in the previous version of the article, including:

1. Highlighting High-Value Opportunities
2. Concatenating First and Last Name
3. Formatting Date Fields
4. Displaying Status with Icons
5. Show/Hide Columns Based on User Roles
6. Color-Coding Based on Age

1. Highlighting High-Value Opportunities

Imagine you have an 'Opportunity' entity, and you want to highlight opportunities that have an estimated revenue above $10,000.

javascript
function highlightHighValueOpportunities(context)
{
  const row = context.getEventSource();
  const estimatedRevenue = row.attributes["estimatedrevenue"].getValue();
  
  if (estimatedRevenue > 10000)
  {
    row.getControl("estimatedrevenue").setStyle({
      "color": "green",
      "font-weight": "bold"
    });
  }
}

2. Concatenating First and Last Name

If you have a 'Contact' entity with separate 'First Name' and 'Last Name' columns, you might want to display a concatenated full name.

javascript
function concatenateFullName(context)
{
  const row = context.getEventSource();
  const firstName = row.attributes["firstname"].getValue();
  const lastName = row.attributes["lastname"].getValue();
  
  const fullName = `${firstName} ${lastName}`;
  row.getControl("fullname").setFormattedValue(fullName);
}

3. Formatting Date Fields

For a 'Task' entity, you might want to format a due date in a more readable form.

javascript
function formatDate(date)
{
  const day = date.getDate();
  const month = date.getMonth() + 1;
  const year = date.getFullYear();
  
  return `${month}/${day}/${year}`;
}

function formatDueDate(context)
{
  const row = context.getEventSource();
  const dueDate = row.attributes["scheduledend"].getValue();
  
  const formattedDate = formatDate(new Date(dueDate));
  row.getControl("scheduledend").setFormattedValue(formattedDate);
}

4. Displaying Status with Icons

You might want to use icons to visually indicate the status of a 'Case' entity.

javascript
function showStatusIcon(context)
{
  const row = context.getEventSource();
  const status = row.attributes["statuscode"].getValue();
  
  let iconUrl = "";

  switch (status)
  {
    case 1: // Active
      iconUrl = "/WebResources/new_active_icon";
      break;
    case 2: // Resolved
      iconUrl = "/WebResources/new_resolved_icon";
      break;
  }
  
  if (iconUrl)
  {
    row.getControl("statuscode").setSrc(iconUrl);
  }
}

5. Show/Hide Columns Based on User Roles

If you want to display certain columns only to users with specific roles, you can achieve this through JavaScript.

javascript
function showColumnBasedOnRole(context)
{
  const userRoles = Xrm.Utility.getGlobalContext().userSettings.roles;
  const isAdmin = userRoles.some(role => role.name === "System Administrator");

  const row = context.getEventSource();
  const sensitiveColumnControl = row.getControl("sensitive_column");

  if (isAdmin)
  {
    sensitiveColumnControl.setVisible(true);
  }
  else
  {
    sensitiveColumnControl.setVisible(false);
  }
}

6. Color-Coding Based on Age

For entities that have a 'Date of Birth' or 'Creation Date', you might want to color-code rows based on age.

javascript
function colorCodeBasedOnAge(context)
{
  const row = context.getEventSource();
  const dob = new Date(row.attributes["birthdate"].getValue());
  const today = new Date();
  const age = today.getFullYear() - dob.getFullYear();

  const control = row.getControl("birthdate");

  if (age < 18)
  {
    control.setStyle({"color": "red"});
  }
  else if (age >= 18 && age <= 35)
  {
    control.setStyle({"color": "green"});
  }
  else
  {
    control.setStyle({"color": "blue"});
  }
}

Limitations and Considerations

• The JavaScript customization in views is mainly for formatting and not for changing inherent properties like column labels.
• It's crucial to test thoroughly, especially after Dynamics 365 updates, as custom scripts can sometimes break.

It's important to note that changing the column labels dynamically in a Dynamics 365 view via JavaScript is not directly supported. The label displayed in a view is usually inherited from the field's display name as defined in the entity's schema. The available JavaScript APIs for column customization in views focus mainly on formatting the data in the column, not altering the column header/label itself.

By leveraging JavaScript, you can make your Dynamics 365 views more informative and user-friendly, enhancing the overall user experience.