Criando aplicativos HTML5

Adicionando o recurso de arrastar e soltar do HTML5 a listas do SharePoint

Andrey Markeev

Baixar o código de exemplo

O Microsoft SharePoint é uma plataforma empresarial com uma longa história e uma ampla variedade de recursos, e, por isso, não pode sempre reagir de maneira suficientemente rápida para seguir as tendências da tecnologia Web. Apesar da ampla adoção empresarial do SharePoint e de um esforço enorme para fornecer uma ampla variedade de recursos, o SharePoint ainda está defasado em relação a produtos CMS em termos de interfaces de usuário imersivas, como o HTML5 e o CSS3.

Em minha opinião, o HTML5 não é apenas uma nova tecnologia em alta, ele realmente tem benefícios muito práticos: é fácil, conveniente e sofisticado, além de ter suporte, mais ou menos, de todos os navegadores modernos (inclusive navegadores de dispositivos móveis). Além disso, o HTML5 e o JavaScript estão se tornando tecnologias principais para a programação da área de trabalho no Windows.

Portanto, o HTML5 realmente merece um lugar no SharePoint para tornar os portais mais fáceis de usar. E as interfaces do SharePoint aprimoradas podem realmente ajudar os usuários empresariais a trabalhar melhor e mais rapidamente.

Infelizmente, o SharePoint não tem nenhuma boa qualidade interna para o HTML5, mas tem uma grande flexibilidade. Neste artigo, demonstrarei como é fácil adicionar suporte ao recurso de arrastar e soltar do HTML5 ao SharePoint e como ele pode tornar a interface padrão bastante suave, conforme mostrado na Figura 1.

Figura 1 Recurso de arrastar e soltar no SharePoint

Para implementar isso, usarei um dos blocos de construção essenciais do SharePoint, que também é uma das minhas ferramentas favoritas do SharePoint, as transformações XsltListViewWebPart e suas transformações XSL, (consulte a biblioteca do MSDN em bit.ly/wZVSFx para obter detalhes).

Por que não uma Web Part personalizada?

Como sempre, quando se trata de uma implementação, o SharePoint oferece um grande intervalo de possibilidades e é extremamente importante escolher a que seja mais útil para você.

Considerando que o desafio do recurso de arrastar e soltar do HTML5 é usado principalmente para gerenciar dados, muitos desenvolvedores do SharePoint provavelmente preferirão criar uma Web Part personalizada, que, neste caso, funcione exatamente como um controle ASP.NET comum: os dados são armazenados em uma lista padrão do SharePoint, recuperados por meio do modelo de objeto ou do controle SPDataSource e renderizados com a ajuda da marcação ASCX e dos controles do ASP.NET.

Simples, claro e óbvio... mas é a melhor opção?

Há dois anos eu pensava que sim. Hoje, prefiro personalizar XsltListViewWebPart usando suas transformações XSL. Por que mudei de ideia?

A partir do SharePoint 2010, quase todos os tipos de exibições de lista (com exceção de Calendários) são exibidos por meio dessa mesma Web Part. Apenas imagine: todos esses tipos de dados, todas essas diferentes exibições e estilos e tipos de lista, toda essa grande variedade de dados é renderizada usando XsltListViewWebPart e suas transformações XSL. A ferramenta é flexível e poderosa.

Se você decidir começar a criar sua própria Web Part personalizada para renderizar alguma marcação HTML5 para exibir dados de lista, você perderá todos os recursos internos. E baseado em minha experiência, essa é uma grande perda. A propósito, nunca vi uma Web Part personalizada simples que não acabasse implementando, no mínimo, metade dos recursos prontos para uso de XsltListViewWebPart.

Portanto, meu plano é reutilizar a funcionalidade existente em vez de criar uma Web Part personalizada que provavelmente será muito pior em termos de flexibilidade e potência.

