DEV Community

Nikhil Sarpatwari
Nikhil Sarpatwari

Posted on

1

HTML Web Resources vs. Canvas Apps in Dynamics CRM CE: A Comparison

When working with Microsoft Dynamics 365 Customer Engagement (CE), you may need to add custom features beyond what the system offers. Two common options are HTML web resources and Canvas apps. Both can be very helpful, but they work differently. In this post, I’ll share a use case, list their pros and cons, and help you decide which one to use.

Use Case: Custom Contact Lookup

Let’s say you need to build a tool for the sales team. On the Account form, they want to search for contacts by name, see a list with details (like email and phone), and select one to link to the account—all without leaving the form. Both HTML web resources and Canvas apps can solve this. Here’s how.

HTML Web Resources

With HTML web resources, you create an HTML file with JavaScript and CSS. You upload it to Dynamics CE and add it to the Account form. The JavaScript uses Xrm.WebApi to search for contacts, filter them based on the user’s input, and display them in a table. When a contact is selected, it updates the account’s lookup field.

Canvas Apps

With Canvas apps, you use Power Apps to build the tool. You add a text box for searching, a gallery to show contacts, and a button to save the selection. It connects to Dataverse (used by Dynamics CE) to get contact data. After filtering and selecting a contact, it links it to the account. You then embed the app in the Account form.

Now, let’s look at the advantages and disadvantages.

HTML Web Resources

Pros

  • Full Control: You can design the look and behavior exactly as you want using HTML, CSS, and JavaScript.
  • Fast and Simple: It runs directly in Dynamics CE, so it loads quickly without extra tools.
  • Works Well with CRM: The formContext (passed from the form's JavaScript) lets you easily access form data and the CRM API.
  • Offline Option: It can work offline in Dynamics 365 for Outlook if coded properly.

Cons

  • Takes Time: You have to write all the code yourself, which can be slow for big projects.
  • Needs Coding Skills: If you don’t know JavaScript or HTML, it’s hard to use.
  • Hard to Update: Changing it means editing the code and uploading it again.
  • Not Reusable: It’s usually built for one specific place, not easy to use elsewhere.

Canvas Apps

Pros

  • Easy to Build: Power Apps lets you drag and drop to create the tool, no coding needed for the design.
  • Quick to Test: You can build and adjust it fast, which is great for showing to users early.
  • Connects to More: It works with Dataverse, Power Automate, and other data sources easily.
  • Works on All Devices: The design adjusts automatically for desktop, tablet, or phone.

Cons

  • Needs Extra Setup: You need a Power Apps license and some configuration to use it in Dynamics CE.
  • Less Control: You can’t customize the look as much as with HTML.
  • Can Be Slower: It may take longer to load than a web resource, especially with complex data.
  • Learning Required: You need to learn Power Apps formulas, like Filter or Patch, to use it well.

Which One to Choose?

For the contact lookup example:

  • HTML Web Resources are best if you need a fast, custom solution and know how to code. They fit tightly with Dynamics CE and are good for small, specific tasks.
  • Canvas Apps are better if you want to build quickly, involve non-coders, or reuse the tool in other places. They work well with the Power Platform.

My Advice

  • Use HTML Web Resources if your team has developers, the project is small, and you focus on CRM integration.
  • Use Canvas Apps if you prefer the Power Platform, need speed, or want a solution that can grow.

Both options are useful in Dynamics CE based on your requirements.

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay