Microsoft Dynamics CRM (Archived)

Problem with Web Resources - event does't fire correctly

(0) Share

Report

Posted on by EnriqueMdz

1,067

I'm working with web resources in the Account form, these are the specific things that I'm using:

Entity: Account

Web Resource: JavaScript

Event: OnLoad

Im trying to change the background color of a field based on the text that has, for example:

Text of the textBox: Red

Background color will be 'painted' to Red

The problem is that im getting this error when I try to open an account:

4213.Untitled.png

This is my code in javascript:

function ChangeColor(){

if (Xrm.Page.GetAttribute("em_Color").GetValue() === "Green")
document.getElementById("em_Color").style.backgroundColor = 'green';
else
if (Xrm.Page.GetAttribute("em_Color").GetValue() === "Red")
document.getElementById("em_Color").style.backgroundColor = 'red';
else
document.getElementById("em_Color").style.backgroundColor = 'yellow';

}

I added the Javascript library to the form, and then selected the function and event in wich should be fired.

Does anyone know what I'm doing wrong?

Thanks for your help!

*This post is locked for comments

I have the same question (0)

All responses (14)

Answers (2)

Suggested answer

Mahadeo Matre 17,021 on at

Like (0)

Report

JavaScript is case sensitive lang. you need to give correct syntax.

Xrm.Page.GetAttribute should be Xrm.Page.getAttribute

Note: This is unsupported code..

function ChangeColor() {

var emColor = Xrm.Page.getAttribute("em_color").GetValue(); // get attribute value
var emColorCtrl = Xrm.Page.getControl("em_color"); // get control
emColorCtrl.setFocus(); // set focus on control
if (emColor === "Green")
document.getElementById("em_color_i").style.backgroundColor = 'green'; // change background color
else if (emColor === "Red")
document.getElementById("em_color_i").style.backgroundColor = 'red';
else
document.getElementById("em_color_i").style.backgroundColor = 'yellow';

}

to get input control you need to set focus on that attribute control then only you will able to get input control.

Hope this will help..

Was this reply helpful? Yes No
Mahadeo Matre 17,021 on at

Like (0)

Report

one more change need in this script .. instead of this

var emColor = Xrm.Page.getAttribute("em_color").GetValue();

user

var emColor = Xrm.Page.getAttribute("em_color").getValue();

complete script will be

function ChangeColor() {

var emColor = Xrm.Page.getAttribute("em_color").getValue(); // get attribute value

var emColorCtrl = Xrm.Page.getControl("em_color"); // get control

emColorCtrl.setFocus(); // set focus on control

if (emColor === "Green")

document.getElementById("em_color_i").style.backgroundColor = 'green'; // change background color

else if (emColor === "Red")

document.getElementById("em_color_i").style.backgroundColor = 'red';

else

document.getElementById("em_color_i").style.backgroundColor = 'yellow';

}

Was this reply helpful? Yes No
Suggested answer

Andre Margono 2,602 on at

Like (0)

Report

As pointed out by Mahadeo above, javascript is case sensitive, most likely that's the cause, because it could not find the object. My suggestion is always check you object whether it is not null or undefined:

if(Xrm.Page.getAttribute("em_color") != null && Xrm.Page.getAttribute("em_color") != undefined) {// do you thing here}

As a precaution: Changing CRM form DOM is considered unsupported customisation. Microsoft could change their form DOM element ID and name anytime, and your code most likely will break due to that nature.

Was this reply helpful? Yes No
EnriqueMdz 1,067 on at

Like (0)

Report

Thanks for your answers guys!

I saw in comments of both of you that this is not the correct way to do what I'm trying to do, so, what would be the best way to do it?

Was this reply helpful? Yes No
Suggested answer

Mahadeo Matre 17,021 on at

Like (0)

Report

Hi..

Changing CRM DOM is unsupported customization. So i thing if you want to shown some color for particular field, then best option is to use HTML web resource.

Changing color of attribute with web resource is some what tricky.. but it is supported way. and even Microsoft change DOM element ID it wont affect..

You need to create one HTML web resource with text box control, add that control on form instead of your field.

you can use similar script to change color of attribute and last you need to update HTML web resource value back to CRM attribute.

If you want more in details please let me know..

Was this reply helpful? Yes No
EnriqueMdz 1,067 on at

Like (0)

Report

Thanks again Mahadeo,

Could you please explain me a little more of how to do it?

Was this reply helpful? Yes No
EnriqueMdz 1,067 on at

Like (0)

Report

BTW, the code isn't working, i guess is not working because the things that you said before(the ID of the field may be wrong and also Microsoft could change the ID at any time)

Was this reply helpful? Yes No
Verified answer

Mahadeo Matre 17,021 on at

Like (0)

Report
Create HTML web resource say “new_ChangeFieldBackGround.html”

Add following code in HTML web resource

<html><head>

   <meta charset="utf-8">

   <script>

       function changeColor() {

           debugger;

           var ctrl = document.getElementById("em_Color_input");

           var emColorValue = ctrl.value;

           if (emColorValue == "Green")

               document.getElementById("em_Color_input").style.backgroundColor = 'green';

           else if (emColorValue == "Red")

               document.getElementById("em_Color_input").style.backgroundColor = 'red';

           else

               document.getElementById("em_Color_input").style.backgroundColor = 'yellow';

           parent.Xrm.Page.getAttribute("em_Color").setValue(emColorValue);

       }

   </script>

</head><body>

     <input id="em_Color_input" onchange="changeColor()" type="text">

</body></html>

Now open your entity form

Change visibility of your em_color Attribute.

Select this attribute on form and change, click on change properties.

Now add “new_ChangeFieldBackGround.html “ HTML web resource to your form

Add this HTML web resource below your existing em_color attribute.

And for this HTML web resource change formatting as

No. of Rows - 1

Scrolling - Never

Border - No

Now save your form and publish customization

Now your form will look like this

Here in HTML web resource this line is updating HTML input value to CRM entity form em_Color attribute.

parent.Xrm.Page.getAttribute("em_Color").setValue(emColorValue);

make sure you are using correct attribute name not schema name.

Was this reply helpful? Yes No
Suggested answer

Mahadeo Matre 17,021 on at

Like (0)

Report

And also in tried this code with my entity and it is working .. you might be using wrong attribute name..

em_color or em_Color check it is in your entity customization. and you should use attribute name not schema Name.

function ChangeColor() {

var emColor = Xrm.Page.getAttribute("em_color").getValue(); // get attribute value

var emColorCtrl = Xrm.Page.getControl("em_color"); // get control

emColorCtrl.setFocus(); // set focus on control

if (emColor === "Green")

document.getElementById("em_color_i").style.backgroundColor = 'green'; // change background color

else if (emColor === "Red")

document.getElementById("em_color_i").style.backgroundColor = 'red';

else

document.getElementById("em_color_i").style.backgroundColor = 'yellow';

}

Was this reply helpful? Yes No
EnriqueMdz 1,067 on at

Like (0)

Report

First of all, thanks for your help and specially for your way to explain.

I made all the steps but still not working.

This are the details of the field:

I tryed with: em_color(correct) _Color(incorrect)in this line of code:

parent.Xrm.Page.getAttribute("em_Color").setValue(emColorValue);

The result of the code and the HTML is an empty textbox i dont know why,

what do you think i did wrong?

Was this reply helpful? Yes No