I've added an html resource in my contact form which contains only an small image in order to place it just beside a contact field. When the user clicks on it, it fires up a javascript function in which I want to get the value of a specific field of the form. The field is an attribute of the contact entity. Here is the HTML web ressource:
<html>
<head>
<style type="text/css">
body
{
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript">
function call() {
var phoneNumber = window.parent.Xrm.Page.getAttribute("mobilephone").getValue();
}
</script>
<meta>
</head>
<body style="word-wrap: break-word;">
<img onmouseover="this.style.cursor='pointer';" src="/webresources/new_/image/image.png" onclick="call()">
</body>
</html>
I have tried also to get data as follows:
window.parent.Xrm.Page.data.entity.attributes.get("telephone1").getValue()
But it doesn't work either: cannot read entity of null
The problem is that the getAttribut returns null despite the field of the entity that I want to get. It's always undefined Someone has an idea ?
I've added an html resource in my contact form which contains only an small image in order to place it just beside a contact field. When the user clicks on it, it fires up a javascript function in which I want to get the value of a specific field of the form. The field is an attribute of the contact entity. Here is the HTML web ressource:
<html>
<head>
<style type="text/css">
body
{
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript">
function call() {
var phoneNumber = window.parent.Xrm.Page.getAttribute("mobilephone").getValue();
}
</script>
<meta>
</head>
<body style="word-wrap: break-word;">
<img onmouseover="this.style.cursor='pointer';" src="/webresources/new_/image/image.png" onclick="call()">
</body>
</html>
I have tried also to get data as follows:
window.parent.Xrm.Page.data.entity.attributes.get("telephone1").getValue()
But it doesn't work either: cannot read entity of null
The problem is that the getAttribut returns null despite the field of the entity that I want to get. It's always undefined Someone has an idea ?
Share Improve this question edited Dec 6, 2016 at 6:16 Henk van Boeijen 7,9486 gold badges35 silver badges43 bronze badges asked Dec 2, 2016 at 8:19 Hubert SoleckiHubert Solecki 2,7715 gold badges36 silver badges65 bronze badges 1- Something's not right, both code samples you provide should work just fine. Put a debugger statement into your call function, open dev tools in your browser, and then click call. Then, in dev tools, when you hit the debugger, inspect window.parent.location. Is the value that it returns what you expect? Also inspect window.parent.Xrm.Page. It should have a getAttribute method and a data property. This type of investigation might reveal some error. Also, is the error you get the same in all browsers? – Polshgiant Commented Dec 2, 2016 at 15:30
4 Answers
Reset to default 3GetGlobalContext function and ClientGlobalContext.js.aspx (client-side reference)
Use the GetGlobalContext function when programming with web resources to gain access to context information. To get the GetGlobalContext function in your HTML web resource, include a reference to ClientGlobalContext.js.aspx.
You can use the GetGlobalContext function when you include a reference to the ClientGlobalContext.js.aspx page located at the root of the web resources directory.
Couple more suggestions:
Webpage (HTML) web resources
Try dropping window from window.parent.Xrm.Page.
An HTML web resource added to a form can’t use global objects defined by the JavaScript library loaded in the form. 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, but global objects defined by form scripts won’t be accessible using the parent. You should load any libraries that an HTML web resource needs within the HTML web resource so they’re not dependent on scripts loaded in the form.
Use IFRAME and web resource controls on a form
Try passing inputs from form script.
For webpage (HTML) web resources, use the setSrc method to manipulate the querystring parameter directly.
In an HTML page, the parameters can be accessed by using the window.location.search property in JavaScript.
Sample: Pass multiple values to a web resource through the data parameter
Let's say that your webresource is at root label... then you must add the ClientGlobalContext reference first
<script src="ClientGlobalContext.js.aspx" type="text/javascript"></script>
After doing that you should be able to to get the attribute value with your function by just dropping the "window" part first
<script type="text/javascript">
function call() {
var phoneNumber = parent.Xrm.Page.getAttribute("mobilephone").getValue();
}
</script>
If you can not take the James Wood solution that is excellent try:
1. You must check that your item is in an iframe
You can get inspired by the following script:
Xrm.Page.ui.controls.get('id_iframe').getObject().onload= function() {
var element = Xrm.Page.ui.controls.get('id_iframe').getObject().contentWindow.document.getElementById('id_element_inside_iframe');
console.log(element);
};
Xrm.Page.ui.controls.get('id_iframe').getObject(): Returns the HTML object iFrame
2. You could have an event called problem.
You can get inspired by the following script:
<HTML>
<BODY onload="SetupEvents()">
<label id="myLabel" >Click me</label>
</BODY>
<SCRIPT>
function DoTheThing() { alert('thing was done'); }
function SetupEvents() {
addEvent( document.getElementById('myLabel'),'click', function () { DoTheThing(); });
}
function addEvent(element, evnt, funct){
if (element.attachEvent)
return element.attachEvent('on'+evnt, funct);
else
return element.addEventListener(evnt, funct, false);
}
</SCRIPT>
</HTML>
I think this is a Turbo Forms issue since Turbo Forms loads Javascript in parallel and loads ClientGlobalContext.js.aspx as one of the last items. IFrames contain an OnReadyStateCompleted event, I would suggest that you add the following code under that event.
function call() {
var phoneNumber = window.parent.Xrm.Page.getAttribute("mobilephone").getValue();
}
See picture below