>> CRM 4.0 - PickList Multi-Value

O objeto Picklist do CRM é um recurso interessante para montagem de listas rápidas, porém, dependendo do projeto em que está, vai ser necessário o uso de alguns recursos adicionais do objeto, como o de [multipla escolha]...Então desenvolvi um método (totalmente em JavaScript) que [transforma] o Picklist original em um [Novo], com múltipla escolha.

Segue design de um Picklist [transformado]:







Como funciona a transformação

1 - Crie normalmente seu Picklist e adicione-o no form do crm;

2 - Crie um atributo Auxiliar (nvarchar,texto,100) para armazenar os valores do Picklist Multi-Value; adicione-o também no form do CRM;

3 - Copie a função abaixo no OnLoad do Form do CRM. A função (createMultiValuePickList) possui os seguintes parâmetros:

pickList - Informar o objeto Picklist original do CRM;
objAux - Informar o objeto criado no passo 2 citado acima.

P.S.1.: O Novo Picklist ficará no lugar do [objAux] e o Picklist Original ficará [oculto] no Form do CRM.

P.S.2.: Como a função [createMultiValuePickList] cria objetos [novos] no Form do CRM e não altera e/ou reutiliza qualquer recurso padrão do produto, este procedimento pode se enquadrar na forma [Suportada] de customização.

Segue chamada da função:

createMultiValuePickList(crmForm.all.new_services, crmForm.all.new_services_aux);

Segue função completa:

