[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] CSS Registration (Master html Sharepoint 2013)

Fala galera, beleza?
Rick que vos fala depois de um bom tempo sem passar por aqui! rs

Trago uma novidade que algum tempo estamos utilizando por padrão em nossos desenvolvimentos, que é a aplicação destas maravilhosas tags do Sharepoint: CSS Registration e ScriptLink.

Pra quem ainda não viu um post anterior que fiz, estas tags são responsáveis por tornar dinâmicos os links inseridos em masters, pagelayouts ou páginas.

EXEMPLO:

<link href="/style library/css/main.css" rel="stylesheet" type="text/css"></link>

Para tornar o link acima dinâmico, ou seja, para que caso esteja em um subsite, você não precise fazer outra chamada modificando o href do link, utilizamos a tag "CSSRegistration".

MODELO:

<sharepoint:cssregistration after="corev4.css" name="<$SPUrl:~SiteCollection/Style Library/css/structure.css >" runat="server"/>

Beleza? beleza! mas não para por ai! rs

No SharePoint 2013, existe um novo modelo de master que é feito em HTML facilitando a manutenção. Se trata de uma minimal.master em html com códigos um pouco difetentes dos que estamos acostumados a ver na .master. No entando,  a escrita muda um pouco, pois os controles do sharepoint e algumas tags precisam ser adicionadas dentro de "contents" que são comentários que a este modelo de master utiliza pra ler sua estrutura.

para controles como o ScriptLink, CSSRegistration que ficam no "header" utilizamos o seguinte comentário:

<!--SPM:<Tag aqui dentro>-->

EXEMPLO:

<!--SPM:<SharePoint:CssRegistration name="&lt;% $SPUrl:~SiteCollection/Style Library/css/structure.css %&gt;" After="corev4.css" runat="server"/>-->

Perceba que, ao inserir-mos a tag CssRegistration anterior, alteramos o "<" por "&lt;" e ">" por "&gt;" por questões de leitura do Sharepoint.

Uffa, terminamos!

Lembrando que o mesmo serve para o ScriptLink!

Abraçõs e até a próxima! :D

Continuar lendo

[SP] Habilitar image rendition Sharepoint 2013

Para habilitar o image rendition em sua aplicação, basta modificar o web.config da mesma.
Procure pela tag BlobCache, e altere o atributo enabled para true, como no exemplo abaixo :

<BlobCache enabled="true" ... />

Continuar lendo

[SP] Desabilitando site mobile Sharepoint 2013/2010

Para desabilitar o redirecionamento para o site mobile nativo do SharePoint é necessário adicionar a seguinte tag ao web.config de sua aplicação dentro da tag <system.web> :

<System.web>

  <browserCaps>

    <result type="System.Web.Mobile.MobileCapabilities, System.Web.Mobile, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"/>

    <filter>isMobileDevice=false</filter>

  </browserCaps>

...

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

[SP] Variavel para links

As vezes quando você deseja criar um campo URL no SharePoint, ele automaticamente ao receber o valor "http://" monta uma tag <a href"">, fazendo com que seu código no XSL quebre. Até porque se você quiser inserir o título do ítem no atributo title, precisará montar o link com a tag <a href>, caso não, pode apenas trazer o value-of do próprio campo @URL.

sendo asism, montei uma variavel que verifica se contém a string "http" no campo, se sim, ele faz um substring no valor do campo e deixa só o link relativo, se não, ele traz o valor normal.

<xsl:variable name="href">
<xsl:choose>
<xsl:when test="substring-after(@URL,'href=&quot;') = ''">
<xsl:value-of select="@URL"/>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="substring-before(substring-after(@URL,'href=&quot;'),'&quot;')"/>
</xsl:otherwise>
</xsl:choose>
</xsl:variable>

Continuar lendo

[SP] Filtro de Distinct

O Distinct é utilizado para que você possa efetuar filtros no seu código XSL, de forma que consiga trazer apenas uma vêz uma informação.

Ficou confuso? vamos exemplificar:

Atualmente você tem uma lista de Colaboradores em seu site, e tem também uma lista de Áreas, na qual sua lista de Colaboradores faz uma consulta, ou seja, a cada novo Colaborador inserido na lista você precisa coloca-lo em uma área. Na exibição dos colabores você deseja filtrar pela área do mesmo, trazendo:

