Geral SharePoint SharePoint 2013

Criando uma webpart para recuperar itens de lista pelo SharePoint Framework

Olá pessoal!

Hoje vamos dar continuidade ao desenvolvimento do crud completo utilizando uma webpart no SharePoint Framework. Se você ainda não conhece o SharePoint Framework, ou precisa refazer os passos de instalação e configuração de ambiente ou criação da sua primeira webpart no SharePoint framework, você pode acompanhar um dos seguintes posts:

O nosso objetivo agora é criar uma webpart que faça consulta de dados do SharePoint utilizando REST API caso estejamos testando diretamente pelo SharePoint ou consulte dados mock caso estejamos testando localmente.

O código que vamos demonstrar abaixo está no GitHub:

https://github.com/douglasromao/SharePointFramework

Usando os posts acima de referência, e com o ambiente configurado, vamos começar a criação da nossa webpart.

Abra o NodeJS command prompt e navegue até a pasta onde deseja criar a solution com a webpart:

Digite o comando de criação de solution do yeoman:

yo @microsoft/sharepoint


Vamos criar nossa solução com o nome de getListItems-SPFx, vamos criar em uma Subfolder, sem nenhum framework javascript e o nome da nossa webpart será getListItemsWebPart.

Agora vamos abrir o Visual Studio code:

Abra a pasta da sua webpart:

Primeiro, vamos criar duas interfaces dentro da nossa webpart, uma interface para ter as propriedades do nosso objeto item (que armazenará os dados do SharePoint) e outra para armanezar uma lista desses objetos.

Dentro da pasta src > webparts > getListItemsWebPart, abra o arquivo GetListItemsWebPartWebPart.ts:

Veja que como é uma webpart sample, já vem bastante conteúdo dentro dela. Procure pela área superior onde temos os imports e exports, e coloque o seguinte código:

export interface ISPLists {
  value: ISPList[];
}

export interface ISPList {
  Title: string;
}
A interface ISPList tem a propriedade Title que virá do SharePoint e a interface ISPLists é um array de objetos ISPList.

Agora, vamos começar criando a classe responsável por gerar o Mock para quando estivermos testando localmente.

Dentro da pasta src > webparts > getListItemsWebPart, clique com o botão direito e vá em New File. Dê o nome desse arquivo de MockHttpClient.ts.

Essa será nossa classe responsável pelos dados mockados.

Vamos colocar o seguinte código:

import { ISPList } from './GetListItemsWebPartWebPart';  

export default class MockHttpClient {  

    private static _items: ISPList[] = [];  

    public static get(restUrl: string, options?: any): Promise<ISPList[]> {  

      return new Promise<ISPList[]>((resolve) => {  

            resolve(MockHttpClient._items);  

        });  

    }  

}

Perceba que na primeira linha importamos o código da webpart para termos a interface de ISPList disponível para utilizarmos.

Basicamente o código acima cria a classe de MockHttpClient, instancia um novo array de ISPList jogando esse novo array na variável privada _items e possui um método de get para esse array.

Agora vamos voltar para o código da nossa webpart, volte para o arquivo GetListItemsWebPartWebPart.ts:

Vamos importar agora os recursos que vamos precisar para essa webpart, que é basicamente o SP-HttpClient (para as requisições REST API), o SP-core-library (para trabalharmos o contexto quando estivermos testando dentro do SharePoint) e o MockHttpClient (para fazermos a chamada quando for mock). Adicione as seguintes linhas de código acima das interfaces que criamos:

import {
  SPHttpClient
} from '@microsoft/sp-http';

import {
  Environment,
  EnvironmentType
} from '@microsoft/sp-core-library';