Na verdade, a XsltListViewWebPart inclui muitos recursos úteis. Ela é integrada no SharePoint Designer, dá suporte a todas as conexões possíveis da Web Part e exibe todos os tipos de dados do SharePoint corretamente. Dá suporte a agrupamento, subtotais, paginação, menus de contexto de item, edição embutida, seleções de itens, indicadores de presença e muito mais. Tem uma interface de Faixa de Opções contextual, fornece uma interface do usuário para classificação e filtragem, oferece alguns estilos de exibição básicos e, novamente, muito mais. Em resumo, a XsltListViewWebPart tem muitos recursos úteis que seriam muito difíceis de reimplementar usando a abordagem de Web Part personalizada.

XsltListViewWebPart

A XsltListViewWebPart fornece muitos pontos de integração para os desenvolvedores: uma interface programática, uma interface CAML e, é claro, transformações XSL em conjunto com associações de parâmetros. E não se esqueça de que todos esses objetos e propriedades também têm suas representações no Modelo de Objeto do Cliente, de forma que você pode acessar sua XsltListViewWebPart até do JavaScript e do Silverlight.

Portanto, a XsltListViewWebPart é uma ferramenta poderosa. É verdade que todo esse XML específico ao SharePoint (ou XSLT) parece um pouco assustador à primeira vista, mas há alguns truques que mostrarei a você que ajudarão a decifrá-lo.

O cenário

Antes de me aprofundar nos detalhes da implementação, deixe-me descrever o cenário geral.

Irei injetar o recurso de arrastar e soltar do HTML5 na exibições de lista do SharePoint para permitir que os usuários arrastem células de uma lista para outra. Meu exemplo usará uma lista Tasks e uma lista Executors, para que o gerente do projeto possa atribuir e cancelar a atribuição de tarefas facilmente, arrastando executores para as células correspondentes da lista Tasks.

Como você deve saber, o HTML5 apresenta vários novos atributos para o recurso de arrastar e soltar, o mais importante disso é o atributo "draggable”. Também existem vários eventos para manipulação dos vários estágios do processo de arrastar e soltar. As funções de manipulador desses eventos podem ser anexadas usando os atributos correspondentes, como “ondragstart”, “ondragend”, etc. (Para obter detalhes, leia o rascunho da especificação do HTML5 do World Wide Web Consortium [W3C], Capítulo 7.6, em bit.ly/lNL0FO.)

Para o meu exemplo, isso significa que preciso usar o XSLT apenas para adicionar alguns atributos básicos para determinadas células de exibição de lista e, provavelmente, alguns atributos personalizados adicionais para anexar os valores dos dados (que serão transmitidos pelo processo de arrastar). Com o tempo, precisarei fornecer o código JavaScript correspondente para as funções de manipulador.

Primeiras etapas

Preciso de duas listas. Posso criar uma lista Tasks do modelo Tasks padrão ou criar apenas uma lista personalizada e adicionar algumas colunas, incluindo a coluna obrigatória “Assigned To”. Crio uma segunda lista, Executors, como uma lista personalizada, adicionando “Executor” como uma coluna de tipo “Pessoa ou Grupo” tornando-a obrigatória, indexada e exclusiva.

A lista Executors deve exibir apenas nomes de usuários, portanto, ela não precisa realmente da coluna padrão “Título”. Para ocultar essa coluna, vou para as definições da lista, habilito o gerenciamento de tipos de conteúdo, em seguida, vou para o tipo de conteúdo “Item”, clico na coluna “Título” e oculto a coluna, conforme mostrado na Figura 2.

Figura 2 Ocultando a coluna Título nas definições de lista do SharePoint

Preenchi essas listas com dados de exemplo e, em seguida, criei uma página de Web Part para meu painel, onde adicionei essas listas lado a lado (Tasks à esquerda e Executors à direita), conforme mostrado na Figura 3.

Figura 3 Adicionando as listas ao painel do SharePoint

Ok, agora tenho as listas e os dados. Está na hora da implementação real da funcionalidade arrastar e soltar.

SharePoint Designer

