Compartilhar via

Usar a biblioteca de códigos do cliente para acessar dados externos no SharePoint

  • Artigo

Saiba como usar o modelo de objeto cliente do SharePoint para trabalhar com objetos BCS (Business Connectivity Services) no SharePoint usando scripts baseados em navegador.

Este artigo demonstra como configurar uma lista externa que recupera dados de uma origem OData (protocolo Open Data) usando o modelo de objeto cliente no SharePoint.

Pré-requisitos para acessar dados externos usando o modelo de objeto cliente do SharePoint

Estes são os requisitos para poder desenvolver aplicativos usando o modelo de objeto do cliente do SharePoint:

Conceitos principais para saber ao acessar dados externos com o modelo de objeto cliente do SharePoint

O modelo de objeto cliente do SharePoint fornece uma maneira de acessar dados externos usando chamadas do lado do cliente que imitam as APIs do lado do servidor. Para entender como ele funciona e como usá-lo, consulte os artigos na tabela 1.

Tabela 1. Conceitos principais para usar o modelo de objeto cliente

Artigo Descrição
Realizar operações básicas usando o código de biblioteca cliente do SharePoint
Saiba como escrever código para peformar operações básicas com o CSOM (modelo de objeto cliente) do SharePoint .NET Framework.

Criar um Suplemento do SharePoint para acessar dados externos usando o modelo de objeto do cliente

Os procedimentos a seguir mostram como definir um Suplemento do SharePoint e configurar uma página da Web para tornar solicitações usando os métodos de modelo de objeto do cliente e objetos para recuperar dados de uma fonte de dados externa.

Criar um Suplemento do SharePoint

  1. Abra o Visual Studio 2012.

  2. Crie um projeto de Aplicativo para o SharePoint.

  3. Specify the app settings, including app name, the site URL for debugging the app, and how you want to host the app (Autohosted, Provider-hosted, SharePoint-hosted). Para obter mais informações sobre opções de hospedagem, confira Escolher padrões para desenvolver e hospedar seu Suplemento do SharePoint.

  4. Clique em Concluir para criar o aplicativo.

Gerar o tipo de conteúdo externo

  1. No Solution Explorer, abra o menu de atalho para o projeto e escolha Adicionar, tipos de conteúdo para a fonte de dados externa.

  2. No Assistente para Especificar a fonte do OData, insira a URL do serviço OData que você deseja se conectar. Nesse caso, você usará a fonte Northwind OData publicada em http://www.odata.org/ecosystem. Defina a URL do serviço OData como http://services.odata.org/Northwind/Northwind.svc/

    Especifique um nome para a fonte de dados e escolha Avançar.

  3. Será exibida uma lista de entidades que são expostos pelo OData Service. Escolha a entidade Customers. Certifique-se de que a caixa de seleção criar instâncias de lista para as entidades de dados selecionada (exceto as operações de serviço) está marcada.

  4. Escolha Concluir.

Exemplo de código: adicionar scripts e arquivos HTML para a página Default. aspx

Neste ponto, você tem o tipo de conteúdo externo e uma lista externa que exibe os dados da fonte de Netflix OData.

O próximo objetivo é modificar a página default.aspx que você criou quando criou seu aplicativo. Você adiciona um contêiner que manterá os resultados da consulta executada com as cargas da página. Executando os scripts no evento de carregamento de página, você garante que o script será executado sempre que a página for navegada, e as chamadas de modelo de objeto cliente resultantes serão feitas à fonte OData do Netflix para adicionar registros à página.

Adicionar o contêiner à página Default.aspx

  1. No Solution Explorer, abra a página aspx localizada no módulo páginas.

  2. Adicione o seguinte elemento div à página:

  
<div id="displayDiv"></div>
  1. Salve a página.

Finalmente, você deve adicionar código para o arquivo App.js que é executado quando a página for carregada.

Para modificar o arquivo App.js para tornar o cliente chama o modelo de objeto

  1. Abra o arquivo de App.js no módulo Scripts do seu projeto do SharePoint.

  2. Cole o seguinte código no final do arquivo.

  $(document).ready(function () {

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

    // Constructor
    AppLevelECT.Grid = function (hostElement, surlWeb) {
        this.hostElement = hostElement;
        if (surlWeb.length > 0 &amp;&amp; surlWeb.substring(surlWeb.length - 1, surlWeb.length) != "/")
            surlWeb += "/";
        this.surlWeb = surlWeb;
    }

    // Prototype
    AppLevelECT.Grid.prototype = {

        init: function () {

            $.ajax({
                url: this.surlWeb + "_api/lists/getbytitle('Customer')/items?$select=BdcIdentity,CustomerID,ContactName",
                headers: {
                    "accept": "application/json",
                    "X-RequestDigest": $("#__REQUESTDIGEST").val()
                },
                success: this.showItems
            });
        },

        showItems: function (data) {
            var items = [];

            items.push("<table>");
            items.push('<tr><td>Customer ID</td><td>Customer Name</td></tr>');

            $.each(data.d.results, function (key, val) {
                items.push('<tr id="' + val.BdcIdentity + '"><td>' +
                    val.CustomerID + '</td><td>' +
                    val.ContactName + '</td></tr>');
            });

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

            $("#displayDiv").html(items.join(''));
        }
    }

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

function getCustomers() {
    var grid = new AppLevelECT.Grid($("#displayDiv"), _spPageContextInfo.webServerRelativeUrl);
    grid.init();
}

Pressione F5 para implantar o aplicativo no SharePoint. Navegue até a página Default.aspx no aplicativo e uma lista de clientes aparece na página.

Confira também