TI:
José, Fábio e Antônio;

RH:
Flávia, Rafael;

Sendo assim, você fará um for-each filtrando pela área, e com isso o distinct irá trazer a área apenas uma vez, caso você não faça um distinct para montrar uma estrutura parecida com a que citei acima, ele iria trazer várias vezes área de acordo com a quantidade de ítens exibidos em cada uma delas, ou seja, em TI iria trazer a mesma informação 3 vezes, para José, Fábio e Antônio.

para fazer o disctinct basta inserir o código abaixo no for-each, filtrando pelo campo desejado:

<xsl:for-each select="$AllRows[not(@AreaColaboradores=following::Row/@AreaColaboradores)]"></xsl:for-each>
Até a próxima!

Continuar lendo

[SP] Logo e Títulos Dinâmicos

Existe um controle na masterpage nativa, que de acordo com as configurações definidas em seu site, exibirá o Logo e o título inserido. Para que você não tenha que fazer isso à mão e futuramente precisar alterar o código, esta tag facilita no caso de uma intranet, onde o cliente pode ter a opção de alterar o logo e o título caso queira, sem a necessidade de digitar uma tag se quer.

Para encontrar essa tag "Mágica", pesquise pelo código: "SharePoint:SiteLogoImage":

<SharePoint:SiteLogoImage CssClass="ms-siteicon-img" name="onetidHeadbnnr0" id="onetidHeadbnnr2" LogoImageUrl="/_layouts/15/images/siteIcon.png?rev=23" runat="server"/>

Continuar lendo

[SP] Botão de Salvar com redirecionamento

Em alguns casos, precisamos que um formulário nos leve para uma página expecífica após salvar as informações.

<input type="button" value="Save" name="btnSave" onclick="javascript: {ddwrt:GenFireServerEvent('__commit;__redirect={nome do site}')}"/>

Este input substitui o controle nativo do sharepoint de salvar ítens na lista.

Continuar lendo

[SP] PlaceHolders

Basicamente, trabalhar com PlaceHolders no SharePoint seria a mesma coisa que trabalhar com controles php no wordpress ou controles xml no blogger. O PlaceHolder é responsável por montar "blocos" dinâmicos no site, facilitando a manutenção. Os mesmos podem ser aplicados em qualquer lugar dentro do BodyContainer, aonde você deseja exibi-lo.

Basicamente, funciona da seguinte forma:

Inserir a chamada do PlaceHolder na masterpage:
<asp:ContentPlaceHolder id="NomeDoPlaceHolder" runat="server" />

Agora precisamos montar o PlaceHolder acima para exibir o conteúdo no local desejado, ou seja, aonde foi inserido o código acima.

Montando PlaceHolder em pagelayout para exibição do conteúdo:
<asp:Content ContentPlaceHolderID="NomeDoPlaceHolder" runat="server">
</asp:Content>

 Dentro do código acima, você vai inserir o conteúdo que deseja exibir, seja um html, um editor de conteúdo, editor de script e etc.

OBS: caso não tenha a chamada na master, pode ocorrer erro, e não se esquecer do runat="server", pois ele é essencial para a exibição do PlaceHolder.

Continuar lendo

[SP] Scriptlinks & CSS Registration

Nem todos sabem, mas para adicionar referências de CSS e Javascript na masterpage, devemos utilizar controles padrões do SharePoint para que assim, os mesmos se tornem "dinãmicos" de acordo com a estrutura do site, sendo assim, ao efetuar um back ou uma restauração, os links não estarão fixos e não terás problemas com arquivos não carregados em seu site. Ambos os códigos devem ser adicionados sempre no header da página, ou seja, dentro do PlaceHolderAdditionalPageHead.

CSS Registration:

 <SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/Style Library/css/reset.css %>" After="corev4.css" runat="server"/>  

ScriptLink:

<SharePoint:ScriptLink language="javascript" name="~SiteCollection/Style Library/js/jquery.js" runat="server" />

Os dois casos em vermelho nos mostram os endereços relativos dos arquivos, você só precisará ficar atento caso seja um SiteCollection ou não.

Bons códigos! :D

Continuar lendo