O Microsoft SharePoint Designer é uma ferramenta completamente gratuita para desenvolvimento rápido de aplicativos do SharePoint. O SharePoint 2010 está muito melhorado em comparação com o SharePoint 2007 e agora está extremamente útil, mesmo para os desenvolvedores. A ideia é que você possa usar a GUI do SharePoint Designer para gerar algum código XSLT realmente complexo e, em seguida, copiar e colar o código gerado em seu projeto do Visual Studio, em vez de escrever XML/XSLT sujeito a erros e nem sempre bem documentado à mão. Sempre uso esse truque em projetos do mundo real e garanto a você que isso economiza muito tempo.

Abro o SharePoint Designer e navego para a página do painel que criei anteriormente. Seleciono uma célula na coluna Assigned To (clico com o botão direito do mouse e seleciono Select | Cell). Agora, a mágica: na barra de status, vejo o caminho para o modelo XSL (e para a marca HTML correspondente neste modelo) que é responsável por exibir esta célula específica (consulte a Figura 4).

Figura 4 O caminho para o modelo XSL atual no SharePoint Designer

Essas informações podem ser muito úteis para determinar qual modelo XSL substituir para alterar a marcação da célula. Você pode localizar o código original dos modelos na pasta 14/TEMPLATE/LAYOUTS/XSL e usá-lo em seus próprios arquivos XSLT ou na marca <Xsl> da XsltListViewWebPart.

Mas não preciso lidar com esses enormes e complicados arquivos XSLT para atingir meu objetivo. Em vez disso, posso usar o recurso de formatação condicional do SharePoint Designer que foi desenvolvido para destacar determinadas linhas ou células com formatação especial, com base em condições específicas. Você não precisa de habilidades especiais para usar esse recurso, a GUI facilita isso. Mas por trás dos bastidores, tudo isso é implementado com o XSLT. Assim, o SharePoint Designer inclui um tipo de gerador de XSLT gráfico fácil de usar, e irei usá-lo agora para minhas próprias necessidades.

Seleciono uma célula, clico no botão Formatação Condicional na faixa de opções e seleciono Formatar Coluna, conforme mostrado na Figura 5.

Figura 5 Definindo a formatação condicional no SharePoint Designer

Em seguida, crio uma condição improvável, ID igual a zero, conforme mostrado na Figura 6.

Figura 6 A caixa de diálogo da formatação condicional no SharePoint Designer

