Out-of-the-box Business Central APIs often use complex types. Addresses on entities and documents, line details, units of measures, journal dimensions, these are just a few examples. There may be more... (Continue reading)

Just in case you have fallen victim of the confusion I see often in online communities, blogs, but also Microsoft official documentation: Dynamics 365 Business Central sandbox is not the same as Dynamics... (Continue reading)

In just under two weeks I’ll have to present how to use OAuth 2.0 authentication to call REST APIs of Dynamics 365 Business Central. Should be easy. Not only I have already done
OAuth integrations ... (Continue reading)

In the last post , I explained how to use tasks, but I didn’t explain yet how to make them useful. Tasks are most useful when they automate certain file operations, and gulp helps with reading and writing... (Continue reading)

Now that you know how to get gulp up and running in VS Code , and how to export tasks from your gulp file , let’s talk about tasks themselves. What are they, what are they good for, and how to write them... (Continue reading)

This post explains how to solve that problem, and how to make it possible for your control add-in to both use HTML for defining UI and use relative control add-in paths to images.

Let’s dig in.

Imagine you had a control add-in with this script:

… that shows this:

Now, you fix this by applying the image trick, and refactor all this as HTML:

… and then load with this script:

… the results will be less than impressive:

Where is the problem? It’s simple: your image source URLs.

The image URLs you defined in HTML are relative, and this means they are relative to your entire URL. In my case, the URL is http://desktop-tfdoknj:8080/DynamicsNAV110/Webclient/ so the relative image URL is http://desktop-tfdoknj:8080/DynamicsNAV110/Webclient/Demo/Images/accept.png (and reject.png), neither of which – guess what? – doesn’t exist at the path that this URL resolves to. If you read the yesterday’s post carefully, you know that all images are extracted to a “random” location (random only because you don’t know its exact absolute path in advance), and that’s the reason why you need the GetImageResource method in the first place: to resolve your relative control add-in path to the absolute server path of an image (or resource).

The solution

The solution is actually far simpler than it may seem at first. In theory, after you inject your HTML into the page, you need to locate all of the <img> tags, read their src attributes, and replace them with URLs that you remap using the GetImageResource method.

In practice, it translates to:

I used jQuery for this only because I am already using jQuery, but if you want, you can simply do this with pure DOM: