Attach images in KB in Dynamics 365

Scenario

To add images in knowledge article, we need to provide the image URL. In CRM we can add image as a web resource and we can get the URL of the image.

To achieve this, I have created a custom entity to create an image web resource

Entity Name : New_WebResource

Attribute Name	Attribute Type
Name	Single line of text
Image URL	Single line of text –Format (URL)
Image Type	Option set (PNG -5 , JPEG -6)
Image Description	Multiple lines of text
base64_value	Multiple lines of text

Step 1

Create a web resource with the type as html and add the below code. The below html will help you to upload the image and can get and set the base64 value of the uploaded image in “base64_value” attribute.

</p> <p><html><br /> <head><meta><meta><meta><meta><br /> </head><body style="overflow-wrap: break-word;"><br /> <input id="inputFileToLoad" type="file" accept="image/*" onchange="encodeImageFileAsURL();"></p> <div id="imgTest"></div> <p><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><br /> <script type="text/javascript"> function encodeImageFileAsURL() { var filesSelected = document.getElementById("inputFileToLoad").files; if (filesSelected.length > 0) { var fileToLoad = filesSelected[0]; var fileReader = new FileReader(); fileReader.onload = function(fileLoadedEvent) { var srcData = fileLoadedEvent.target.result; // <--- data: base64 var newImage = document.createElement('img'); newImage.src = srcData; document.getElementById("imgTest").innerHTML = newImage.outerHTML; window.parent.Xrm.Page.getAttribute("cmp_base64_value").setValue(document.getElementById("imgTest").innerHTML); } fileReader.readAsDataURL(fileToLoad); } } </script></body></html></p> <p>

Step 2

Open entity’s main form and add all the above attributes. Click on web resource in form editor and choose our web resource from step 1.

Step 3

Create a new web resource with the type of java script. Add the below code.

var saveEvent = context.getEventArgs();
saveEvent.preventDefault();
//preventAutoSave(econtext);
}}}}

function create(type, base64str)
{
if(Xrm.Page.ui.getFormType() == "1")
{
//Creating web resource in Dynamics 365.
//Below is the url format of the web resource location. Change it for your CRM org.
var url="https://mastermind8.crm8.dynamics.com//WebResources/";
var imagedescription=Xrm.Page.getAttribute("cmp_imagedescription").getValue();
var name=Xrm.Page.getAttribute("cmp_name").getValue();
var nowname=name.split(' ').join('');
var bytevalue=Xrm.Page.getAttribute("cmp_base64_value").getValue();
var entity = {};
entity.content = base64str;
entity.webresourcetype = type;
entity.name = "new_"+nowname;
entity.displayname = name;
entity.languagecode = 1033;
entity.description = imagedescription;

Step 4

Navigate to form editor click on Form Properties, add our library and in Event handler call the “getstring” function in “On Save” event of form. Select the check box “Pass execution context as first parameter.” Because we have used the context in our function.

Step 5

Save the form and then click on “Publish”. Navigate to Service sitemap and click on “Web Resources”.

Note: I have selected “Service” sitemap to display this entity (new_webresource).

Step 6

Create new. Upload JPG or PNG image and click on “Save”.

Step 7

After save, the URL of the image will be populated. Copy the image URL.

Step 8

Navigate to “Customer Service Hub” and click on “Knowledge Articles”. Create New. In Content area click on image icon and paste the copied Web resource URL from step 7, then click “OK”. Save this KB and publish it. Now it is visible in Knowledge article. We can refer this KB in case and it will show the KB text content and images.