quarta-feira, 4 de fevereiro de 2009

>> 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;
}
}

}

2 comentários:

  1. Fala Giba!...

    Parabens pelo componente. Realmente muito bom.

    Abraços!

    ResponderExcluir
  2. Bacana, Gilberto! Parabéns mesmo!!!!
    Trabalho na DM, em BH. Já vi algumas mensagens suas no fórum do CRM.
    Aproveitando, sabe se é possível criar atributos com várias opções Radio Button? Queria algo como o tipo Bit oferece, porém com mais de duas opções.
    Grato.
    Abraço,
    João.

    ResponderExcluir

<< Ao enviar um comentário, favor clicar na opção [Enviar por e-mail comentários de acompanhamento para gtezini@gmail.com] >>