[SP & AngularJS] Paginação de n itens com Sharepoint e AngularJS

Com a nova tendencia da web com tecnologias mais modernas e rápidas, iniciamos um projeto de atrela-las ao Sharepoint, utilizando somente o Front-End.

Para iniciar começamos com o AngularJS, utilizei uma api pronta de loading e pagination para exibir n dados vindo do webservice que não teria como fazer paginação via rest api.

O refinador de resultado, trata o conteúdo carregado pelo angular, filtrando por todas as colunas.

Código de chamada do serviço, a função X2JS e para tranformar XML em JSON, utilizado no retorno do AngularJS.

var queryAPI = "/_vti_bin/PNA.Intranet.Worksite.Services/DataService.svc/" + $attrs.urlapi + "?Text=" + param

        $http.get(_spPageContextInfo.siteAbsoluteUrl + queryAPI, {
                withCredentials: true
            })
            .success(function(data) {
                var x2js = new X2JS();
                var aftCnv = x2js.xml_str2json(data);


                if (aftCnv.SearchResults._ItemCount == 1) {
                    var arrayUmItem = new Array();
                    arrayUmItem.push(aftCnv.SearchResults.Document != undefined ? aftCnv.SearchResults.Document : aftCnv.SearchResults.Workspace)
                    $scope.items = arrayUmItem;
                } else {
                    $scope.items = aftCnv.SearchResults.Document != undefined ? aftCnv.SearchResults.Document : aftCnv.SearchResults.Workspace;

                }

                if ($scope.items == undefined) {
                    $scope.vazio = '"Nenhum resultado encontrado no iManage"';
                } else {
                    $scope.vazio = ""
                }
            })
            .error(function(data, status) {
                var data = data || "Request failed";
                var status = status;
                alert(data);
            });

Ele foi feita no modelo webpart , editor de script

Git com o código completo.

Continuar lendo

[SP] XSL Import (Update)

Para tornar mais facil a customização de uma WebPart ou DataView, nós utilizamos o XSL Import. Trata-se de um código adicionado na customização da webpart, inserindo um arquivo externo para a edição do XSL.

EXEMPLO:
Temos a webpart customizada, com aquele código XSL gigantesco nativo. Nós deletaremos a tag "<xsl:stylesheet>" inteira, substituindo-a pelo código abaixo:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:ddwrt2="urn:frontpage:internal">
   <xsl:import href="/Style Library/XSL Style Sheets/NomeDoArquivo.xsl"/>
   <xsl:template match="/">
    <xsl:apply-imports/>
   </xsl:template>
 </xsl:stylesheet>

Basicamente estamos dizendo que, ao carregar a webpart ele irá trazer informações deste arquivo externo que está no xsl:import. Estes arquivos .xsl ficam dentro da Style Library > XSL Style Sheets.

UPDATE DO ROLÊ!
Outra dica importante que descobrimos:
Dentro deste arquivo .xsl existe um código padrão a ser adicionado, abaixo segue um modelo a ser utilizado:

<xsl:stylesheet version="1.0" exclude-result-prefixes="x d xsl msxsl cmswrt ddwrt" xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" xmlns:cmswrt="http://schemas.microsoft.com/WebParts/v3/Publishing/runtime" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime">
  <xsl:include href="/_layouts/15/xsl/main.xsl"/>
  <xsl:include href="/_layouts/15/xsl/internal.xsl"/>
 <xsl:include href="/Style Library/XSL Style Sheets/Utils.xsl"/>
 <xsl:param name="AllRows" select="/dsQueryResponse/Rows/Row[$EntityName = '' or (position() &gt;= $FirstRow and position() &lt;= $LastRow)]"/>
 <xsl:param name="dvt_apos">'</xsl:param>
 <xsl:template match="/">
  
 </xsl:template>
</xsl:stylesheet>

Neste modelo acima, estamos usando uma tag diferente na primeira linha. esta tag stylesheet não insere atributos do SharePoint em seu html, deixando ele muito mais "clean" e facil de ler. Também deixei uma tag chamada <xsl:include que serve para fazer chamada de outro XSL dentro deste, ou seja, usamos para chamar um utils.xsl onde colocamos vários templates de XSL customizados.

E é isso, muito útil e facil de trabalhar, afnal, gostamos de códigos html mais limpos, correto? :D

Abraços!

Continuar lendo

[SP] Webpart com XSL Import

Para tornar uma webpart mais facil de se trabalhar, podemos utilizar o XSL Import, que nada mais é do que anexar um arquivo .XSL externo a uma webpart customizada. Dessa forma, podemos editar o conteúdo XSL através de um arquivo único sem a necessidade de abrir uma página ou editar a webpart diretamente.

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:ddwrt2="urn:frontpage:internal">
 <xsl:import href="/Style Library/xslt/PaginaUnidades.xsl"/>
 <xsl:template match="/">
  <xsl:apply-imports/>
 </xsl:template>
</xsl:stylesheet>

Continuar lendo