import MockHttpClient from './MockHttpClient';
Agora, dentro da classe da nossa webpart, vamos começar a construir o código que vai consultar tanto o SharePoint diretamente quanto os dados mockados, de acordo com o local onde ele estiver testando.
Vamos começar instanciando duas variáveis, uma para armazenar o nome da Lista do SharePoint que iremos consultar os dados e outra para armazenar um texto para sabermos quando estamos testando localmente ou quando estamos testando no SharePoint.
(No nosso exemplo a lista que vou consultar os dados é a de Cidades)
Vamos criar agora os dois métodos de consulta de dados, um para consultar os dados do mock e um para consultar da REST API do SharePoint diretamente na nossas lista:
//Método responsável por recuperar os dados do SharePoint através de uma requisição REST
  private _getListData(): Promise<ISPLists> {
    //Executando a requisição REST de recuperar os itens da Lista e retornando o response em formato JSON
    return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/web/lists/GetByTitle('` + this.nomeLista  +`')/Items`, SPHttpClient.configurations.v1)
      .then((response: Response) => {
        debugger;
        return response.json();
      });
  }

  //Método responsável por gerar conteúdo Mock para testes offline
  private _getMockListData(): Promise<ISPLists> {
    return MockHttpClient.get(this.context.pageContext.web.absoluteUrl).then(() => {
      const listData: ISPLists = {
        value:
        [
          { Title: 'Titulo de Teste 1' },
          { Title: 'Titulo de Teste 2' },
          { Title: 'Titulo de Teste 3' }
        ]
      };
      return listData;
    }) as Promise<ISPLists>;

  }
No método _getListData, vocês podem ver que vamos executar uma requisição de get da REST API utilizando o método de Items e ao fim retornamos o response da requisição formatado em Json e convertido para a nosso array de ISPList.
No método _getMockListData, vocês podem ver que só estamos criando um novo array com alguns valores de teste e retornando esse array.
Vamos criar agora um método que vai receber o resultado dessas consultas (ou seja, um array de ISPList), formatar isso em uma tabela HTML e renderizar esse HTML em uma div que vamos criar na tela.
//Método responsável por renderizar a lista de itens gerada e formatá-la em uma tabela
  private _renderList(items: ISPList[]): void {
    let html: string = '<table class="TFtable" border=1 width=100% style="border-collapse: collapse;">';
    html += `<th>Titulo</th>`;
    items.forEach((item: ISPList) => {
      html += `  
          <tr>  
            <td>${item.Title}</td>  
          </tr>  
        `;
    });

    html += `</table>`;

    //Recuperando e setando o elemento da página que vai receber o html gerado
    const listContainer: Element = this.domElement.querySelector('#spListContainer');
    listContainer.innerHTML = html;
  }
 O elemento spListContainer será criado quando criarmos o código do html da webpart e é onde a nossa tabela de resultado será renderizada.
Vamos agora criar o método responsável por validar em qual ambiente o código está sendo testado e dependendo de qual for a opção, direciona o código para consultar do mock ou do SharePoint.
//Renderizando de forma assíncrona o conteúdo a mostrar na WebPart
  private _renderListAsync(): void {

    //Vamos verificar se o código está sendo executado localmente ou direto dentro do SharePoint
    if (Environment.type === EnvironmentType.Local) {
      this.buscando = "Mock local";
      
//O código está rodando localmente, vamos então mostrar os dados Mock recuperados da classe MockHttpClient.ts
      this._getMockListData().then((response) => {
        //Chamando o método responsável por renderizar os resultados em um html
        this._renderList(response.value);
      });
    }
    else {
      this.buscando = "SharePoint Online";
      
//O código está rodando direto dentro do SharePoint, vamos então mostrar os dados da lista do SharePoint, recuperados pelo método getListData
      this._getListData()
        .then((response) => {
          //Chamando o método responsável por renderizar os resultados em um html
          this._renderList(response.value);

        });

    }

    //Recuperando e setando o elemento da página que vai receber o html informando se estamos buscando local ou no SharePoint
    const divBuscando: Element = this.domElement.querySelector('#buscando');
    divBuscando.innerHTML = this.buscando;
  }

O elemento #buscando será criado quando criarmos o código do html da webpart e é onde vamos mostrar um texto falando se o código está sendo executado localmente ou no SharePoint.Agora para finalizar, precisamos criar o html da nossa webpart e fazer a requisição do método _renderListAsync, que é o responsável por processar a solicitação.

No método render, vamos colocar o seguinte código:

this.domElement.innerHTML = `
                     Welcome to SharePoint Framework DevelopmentRecuperando dados de uma lista SharePoint (em caso de estar testando no SharePoint) e recuperando dados de um Mock (em caso de estar testando localmente)

 

</div>

Exemplo: Lista de Cidades

<br>

 

 

</div>         </div>`;            this._renderListAsync();

Pronto, nossa webpart está pronta!

Para testar, vamos rodar o comando gulp serve no NodeJS command prompt:

Vamos abrir a página Workbench (Caso não lembre como fazer isso, veja esse post)  dentro do nosso portal SharePoint para testar o código no SharePoint e a nossa página localhost para testar a página local.

Adicione a webpart getListItemsWebPart na página e o resultado será esse:

No localhost o resultado será uma lista com os três resultados que havíamos colocado como mock e o texto “Mock local” que é o texto que setamos quando o teste está sendo feito localmente.

No nosso portal SharePoint o resultado será uma lista com os resultados encontrados na nossa lista do SharePoint e o texto de “SharePoint Online” para sabermos que o teste está sendo feito no SharePoint.

Por hoje é isso pessoal, no próximo post vamos ver como criar um novo item na lista para continuarmos criando nosso primeiro crud com o SharePoint Framework.

Até a próxima!

Código no GitHub:

https://github.com/douglasromao/SharePointFramework

Anúncios

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 )

Foto do Google+

Você está comentando utilizando sua conta Google+. 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 )

Conectando a %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.