How to Create an HTML Web Resource and Display Attachments in Timeline

How to Create an HTML Web Resource and Display Attachments in Timeline

Dynamics 365 allows developers to extend model-driven applications using HTML Web Resources. These web resources can be used to display custom information, integrate external systems, and enhance the user experience.

A common requirement is displaying timeline attachments such as documents, images, PDFs, and notes inside a custom HTML Web Resource. This approach provides greater flexibility and a more customized interface than the standard timeline control.

What is an HTML Web Resource?

An HTML Web Resource is a custom web page that can be embedded within Dynamics 365 forms, dashboards, and sitemap areas.

Create an HTML Web Resource

Create a new HTML file and upload it as a Web Resource. 

<html>
<head>
<title>Timeline Attachments</title>
</head>
<body>

<div id="attachmentContainer">
</div>

</body>
</html>

Retrieve Timeline Attachments

Use the Dataverse Web API to retrieve Note attachments stored in the Annotation table. 

Xrm.WebApi.retrieveMultipleRecords(
"annotation",
"?$select=filename,filesize,mimetype"
)

This returns attachment details associated with timeline records.

Display Attachments in HTML

Loop through the returned records and generate HTML dynamically. 

result.entities.forEach(function(item)
{
   document
      .getElementById(
         "attachmentContainer"
      )
      .innerHTML +=
      "<div>" +
      item.filename +
      "</div>";
});

Add Download Links

Provide users with direct download access for attachments. 

<a href="downloadUrl">
Download File
</a>
Important: Ensure users have appropriate Dataverse permissions to access annotation records and attachment files.

Implementation Steps

  1. Create an HTML Web Resource.
  2. Upload it to Dynamics 365.
  3. Add JavaScript for Web API calls.
  4. Retrieve annotation records.
  5. Display attachment information.
  6. Add the Web Resource to the form.
  7. Publish customizations.
  8. Test file access and downloads.

Common Use Cases

Best Practices

Key Takeaways