Em seguida, clico no botão Definir Estilo e seleciono um estilo aleatório (como “Decoração de texto: sublinhado"). Pressiono OK e alterno para a guia Modo de Exibição de Código, onde localizo o código gerado. Ele está, obviamente, dentro da marca <Xsl> do controle XsltListViewWebPart.

Transformações XSL

Agora estou pronto para modificar a marcação das células “Assigned To”. A coluna “Assigned To” é a “que aceita dados” para a qual arrasto executores, portanto, preciso fornecer os atributos “ondragover”, “ondragenter”, “ondragleave” e “ondrop”, que apontarão para as funções do manipulador de eventos JavaScript correspondente.

O código gerado pelo SharePoint Designer no parágrafo anterior contém o modelo XSL com a seguinte assinatura:

<xsl:template name="FieldRef_printTableCell_EcbAllowed.AssignedTo"
  match="FieldRef[@Name='AssignedTo']" mode="printTableCellEcbAllowed"
  ddwrt:dvt_mode="body" ddwrt:ghost="" xmlns:ddwrt2="urn:frontpage:internal">

Como você deve saber, os modelos XSL podem chamar um ao outro, por nome ou por condição. O primeiro tipo de chamada é executado usando o elemento “xsl:call-template” e é muito semelhante a uma chamada de função, como a que você usaria no C#, por exemplo.

A segunda opção é preferível e muito mais flexível: usando o elemento “xsl:apply-templates”, você pode especificar o modo e o parâmetro (que é selecionado usando XPath para que possa realmente conter muitos elementos), sem especificar nenhum nome de modelo específico. Para cada elemento de parâmetro, o modelo correspondente será correspondido usando o atributo “match”. Você pode pensar nessa abordagem como algo semelhante às sobrecargas no C#.

Como você pode ver no código anterior, esse modelo corresponderá aos elementos de “FieldRef”, onde o atributo Name é igual a “AssignedTo”. Além disso, o atributo “mode” da chamada de xsl:apply-template deve ser igual a “printTableCellEcbAllowed”. Portanto, esse modelo é essencialmente uma sobrecarga da função padrão que exibe os valores dos campos. E essa sobrecarga corresponderá apenas aos valores do campo “Assigned To”.

Agora, vamos examinar o que está dentro do modelo, conforme mostrado na Figura 7 (parte do código foi removida para manter a clareza).

Figura 7 Dentro do modelo XSL

<xsl:template match="FieldRef[@Name='AssignedTo']" mode="printTableCellEcbAllowed" ...>
  <xsl:param name="thisNode" select="."/>
  <xsl:param name="class" />
  <td>
    <xsl:attribute name="style">
      <!-- ... -->
    </xsl:attribute>
    <xsl:if test="@ClassInfo='Menu' or @ListItemMenu='TRUE'">
      <xsl:attribute name="height">100%</xsl:attribute>
      <xsl:attribute name="onmouseover">OnChildItem(this)</xsl:attribute>
    </xsl:if>
    <xsl:attribute name="class">
      <!-- ... -->
    </xsl:attribute>
    <xsl:apply-templates select="." mode="PrintFieldWithECB">
      <xsl:with-param name="thisNode" select="$thisNode"/>
    </xsl:apply-templates>
  </td>
</xsl:template>

Como você vê, o modelo contém dois elementos xsl:param, um elemento <td>, vários elementos xsl:attribute e um elemento xsl:apply-templates, que fará com que alguns modelos de nível inferior sejam aplicados.

Para atingir meu objetivo de recurso de arrastar e soltar, eu simplesmente adiciono os atributos correspondentes ao elemento <td>, como a seguir:

    <td ondragover="return UserDragOver(event, this)" ondragenter=
      "return UserDragOver(event, this)" ondragleave=
      "UserDragLeave(event, this)" ondrop="UserDrop(event, this)">

Bem simples, não?

Como alternativa, se você tiver o jQuery implantado em seu ambiente do SharePoint, deverá considerar anexar manipuladores de eventos JavaScript usando o método .on do jQuery.

A marcação da coluna Assigned To está pronta (escreverei os manipuladores mais tarde). Agora está na hora de personalizar a lista Executors.

Alterno novamente para a guia Modo de Exibição de Design, seleciono uma célula na coluna Executors e repito o truque da formatação condicional para gerar o código XSLT. Em seguida, adiciono o atributo onstartdrag para garantir que o recurso de arrastar e soltar possa ser iniciado corretamente (não preciso do atributo draggable aqui, porque os valores do campo ”Pessoa ou Grupo" são renderizados como links e, de acordo com a especificação, links têm o atributo draggable definido como “true” por padrão):

    <td ondragstart="UserDragStart(event, this)">

Legal. Mas como acompanhar os dados? Como determinar qual executor está sendo arrastado? É óbvio que preciso do nome de logon, ou melhor da ID do executor. A análise da ID de dentro do elemento TD é extremamente complicada em minha opinião.

O ponto aqui é que no XSLT, para qualquer campo do tipo Pessoa ou Grupo, a ID do usuário está disponível e pode ser facilmente recuperada com uma simples consulta XPath.

Nesta consulta, preciso apontar para os valores dos elementos atuais. O elemento atual normalmente é referenciado como o parâmetro $thisNode em todos os modelos padrão XsltListViewWebPart. Para recuperar a ID do usuário, você aponta para o atributo do parâmetro $thisNode, com nome igual ao nome da coluna Pessoa ou Grupo, com “.id” concatenado no seu final.

Esta é minha consulta:

    <td ondragstart="UserDragStart(event, {$thisNode/Executor.id}, this)">

As chaves são usadas para incluir a expressão XPath direto no valor do atributo.

A marcação está pronta e na verdade pode ser usada imediatamente, mas provavelmente será uma boa ideia trabalhar com esse código um pouco mais para torná-lo mais utilizável.

Tornando os modelos reutilizáveis

Você deve ter observado que os modelos estão fortemente associados a nomes específicos de colunas e que esses modelos são destinados apenas para listas específicas. Mas realmente é muito simples modificar esses modelos para que possam ser utilizados para outras listas com outros nomes de coluna.

Para começar, se você examinar a assinatura do modelo que apresentei anteriormente, você verá o seguinte atributo:

match="FieldRef[@Name='AssignedTo']"

Obviamente, isso associa o modelo à coluna Assigned To. Para ampliar um pouco a base desse modelo, você pode substituir a associação de nome por uma associação de tipo de forma que qualquer coluna Pessoa ou Grupo corresponda. Que assim seja! Este é o código:

match="FieldRef[@Type='User']"

A mesma modificação deve ser aplicada ao segundo modelo, onde o elemento FieldRef é correspondido ao nome interno do campo “Executor”.

Agora, como posso ter qualquer coluna do tipo Pessoa ou Grupo e qualquer lista, preciso passar algumas informações adicionais para meus manipuladores JavaScript. Quando o recurso de arrastar e soltar for executado, precisarei atualizar o valor da coluna Assigned To na lista Tasks, portanto, preciso saber o nome da coluna e a GUID da lista.

Como mencionei anteriormente, o XSLT do SharePoint tem alguns parâmetros padrão que estão disponíveis globalmente. Um desses parâmetros é o $List, que armazena a GUID da lista atual. E o nome interno do campo pode ser recuperado facilmente do elemento FieldRef correspondido.

Portanto, vou passar a GUID da lista e o nome interno da coluna para o manipulador UserDrop da seguinte maneira (estou omitindo os atributos “ondragenter”, “ondragover” e “ondragleave” por motivos de clareza):

    <td ... ondrop="UserDrop(event, this, '{$List}', '{./@Name}'">

O “.” aponta para o elemento FieldRef atual (que foi correspondido anteriormente pelo modelo).

Em seguida, preciso me livrar da cadeia de caracteres “Executor” no parâmetro id no XSLT da lista Executors usando o código a seguir:

    <td ondragstart="UserDragStart(event, {$thisNode/@*[name()=
      concat(current()/@Name, '.id')]}, this)">

