It’s a challenge to work with thousands of custom fields in JavaScript in CRM 2011. A tool is available in Visual Studio 2010 and up that automatically imports all of the fields into an object, dubbed “Properties” by default from Visual Studio. This allows us to use Intellisense to ensure that we have the correct names for the fields that we are referencing in JavaScript. Unfortunately the tool, which is fantastic, is not free past its 30 day trial.
Enter custom JS Code. I personally like to use a custom form script library that contains developer-specific functionality (which can be referenced by GUID) and is used with custom key declarations (a previous post explains this).
Here’s the function that I call which will output objects that can almost be copy-and-pasted directly into Visual Studio. I’m sure there’s a better way, but this works for me given the minimal effort that went into it.
function util_listControlstoConsole() {
try {
//Controls
if (confirm('Do you wish to list all controls to the console?')) {
custAlert('////The below are a listing of all detected controls on the form////');
console.log('var Properties = {');
Xrm.Page.ui.controls.forEach(
function (control) {
if (control.getControlType() !== "subgrid" &&
typeof control.getName === "function") {
console.log(control.getName() + ": '" + control.getName() + "', //Label: " + control.getLabel() + " Parent Name: '"
+ control.getParent().getName() + "' Parent Label: '" + control.getParent().getLabel() + "'");
}
}
);
console.log('}; //remove last comma (,) from above when putting in script, note that there may be duplicates (appended with 1)');
}
if (confirm('Do you wish to list all sections/tabs to the console?')) {
//Sections
custAlert('////The below are a listing of all detected controls on the form////');
console.log('var Displays = {');
console.log(' sections: {');
var tabs = Xrm.Page.ui.tabs;
for (var i = 0; i < tabs.getLength() ; i++) {
var tab = tabs.get(i);
var sections = tab.sections;
for (var j = 0; j < sections.getLength() ; j++) {
var section = sections.get(j);
var name = section.getName();
if (name !== null) {
console.log(" " + name.replace(/\W/g, '') + ": '" + name + "', //Label: " + section.getLabel() + " Parent Tab: '"
+ section.getParent().getName() + "'");
}
//console.log(section.getParent().getName() + "." + section.getName() + ": '" + section.getName() + "'");
}
}
console.log(' }, //remove last comma (,) from above when putting in script');
//Tabs
console.log(' tabs: {');
var tabs = Xrm.Page.ui.tabs;
for (var i = 0; i < tabs.getLength() ; i++) {
var tab = tabs.get(i);
var tabName = tabs.get(i).getName();
if (tabName !== null) {
console.log(" " + tabName.replace(/\W/g, '') + ": '" + tabName + "', //Label: " + tab.getLabel());
}
}
console.log(' }//remove last , from above');
console.log('}; ');
}
} catch (e) {
//alert
}
}
The output will be something like this:
var Properties = {
firstname: 'firstname', //Label: First Name Parent Name: 'name' Parent Label: 'Name'
middlename: 'middlename', //Label: Middle Name Parent Name: 'name' Parent Label: 'Name'
lastname: 'lastname', //Label: Last Name Parent Name: 'name' Parent Label: 'Name'
suffix: 'suffix', //Label: Suffix Parent Name: 'name' Parent Label: 'Name'
}; //remove last , from above
var Displays = {
sections: {
name: 'name', //Label: Name Parent Tab: 'general'
}, //remove last , from above
tabs: {
general: 'general', //Label: General
}//remove last , from above
};
Pros:
Now when you are referencing a control, you can put Properties.firstname and have your entry checked by Intellisense rather than relying on typing it yourself. Also if you want to reference a section or tab, you can use Displays.sections.name or Displays.tabs.general. It may be a tad more wordy than just saying ‘general’, but it makes it easier to maintain and error-check.
Cons:
I’d recommend you make changes to the script to get it to work the way you want it. Right now it spits out an extra comma on the last control/section/tab so you have to manually remove it when inputting it into Visual Studio.