Criando uma App SharePoint-hosted para Exibir Dados de Lista do Site

Neste post vou mostrar como criar uma App do tipo SharePoint-hosted que exibe os dados da lista de contatos existentes no site em que a App for instalada.

O primeiro passo é criar uma lista do tipo contatos e preencher os campos Sobrenome e Nome, conforme imagem 01.

LendoDadosAppJS00

Imagem 01: Lista de contatos do site

 

Agora, utilizando o Visual Studio, vamos criar um novo projeto do tipo App for SharePoint 2013, conforme a imagem 02.

LendoDadosAppJS01

Imagem 02: Criando a App para o SharePoint 2013

 

Quando criamos um projeto do tipo App for SharePoint é necessário informar a URL do site de desenvolvimento (tem que ser o template de site de desenvolvimento) e também o tipo de app, que no nosso caso é o SharePoint-hosted. Ao clicar em Validate, a tela de login do Office 365 será exibida, faça login e prossiga. A imagem 03 mostra em detalhes.

LendoDadosAppJS02

Imagem 03: Configurando o endereço e tipo da App

 

Como a App irá ler uma lista do site, é necessário abrir o arquivo AppManifest.xml e, na guia Permissions adicionar a permissão de leitura (Read) no escopo List. A lista a qual essa permissão se aplica será definida no momento da instalação da App no site.

LendoDadosAppJS03

Imagem 04: Definindo permissão para a App

 

O próximo passo é abrir o arquivo Default.aspx (dentro da pasta Pages) e editar o content place holder PlaceHolderMain conforme a listagem 01.

<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">

    <div id="display">
        <p>
            <!– The following content will be replaced with the user name when you run the app – see App.js –>
            initializing…
        </p>
    </div>
</asp:Content>

Listagem 01: Editando a página principal da app

 

Por fim, abra o arquivo App.js (na pasta Scripts) e substitua o conteúdo dele pelo conteúdo da listagem 02. Este modelo segue algumas boas práticas recomendadas para o desenvolvimento de Apps, como o uso do strict e de namespace. A estrutura de código usada neste post foi baseada no post How to: Access external data with REST in SharePoint 2013 (http://msdn.microsoft.com/en-us/library/jj163088.aspx), porém uma das modificações foi o uso do Client Object Model do SharePoint ao invés de usar REST. Não houve nenhum motivo especial para isso, apenas quis mostrar a utilização do COM de JS do SharePoint 2013.

Abaixo, na listagem 02, a variável surlWeb irá conter o endereço do site onde a App será instalada, ao invés do site da própria app. Essa alteração foi feita porque a lista de que vamos ler os dados está no site e não na App.

‘use strict’;

var context = SP.ClientContext.get_current();
var user = context.get_web().get_currentUser();

// This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model
$(document).ready(function () {

    // Namespace
    window.Contacts = window.Contacts || {};

    // Constructor
    Contacts.Grid = function (hostElement) {

        function getSPHostUrl() {
            var params = document.URL.split(‘?’)[1].split(‘&’);
            var strParams = ”;
            for (var i = 0; i < params.length; i = i + 1) {
                var singleParam = params[i].split(‘=’);
                if (singleParam[0] = "SPHostUrl")
                    return decodeURIComponent(singleParam[1]);
            }
        }

        this.surlWeb = decodeURIComponent(getSPHostUrl());
        this.hostElement = hostElement;
        this.allItems;
    }

    /// Prototype
    Contacts.Grid.prototype = {

        init: function () {

            var parentCTX = new SP.AppContextSite(context, this.surlWeb);
            var web = parentCTX.get_web();
            var list = web.get_lists().getByTitle("Contatos");

            var camlString = "<View><ViewFields>" +
                             "<FieldRef Name=’Title’ />" +
                             "<FieldRef Name=’FirstName’ />" +
                             "</ViewFields></View>";
            var query = new SP.CamlQuery();
            query.set_viewXml(camlString);

            this.allItems = list.getItems(query);

            context.load(this.allItems, "Include(Title, FirstName)");
            context.executeQueryAsync(
                Function.createDelegate(this, this.getContacts_Success),
                Function.createDelegate(this, this.getContacts_Failed));
        },

        getContacts_Success: function () {
            var listEnum = this.allItems.getEnumerator();
            var result;

            var items = [];

            items.push("<table>");
            items.push("<tr><td>Nome</td><td>Sobrenome</td></tr>");

            while (listEnum.moveNext()) {
                var currentLastName = listEnum.get_current().get_item("Title");
                var currentFirstName = listEnum.get_current().get_item("FirstName");

                items.push("<tr id=’" + currentLastName + "’><td>" +
                            currentFirstName + "</td><td>" +
                            currentLastName + "</td></tr>");
            }

            items.push("</table>");

            $(this.hostElement).html(items.join(”));
        },

        getContacts_Failed:  function (sender, args) {
            alert(args);
        }
    }

    ExecuteOrDelayUntilScriptLoaded(getContacts, "sp.js");
});

function getContacts() {
    var contacts = new Contacts.Grid($("#display"));
    contacts.init();
}

Listagem 02: Editando o arquivo App.js

 

Pronto, a App está pronta e agora vamos testá-la. No Visual Studio, faça o deploy da App e aguarde alguns instantes. O navegador será aberto e uma página parecida com a imagem 05 será exibida. Nesta página é necessário selecionar a lista Contatos para a App ter acesso de leitura da mesma. Sem essa permissão, uma mensagem de acesso negado será exibida quando a App for executada.

LendoDadosAppJS04

Imagem 05: Instalando a App e concedendo acesso a lista

 

Pronto, a App seré exibida, assim como a página da imagem 06.

LendoDadosAppJS05

Imagem 06: App sendo executada

 

A App deste post foi desenvolvida com base no SharePoint Online (Office 365) devido a facilidade deste ambiente e para demonstrar o poder da plataforma.

 

Referências

Anúncios

4 Respostas to “Criando uma App SharePoint-hosted para Exibir Dados de Lista do Site”

  1. my bearded dragon wont eat food pellets Says:

    Good day! Would you mind if I share your blog with my facebook group?
    There’s a lot of folks that I think would really appreciate your
    content. Please let me know. Many thanks

  2. Douglas Santos Says:

    Olá Fabian. Não sei se notou mas seu código está com pedaços faltando (tags abertas como por exemplo var contacts = new Contacts.Grid($(“#display ) e tentei preencher mas quando executo só recebo [object][object]. Poderia colocar o código corrigido? Obrigado.

    • Fabian André Gehrke Says:

      Olá Douglas,

      A linha que passou aparentemente está correta, existem 2 parênteses que estão sendo fechados e as aspas também. Qual tag vc está falando especificamente?

      Segue o trecho:
      function getContacts() {
      var contacts = new Contacts.Grid($(“#display”));
      contacts.init();
      }

      De qualquer forma, nao tenho mais os fontes, criei especificamente para o post.


Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: