In CRM 4.0 I had posted an article about changing the CRM Address State to a drop down box. While I had gone back and updated the code to work with CRM 2011, some people still had problems using it. Also, it wasn’t the best way to do it in CRM 2011. With the web-resources in CRM 2011 there is a completely supported way of creating a state drop down!
You can use an html web-resource! Below is the source for the html web resource, then you just need to hide the state drop down on your form and add the web resource and set the data parameter to the field id, such as address1_stateorprovince.
This helps by providing a set of default option in a drop-down box. It also supports (** Other) which will show a text box for entering something not in the drop down. This web-resource works on any entity where you need a state drop down.
Here is the configuration for the HTML Web Resource on the Contact form:
State Drop Down Web Resource Properties
StateDropDown.html:
<html>
<head>
<title>State Drop Down</title>
<link href="/_common/styles/fonts.css.aspx?lcid=1033" rel="stylesheet" type="text/css"/>
<link href="/_common/styles/global.css.aspx?lcid=1033" rel="stylesheet" type="text/css"/>
<link href="/_common/styles/select.css.aspx?lcid=1033" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
var datafield;
function getQuerystring(key)
{
var work = key.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regex = new RegExp("[\\?&]"+work+"=([^&#]*)");
var qs = regex.exec(window.location.href);
if (qs == null) return null;
return qs[1];
}
function onLoad()
{
var updatefield = getQuerystring("data");
if (top.location.href.indexOf("/print/print.aspx") != -1)
{
// While this part of the onload is unsupported, there is not another way to do it
// because Xrm.Page.data.entity is not supported in print-preview
var data_cell = document.getElementById("cell_dd");
var crmField = top.frames[0].document.getElementById(updatefield+"_d");
data_cell.innerHTML = crmField.innerHTML;
return;
}
datafield = parent.Xrm.Page.data.entity.attributes.get(updatefield);
var value = datafield.getValue();
var dropdown = document.getElementById("custom_state");
// fix for outlook issue identified by Ryan
// do not pass null value to IsOptionInDropDown
if (value==null || value=="") {
dropdown.value = "!1"; // Set to select a state by default
return; // stop processing - empty value
}
// If it is a dropdown value, set the dropdown and exit onload
if (IsOptionInDropDown(value)) return;
// no value found for drop down, value is not null or empty, therefor set other
dropdown.value = "other";
var other = document.getElementById("other_state");
other.value = value;
SetOtherVisible(true);
}
function IsOptionInDropDown(value)
{
// Replace fixes for common name variants
switch (value) {
case "d.c.": value="dc";
break;
default:
break;
}
// Change to lowercase
var lvalue=value.toLowerCase();
var dropdown = document.getElementById("custom_state");
var options = dropdown.options;
var i = 0;
for(i=0;i<options .length;i++)
{
if (options[i].value.toLowerCase() == lvalue || options[i].text.toLowerCase() == lvalue)
{
dropdown.value = options[i].value;
SetOtherVisible(false);
return true;
}
}
return false;
}
function DropDownChanged(value)
{
if (value !== null && value!=="") {
if (value.charAt(0)=='!') { // Fixed By Joseph Martine - charAt or substring not [0]
StateChanged("");// Fixed By Joseph Martine
return;
}
if (value=="other") {
SetOtherVisible(true);
return;
} else {
SetOtherVisible(false); // Fixed By Joseph Martine
}
var os = document.getElementById("other_state");
os.value = value;
StateChanged(value);
}
}
function TextBoxChanged(value)
{
StateChanged(value);
IsOptionInDropDown(value); // This also updates the visible in its check...
return true;
}
function StateChanged(value)
{
// Update Xrm.Page data field
datafield.setValue(value);
}
function SetOtherVisible(visibility)
{
var ddcell = document.getElementById("cell_dd");
var textcell = document.getElementById("cell_tb");
if (visibility) {
ddcell.style.width="50%";
textcell.style.display="table-cell";
textcell.style.width="50%";
} else {
textcell.style.display="none";
ddcell.style.width="100%";
textcell.style.width="100%";
}
}
</script>
</head>
<body onload="onLoad();">
<table cellspacing="0" cellpadding="0" width="100%"><tr><td id="cell_dd">
<select name="custom_state" req="2" height="4" style="IME-MODE: auto;width:100%;"
class="ms-crm-SelectBox" id="custom_state" onChange="DropDownChanged(this.value)">
<option value="!1">---Select a State-------</option>
<option value="!2">---Canada---------------</option>
<option value="AB">Alberta</option>
<option value="BC">British Columbia</option>
<option value="MB">Manitoba</option>
<option value="NB">New Brunswick</option>
<option value="NL">Newfoundland and Labrador</option>
<option value="NT">Northwest Territories</option>
<option value="NS">Nova Scotia</option>
<option value="NU">Nunavut</option>
<option value="ON">Ontario</option>
<option value="PE">Prince Edward Island</option>
<option value="QC">Quebec</option>
<option value="SK">Saskatchewan</option>
<option value="YT">Yukon</option>
<option value="!3">---United States--------</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DC">District of Columbia</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
<option value="other">** Other</option>
</select>
</td><td id="cell_tb" style="padding-left:15px;display:none;">
<input class="ms-crm-Text" style="ime-mode: auto;width:100%;" type="text"
maxLength="50" id="other_state" req="0" onChange="TextBoxChanged(this.value);" />
</td></tr>
</table>
</body>
</html>
No comments:
Post a Comment