Os modelos estão prontos e reutilizáveis, e agora vou escrever o código JavaScript correspondente para implementar os manipuladores.

Escrevendo os manipuladores JavaScript

Embora existam quatro manipuladores diferentes para escrever, a maioria deles é primitiva e todos eles são um tanto óbvios.

Normalmente, eu recomendaria colocar esse código em um arquivo JavaScript separado. E geralmente seria uma boa ideia usar o Visual Studio para criá-lo, uma vez que você obtém o benefício do IntelliSense ali. No entanto, em algumas circunstâncias, é razoável colocar esse código dentro do XSLT, substituindo o modelo raiz (match=“/”) para isso. Isso permite usar algumas variáveis e parâmetros XSLT dentro de seu código JavaScript e também significa que você não precisa se preocupar com a implantação de arquivos JavaScript.

Portanto, vamos examinar o código dos manipuladores, DragStart, DragEnter, DragOver, DragLeave e Drop.

No manipulador UserDragStart, você precisa inicializar a transferência dos dados. Isso significa que você precisa armazenar os dados arrastados em um objeto DataTransfer do HTML5, como este:

function UserDragStart(e, id, element) {
  e.dataTransfer.effectAllowed = 'copy';
  e.dataTransfer.setData('Text', id + '|' + element.innerHTML);
}

Observe que a ID do usuário não é a única parte dos dados que é transferida. Também adicionei o HTML interno do elemento <td> para evitar que a página precise ser atualizada depois de os dados serem soltos (consulte o código do manipulador UserDrop na Figura 8 para obter os detalhes).

Figura 8 O manipulador de eventos de soltar

