Customer experience | Sales, Customer Insights,...

How to show a webresource dynamically with Javascript

(0) Share

Report

Posted on by Joel D

363

I want to use JavaScript to show an image dynamically for each record of an Entity.

I have my image inside my solution and I uploaded it on the WebResource on Dynamics.
I created an HTML file when I'm going to use a script to retrieve and cycle all the records of the entity, and for each of them I'm going to show the image.

Assuming that I need a variable for my image, I saw some example which make use of the Xrm.Page.context to get it but as far as I know it's deprecated, so that I prefer to use the formContext instead.
That said, how can I refer to the image to use it in my logic?

How can I add the HTML resource to my entity form? In the Property Form I can only find my JavaScript files as Events

May the executionContext be passed as default parameter from configuration, or I have to instantiate it in the script I'm going to have inside my HTML?

In some other example I saw that the file extension (.png) is not included in the source definition, me I included it: are both methods correct?

I wrote the following code so far:

I have the same question (0)

All responses (4)

Answers (0)

Suggested answer

meelamri 13,216 User Group Leader on at

Like (2)

Report

Hi,

Please refer to this blog:

https://carldesouza.com/how-to-use-formcontext-in-a-web-resource-in-dynamics-365-power-apps/

Docs:

An HTML web resource may interact with the Xrm.Page or Xrm.Utility objects within the form by using parent.Xrm.Page or parent.Xrm.Utility

docs.microsoft.com/.../webpage-html-web-resources

Was this reply helpful? Yes No
cloflyMao 25,210 on at

Like (1)

Report
Hi Joel,

1. You can use new getContentWindow and setClientApiContext methods to pass execution context to web resource.

https://docs.microsoft.com/en-us/powerapps/developer/model-driven-apps/clientapi/reference/controls/getcontentwindow#example

2. png is not required to be included in head tag, and image can't be referred as script file. Please remove line 6 and 7: <script scr="../WebResources/image.png"></script>.

3. Xrm.WebApi.retrieveMultipleRecords is asynchronous call, we need to loop through result within success callback function directly.

4. Did you use custom entity to store images? And would it be possible that you enabled entity image to the entity?

If so, I don't think movieId, directorId could be the fields to store image data. Instead, we need to read image data from Image type field of the entity.

Of if your images are just stored as web resources, then you can add it to HTML resource directly using following code:

// or //

In addition, if you want to show image dynamically based on data of current record, you don't need to retrieve entity record again, instead, just use formContext.getAttribute(args).getValue() would be ok., it will get data of current record. (Please read link in point 1 for how to pass execution context to web resource.)

Please share more details about your design, thanks!

Regards,

Clofly

Was this reply helpful? Yes No
Joel D 363 on at

Like (0)

Report
Hi, thank you for replying.
I'm getting "undefined" while trying to add the retrieved results to a variable (I'm using such a variable to cycle its items to show the webresource later), am I using the wrong type?
I'm assuming I can make use of an array to store the objects, so that I wrote the following:

var targetId = formContext.data.entity.getId().replace('{', "").replace('}', ""); var myRecords = []; Xrm.WebApi.online.retrieveMultipleRecords("entityLogicalName", "?$select=parentId&$filter=parentId eq" targetId).then( function success(result) { for (var i = 0; i < result.entities.length; i ) { // i = undefined myRecords.push(result.entities[i]); // myRecords = [] } }, // errorCallBack

But at line 6 and 7 I'm not getting the expected results (see line 7: the output is "myRecords = [": shouldn't the array be populated instead?)

Was this reply helpful? Yes No
Suggested answer

cloflyMao 25,210 on at

Like (1)

Report
Hi Joel,

That's because Xrm.WebApi.online.retrieveMultipleRecords is async call, everything should be done within its success callback function.

In your code, even if result.entities[i were put to myRecords array, but it is only valid within success function scope.

To be more specific: if there is 'console.log(myRecords);' at line 15 or 16, then it will always print undefined, because console.log executes immediately, there is pending time for Xrm.WebApi.online.retrieveMultipleRecords function.

You can return Xrm.WebApi.online.retrieveMultipleRecords as a promise object, and use its then method to get the result of request.

onLoad(); function onLoad() { fun1().then(function(result){ for (var i = 0;i < result.length; i ) { console.log(result[i]); } }); } function fun1() { var targetId = "0e03276c-c0b4-46ca-b4c1-0bf942f127a1"; var myRecords = []; return new Promise(function (resolve, reject) { Xrm.WebApi.online.retrieveMultipleRecords("contact", "?$select=fullname&$filter=contactid eq " targetId).then( function success(result) { for (var i = 0; i < result.entities.length; i ) { myRecords.push(result.entities[i]); } resolve(myRecords); }, function error(err) { console.log(err.message); reject(err.message); } ) }) }

Run the sample code in console:

The result of fun1().then() can be regarded as myRecords array.

Was this reply helpful? Yes No