function createMultiValuePickList(pickList, objAux)
{
/* Desabilitar o PickList do CRM e o campo aux que guardará os valores do Picklist Multi-Value */
var pickLabel = document.getElementById(pickList.id + "_c");
pickLabel.style.visibility = "hidden";
pickList.style.width = "0px";
objAux.style.width = "0px";

/* Cria a Table principal, que conterá o Picklist e o Botão para habilitar o Picklist */
var oMainTable = document.createElement("TABLE");
oMainTable.style.width = '100%';
oMainTable.setAttribute('table-layout', 'fixed');
/* Adiciona a Table Principal */
objAux.insertAdjacentElement("BeforeBegin", oMainTable);

var oMainTHead = document.createElement("THEAD");
oMainTable.appendChild(oMainTHead);

var input1 = document.createElement('input');
input1.setAttribute('type', 'text');
input1.setAttribute('name', 'input_txt');
input1.setAttribute('id', 'input_txt');
input1.setAttribute('readOnly', 'true');

input1.onclick = function()
{
document.getElementById('divPicklist').style.visibility = 'hidden';
document.getElementById('input_btn').style.backgroundImage = 'url(/_imgs/selectOn.gif)';
}


var input2 = document.createElement('input');
input2.style.width = '18px';
input2.setAttribute('type', 'button');
input2.setAttribute('name', 'input_btn');
input2.setAttribute('id', 'input_btn');
input2.style.backgroundImage = 'url(/_imgs/selectOn.gif)';
input2.style.backgroundColor="#D6E8FF";
input2.style.backgroundPosition="center center";

input2.onclick = function()
{
var div1 = document.getElementById('divPicklist');
div1.style.visibility = (div1.style.visibility=='visible' ? 'hidden' : 'visible');
this.style.backgroundImage = (div1.style.visibility=='hidden' ? 'url(/_imgs/selectOn.gif)' : 'url(/_imgs/ico/16_succeeded.png)');
var txt = document.getElementById('input_txt');
txt.value='';
objAux.value='';

for(i=0; i < pickList.options.length; i++)
{
var chk = document.getElementById('chk_' + String(pickList.options[i].value));
if (chk)
{
if (chk.checked)
{
txt.value+=pickList.options[i].text+',';
objAux.value += pickList.options[i].value+',';
}
}
}

if (txt.value.indexOf(',')>0) txt.value= txt.value.substr(0, txt.value.length-1);
if (objAux.value.indexOf(',')>0) objAux.value= objAux.value.substr(0, objAux.value.length-1);

}

var input3 = document.createElement('input');
input3.style.width = '18px';
input3.setAttribute('type', 'button');
input3.setAttribute('name', 'input_btn2');
input3.setAttribute('id', 'input_btn2');
input3.style.backgroundImage = 'url(/_imgs/ico/16_L_remove.gif)';
input3.style.backgroundColor="#D6E8FF";
input3.style.backgroundPosition="center center";

input3.onclick = function()
{
document.getElementById('divPicklist').style.visibility = 'hidden';
document.getElementById('input_btn').style.backgroundImage = 'url(/_imgs/selectOn.gif)';
document.getElementById('input_txt').value='';
objAux.value='';

for(i=0; i < pickList.options.length; i++)
{
var chk = document.getElementById('chk_' + String(pickList.options[i].value));
if (chk) chk.checked=false;
}

}

var oRow1 = document.createElement("TR");
var oRow2 = document.createElement("TR");

var oDivRow2 = document.createElement("DIV");
oDivRow2.setAttribute('id', 'divPicklist');
oDivRow2.style.position = 'absolute';
oDivRow2.style.height = '180px';
oDivRow2.style.width = '100%';
oDivRow2.style.border = 'solid 1px gray';
oDivRow2.style.backgroundColor = 'white';
oDivRow2.style.overflow = 'scroll';
oDivRow2.style.visibility='hidden';

oMainTHead.appendChild(oRow1);
oMainTHead.appendChild(oRow2);

/* 1a Coluna - TextBox */
var oCell1 = document.createElement("TH");
oCell1.style.width = '90%';
oCell1.appendChild(input1);
oRow1.appendChild(oCell1);

/* 2a Coluna - Botão */
var oCell2 = document.createElement("TH");
oCell2.style.width = '10%';
oCell2.appendChild(input2);
oRow1.appendChild(oCell2);

/* 3a Coluna - Botão */
var oCell3 = document.createElement("TH");
oCell3.style.width = '10%';
oCell3.appendChild(input3);
oRow1.appendChild(oCell3);

/* Cria a Table que terá o conteúdo do Picklist Original */
var oTablePick = document.createElement("TABLE");
oTablePick.setAttribute('width', '100%');
oTablePick.setAttribute('table-layout', 'fixed');

var oTHeadPick = document.createElement("THEAD");
oTablePick.appendChild(oTHeadPick);

oDivRow2.appendChild(oTablePick);

var defaultPick = crmForm.all.mit_services;
for(i=0; i < defaultPick.options.length; i++)
{
oRowPick = document.createElement("TR");
oTHeadPick.appendChild(oRowPick);

/* 1a Coluna - CheckBox */
oCellPick1 = document.createElement("TH");
oCellPick1.setAttribute('width', '10%');

if (defaultPick.options[i].text!="")
{
var chk = document.createElement('input');
chk.style.border = 'none';
chk.type = 'checkbox';
chk.id = 'chk_' + String(defaultPick.options[i].value);
chk.name = 'chk_' + String(defaultPick.options[i].value);
oCellPick1.appendChild(chk);
}

oRowPick.appendChild(oCellPick1);

/* 2a Coluna - Texto do PickList Original */
oCellPick2 = document.createElement("TH");
oCellPick2.setAttribute('width', '90%');
oCellPick2.innerHTML = defaultPick.options[i].text;
oRowPick.appendChild(oCellPick2);
}

/* Adicionar oTablePick na 2a linha da oMainTable */
var oCellPick1_line2 = document.createElement("TH");
oCellPick1_line2.setAttribute('width', '90%');
oCellPick1_line2.appendChild(oDivRow2);
oRow2.appendChild(oCellPick1_line2);

/* 2a coluna em branco */
var oCellPick2_line2 = document.createElement("TH");
oCellPick2_line2.style.width = '10%';
oRow2.appendChild(oCellPick2_line2);

/* 3a coluna em branco */
var oCellPick3_line2 = document.createElement("TH");
oCellPick3_line2.style.width = '10%';
oRow2.appendChild(oCellPick3_line2);

/* DataBind do componente */
if (objAux.value.indexOf(",")>0)
{
var txt_width = String(input1.clientWidth) + 'px';
var aBind = objAux.value.split(",");
for(i=0; i <= aBind.length; i++)
{
if (defaultPick.options[aBind[i]])
{
input1.value += defaultPick.options[aBind[i]].text + ',';
var chk = document.getElementById('chk_' + String(aBind[i]));
if (chk) chk.checked=true;
}
}
if (input1.value.indexOf(',')>0)
{
input1.value= input1.value.substr(0, input1.value.length-1);
input1.style.width = txt_width;
}
}

}