function UserDrop(e, toElement, listGuid, columnName) {
  // Terminate the event processing
  if (e.stopPropagation)
      e.stopPropagation();
  // Prevent default browser action
  if (e.preventDefault)
      e.preventDefault();
  // Remove styles from the placeholder
  toElement.style.backgroundColor = '';
  //toElement.className = '';
  // iid attribute is attached to tr element by SharePoint
  // and contains ID of the current element
  var elementId = toElement.parentNode.getAttribute('iid').split(',')[1];
  // Transferred data
  var data = e.dataTransfer.getData('Text');
  var userId = data.split('|')[0];
  var userLinkHtml = data.split('|')[1];
  // Setting value of the field using SharePoint
  // EcmaScript Client Object Model
  var ctx = new SP.ClientContext.get_current();
  var list = ctx.get_web().get_lists().getById(listGuid);
  var item = list.getItemById(elementId);
  item.set_item(columnName, userId);
  item.update();
  // Asynchronous call
  ctx.executeQueryAsync(
    function () { toElement.innerHTML = userLinkHtml; },
    function (sender, args) { alert('Drag-and-drop failed.
      Message: ' + args.get_message()) }
    );
  return false;
}

Para os eventos DragEnter e DragOver desta classe, os manipuladores são idênticos, portanto, estou usando uma única função para eles. Você deve indicar nestes eventos que o usuário pode soltar seus dados aqui. De acordo com a especificação, para este fim, você deve chamar o método event.preventDefault (se disponível) e, em seguida, retornar false.

O manipulador DragEnter/DragOver é o local perfeito para aplicar estilos personalizados ao espaço reservado drag-and-drop para notificar o usuário de que ele realmente pode soltar os dados arrastados. Para simplificar o exemplo, usarei estilos CSS embutidos, mas em um projeto real recomendo usar classes CSS (consulte as linhas comentadas mostradas na Figura 9).

Figura 9 Os manipuladores dos eventos DragOver e DragLeave

function UserDragOver(e, toElement) {
  // Highlight the placeholder
  toElement.style.backgroundColor = '#efe';
  // toElement.className = 'userDragOver';
  // Denote the ability to drop
  if (e.preventDefault)
      e.preventDefault();
  e.dataTransfer.dropEffect = 'copy';
  return false;
}
function UserDragLeave(e, toElement) {
  // Remove styles
  toElement.style.backgroundColor = '';
  // toElement.className = '';

Obviamente, no DragLeave, preciso remover os estilos aplicados anteriormente, conforme mostrado na Figura 9.

Durante o evento Drop na Figura 8, duas ações importantes precisam ser executadas:

1. aplicar as alterações. Usando o Modelo de Objeto de Cliente EcmaScript do SharePoint, defina o valor do campo como a ID do usuário transferida.
2. Substituir o código HTML interno na célula atual (TD) pelo código do transferido para fazer com que as alterações apareçam sem atualizar a página.

Agora todos os manipuladores estão implementados e você pode implantar o Java­Script. Na verdade, você pode fazer isso de muitas maneiras diferentes: personalizar a página mestra, usar representante de controle, criar uma ação personalizada com Location definido como “ScriptLink” ou, como mencionei anteriormente, incluir JavaScript diretamente no XSLT.

A maneira mais simples aqui é personalizar a página mestra usando o SharePoint Designer, uma vez que ele não exige nenhuma habilidade especial. Mas como você é um desenvolvedor, é provável que você prefira juntar todas essas personalizações de JavaScript e XSLT e criar uma solução implantável. Ok. vamos fazer isso!

Criando uma implantável

Para criar uma solução pronta para uso que você possa enviar a seus clientes, você precisa executar algumas etapas simples:

1. Abra o Visual Studio e crie um Projeto Vazio do SharePoint. Em seguida, selecione "implantar como uma solução de farm" na caixa de diálogo das definições do projeto.
2. Adicione uma Pasta Mapeada “Layouts” do SharePoint para seu projeto e adicione três novos arquivos à pasta: UserDragHandlers.js, UserDragProvider.xsl e UserDragConsumer.xsl.
3. Cole o código XSLT e o código JavaScript criados anteriormente (gerados no SharePoint Designer) nos arquivos correspondentes.
4. Adicione um item de projeto Elemento Vazio, abra o Elements.xml e cole o seguinte código ali:
           <CustomAction ScriptSrc="/_layouts/SPDragAndDrop/UserDragHandlers.js" Location="ScriptLink" Sequence="10" />
   Isso implantará o link em seu arquivo JavaScript para todas as páginas do site.
5. Finalmente, adicione um Receptor de Evento ao Feature1 (que foi criado automaticamente quando você adicionou o item de projeto Elemento Vazio), remova o comentário do método FeatureActivated e cole o seguinte código nele:

var web = properties.Feature.Parent as SPWeb;
        SPList list;
        SPView view;
        list = web.Lists["Tasks"];
        view = list.DefaultView;
        view.XslLink = "../SPDragAndDrop/UserDragConsumer.xsl";
        view.Update();
        list = web.Lists["Executors"];
        view = list.DefaultView;
        view.XslLink = "../SPDragAndDrop/UserDragProvider.xsl";
        view.Update();

E pronto, isso é tudo, está concluído! Bem simples, não? Agora, se você criar e implantar a solução com as listas Tasks e Executors criadas anteriormente e, em seguida, criar um painel contendo exibições padrão para cada uma delas, seu painel conterá um recurso de arrastar e soltar útil.

Suporte a navegador

Atualmente, quase todos os navegadores principais, exceto o Opera, oferecem suporte ao recurso de arrastar e soltar do HTML5. Testei o Internet Explorer 9.0.8112.16421, o Chrome 16.0.912.75 e o Firefox 3.6.12, e eles estão totalmente compatíveis com a solução descrita. Espero que algumas versões mais antigas desses navegadores também funcionem. Realmente, o Safari deve funcionar, mas no momento em que escrevo este artigo, ele tem alguns bugs estranhos em sua implementação do recurso de arrastar e soltar do HTML5 que impedem que a solução funcione conforme o esperado.

O que vem a seguir?

Em minha solução, nem os modelos XSLT nem o JavaScript contêm nenhum código específico a listas, nenhuma GUID, nome, título ou qualquer outra coisa do tipo inserida no código. Portanto, essas transformações podem ser aplicadas potencialmente a quaisquer listas ou bibliotecas de documentos, e você pode adicionar suporte ao recurso de arrastar e soltar a qualquer coluna do tipo Pessoa ou Grupo. Bom, não é?

Obviamente, qualquer outro tipo de coluna pode ser transformado em arrastável da mesma maneira, para que você realmente possa criar uma solução na qual todas as células do SharePoint sejam arrastáveis e, nas páginas do painéis, os usuários serão capazes de arrastar células entre listas, o que também é útil.

Um desafio muito interessante pode ser a implementação do recurso arrastar e soltar por linha. A ideia é essencialmente a mesma, mas para chegar ao modelo correto, você deve usar formatação condicional de linhas. Isso pode ser usado para vincular elementos de lista ou, por exemplo, para alterar sua ordem. Você pode, por exemplo, fazer com que um link para a “Lixeira” no menu de início rápido funcione para aceitar o recurso de arrastar e soltar e usá-lo como uma excelente maneira de excluir itens das listas.

Muita coisa pode ser feita. Basta pensar, experimentar e tentar, seu portal do SharePoint se tornará um local muito mais amigável.

Andrey Markeev é MVP do SharePoint Server, que trabalha como desenvolvedor do SharePoint no Softline Group na Rússia. Markeev é um dos 10 especialistas em SharePoint StackExchange (bit.ly/w9e4NP), criador de vários projetos de software livre no CodePlex e é blogueiro e palestrante ativo. Você pode segui-lo no Twitter, em twitter.com/amarkeev.

Agradecemos aos seguintes especialistas técnicos pela revisão deste artigo: Michael Nemtsev e Brandon Satrom