Picklists are usually used to provide a short range of predefined options that further describe our data. To make them usable it’s suggestible to keep the number of Picklist options to a minimum. Although a Picklist presentation layer is functional data is not always that boring and deserves a better re-presentation.
I personally think that controls should convey more emotions and strengthen bond between what is showing and how it’s shown. Take for example a simple Picklist that has values 1-5 that describe the account rating or a Picklist of shipping methods with well known company names. No doubt presenting the following control to the user makes more sense than just selecting a number.
The concept used in this example can be developed further to support more advanced scenarios. The nice thing about it is that most of the bits that handle the actual show and hide of the Picklist menu can be reused. So if you find yourself needing to create a more complex Picklist you should center most of your effort by overriding the buildPopup function (see code).
The code exposes most of the styling attributes which means you don’t have to tear it apart if you feel like redecorating ;+).
In order to facilitate the construction of options and their respective images the code uses a simple technique that accepts an Image base URL and utilizes the picklist id to identify specific images folder. The image names represent their index i.e. 0.gif, 1.gif, 2.gif and so on. If need to use option’s value instead you must also change the code that constructs the image URL.
CRMWeb
| -- ISV
|-- IMGPL (this is the ImageBaseUrl)
|-- selected.gif (A small arrow that points to the selected option)
|-- gi_rating (This is the Picklist id)
|-- 0.gif (Empty option X image – index 0)
|-- 1.gif (first option – index 1)
|-- 2.gif (second option – index 2 and so on..,)
Eventually the image URL is http://servername:port/iSV/IMGPL/gi_rating/1.gif
Feel free to comment.
String.prototype.Format = function( args )
{
return this.replace( /\{(\d{1})\}/ig , function match(){return args[arguments[1]];});
}
function ImagePicklist(picklistId)
{
var ipl = this;
if (!(ipl.Picklist = crmForm.all[picklistId]))
return alert("Picklist is missing");
if (ipl.Picklist.Disabled)
return;
ipl.ImageBaseUrl = "/ISV/IMGPL/";
ipl.HoverStyle = {Color: "#FFFFFF",Background: "#000000"}
ipl.HasEmptyOption = true;
ipl.Height = 213;
ipl.BackgroundColor = "#FFFFFF";
ipl.Scroll = true;
ipl.Picklist.ondblclick = function(){show();}
ipl.Picklist.onmousedown = function(){show();}
ipl.Picklist.onfocusout = function()
{
ipl.Picklist.Popup.document.body.innerHTML = "";
ipl.Picklist.Popup.hide();
}
function show()
{
ipl.Picklist.Disabled = true;
buildPopup();
var left = ipl.Picklist.Position.X;
var top = ipl.Picklist.Position.Y;
var width = ipl.Picklist.offsetWidth;
var height = ipl.Height
ipl.Picklist.Popup.show(left ,top ,width ,ipl.Height ,document.body);
setTimeout(function(){ipl.Picklist.Disabled = false;},100);
return false;
}
ipl.MouseOver = function(option)
{
option.style.backgroundColor = ipl.HoverStyle.Background;
option.style.color = ipl.HoverStyle.Color;
}
ipl.MouseOut = function(option)
{
option.style.backgroundColor = ipl.BackgroundColor;
option.style.color = "#000000";
}
ipl.Onclick = function(option)
{
ipl.Picklist.onfocusout();
ipl.Picklist.selectedIndex = option.index
ipl.Picklist.focus();
}
function getPosition(control)
{
var left = 0;
var top = control.offsetHeight;
do {
left += control.offsetLeft;
top += control.offsetTop;
} while (control = control.offsetParent);
return {X:left,Y:top}
}
function buildPopup()
{
ipl.Picklist.Position = getPosition(ipl.Picklist);
ipl.Picklist.Popup.document.body.style.backgroundColor = ipl.BackgroundColor;
var div = document.createElement("DIV");
div.style.cssText = "overflow-y:{0};height:{1}px;".Format([(ipl.Scroll?"scroll":"hidden"),(ipl.Height-13)]);
for (var i=(ipl.HasEmptyOption?0:1);i< ipl.Picklist.options.length;i++)
{
var option = ipl.Picklist.options[i];
var item = document.createElement("DIV");
item.index = i;
item.onmouseover = "document.ImagePicklist.MouseOver(this);";
item.onmouseout = "document.ImagePicklist.MouseOut(this)";
item.onclick = "document.ImagePicklist.Onclick(this)";
item.title = "Value = {0}".Format([option.value]);
item.style.lineHeight = "25px"
item.style.cursor = "hand";
var selItem = null;
if (option.selected)
{
selItem = document.createElement("IMG");
selItem.style.height = "16px";
selItem.style.width = "16px";
selItem.src = "{0}selected.gif".Format([ipl.ImageBaseUrl]);
selItem.align = "middle";
}
else
{
selItem = document.createElement("SPAN");
selItem.innerHTML = " ";
selItem.style.width = "16px";
}
item.appendChild(selItem);
item.appendChild(document.createTextNode(" "));
var img = document.createElement("IMG");
img.src = "{0}{1}/{2}.gif".Format([ipl.ImageBaseUrl,ipl.Picklist.id,i]);
item.appendChild(img);
var optText = null;
if (option.selected)
{
optText = document.createElement("B");
optText.innerText = " {0}".Format([option.innerText]);
}
else
{
optText = document.createTextNode(" {0}".Format([option.innerText]));
}
item.appendChild(optText);
div.appendChild(item);
}
ipl.Picklist.Popup.document.body.innerHTML = div.outerHTML;
}
{ //Initialize
ipl.Picklist.Popup = window.createPopup();
/* A reference from the window popup to ipl */
ipl.Picklist.Popup.document.ImagePicklist = ipl;
var popUpBodyStyle = ipl.Picklist.Popup.document.body.style;
popUpBodyStyle.border = "1px solid gray";
popUpBodyStyle.padding = 0;
popUpBodyStyle.margin = 5;
}
}
function OnCrmPageLoad()
{
window.ctcPicklist = new ImagePicklist("customertypecode");
ctcPicklist.ImageBaseUrl = "/ISV/IMGPL/";
ctcPicklist.HoverStyle = {Color: "gold",Background: "#FF3454"}
ctcPicklist.HasEmptyOption = false;
window.accPicklist = new ImagePicklist("accountcategorycode");
accPicklist.Height = 85;
accPicklist.Scroll = false;
accPicklist.BackgroundColor = "yellow";
window.graPicklist = new ImagePicklist("gi_rating");
graPicklist.Height = 165;
graPicklist.Scroll = false;
graPicklist.HoverStyle = {Color: "navy",Background: "#FFFFFF"}
}
OnCrmPageLoad();
211 comments:
«Oldest ‹Older 201 – 211 of 211Thanks for sharing your blog with us
Python training in Hyderabad
Extremely helpful article !!Please visit:
hellotechhub
Windows Help and Support
QuickBook Support
Computer Repair Services
Thank you for sharing this excellent article:
ad formats
clickflox
Thanks for providing such a great post.Please visit:
Virtual phone system
free virtual phone system
VOIP numbers
call forwarding
international calling
VoIP
all call recording
thanks for sharing this blog with us .
adarsh welkin park
provident east lalbagh
Really helpful article thank you for sharing Data science training in Hyderabad
Contact No: 9642000668
9642000669
Very Informative and nice articleand keep posting
Thanks for sharing valuable information..
Best Digital Marketing Training Institute in Warangal
Nice post..
Java Full Stack Course in Warangal
Post a Comment