Multilookup como Checkbox [SharePoint 2013]

Opa pessoal, hoje vou mostrar pra vocês como alterar o formato padrão do campo multilookup do SharePoint para checkboxes.

Esse campo na NewForm.aspx é mostrado com dois <selects> e dois botões <adicionar> e <remover>, mas as vezes precisamos customizar esse campo.

Para isto criei um script que pode ser pego neste link: https://github.com/morecodding/samples/blob/master/multilookup.js.

Este é um JSLink que deverá ser adicionado na form de criação de item.

Agora, como esse script funciona?

Primeiramente, recria-se o namespace CSRManager, onde lá temos os seguintes objetos: Render, Parser e Element.

window.CSRManager =  window.CSRManager || {};
window.CSRManager.Parser = {}
window.CSRManager.Elements = {}
window.CSRManager.Render = {}

Render contém as funções de renderização que serão apontadas no template do campo que vamos dar override.

Parser contém as funções para realizar a conversão dos dados. Neste exemplo temos duas funções: a parseObjToHtml e a parseMultiLookupValue.

A primeira, tem a responsabilidade de alterar os valores que foram marcados no html.

O que ela faz de fato?

  1. Recebe um html: <div id=”{{id}}”> e um array [“id:meu_id”].
  2. Quebra o valor do array em “id”, “meu_id”
  3. Realiza um replace no html que estiver circundado com “{{}}” e o valor de chave, no caso id, para o valor dessa chave. Com isso ela retorna <div id=”meu_id”>

Element, contem as funções para a geração dos <input type=”checkbox”> e <label> já injetando os valores provenientes dos campos Choices da nosso campo MultiLookupValue.

Para isso funcionar, basta adicionar no seu JSLink o seguinte:

overrideCtx.Templates.Fields = {
     'Produtos' : {
       'NewForm' : CSRManager.Render.checkbox
     }
};

Simples não? Abraços!