Vamos criar um artigo passo a passo para gerar uma web part padrão no SharePoint Framework (SPFx), apagar os arquivos padrão e recriar a web part do nosso jeito, utilizando PnPjs para realizar operações CRUD em listas do SharePoint.

Criando uma Web Part Personalizada no SharePoint com PnPjs

Neste artigo, vamos abordar como:

1. Criar uma web part padrão utilizando o SharePoint Framework (SPFx).
2. Apagar os arquivos gerados automaticamente.
3. Criar novos arquivos à nossa maneira, integrando o PnPjs para realizar operações CRUD (Create, Read, Update, Delete) em uma lista do SharePoint.

1. Gerando uma Web Part Padrão no SPFx

O primeiro passo é garantir que você tenha o Node.js e o Yeoman instalados. Certifique-se também de que o pacote do generator-sharepoint esteja instalado.

Passos para criar a web part:

1. Abra o terminal e navegue até o diretório onde deseja criar o projeto.
2. Execute o comando abaixo para gerar a web part:

   yo @microsoft/sharepoint

3. Quando solicitado, insira as informações do projeto. As configurações que você pode utilizar:

• What is your solution name?: PnPjsCrudDemo
• Which baseline packages do you want to target?: SharePoint Online only (latest)
• Where do you want to place the files?: Use the current folder
• Do you want to allow the tenant admin to choose if the component can be isolated?: No
• Will the components in the solution require permissions to access web APIs?: No
• Which framework would you like to use?: React

3. O gerador do Yeoman criará uma estrutura de pastas com diversos arquivos.

Estrutura Gerada:

Os arquivos gerados incluem:

• src/webparts/PnPjsCrudDemo/PnPjsCrudDemoWebPart.ts
• src/webparts/PnPjsCrudDemo/components/PnPjsCrudDemo.tsx
• src/webparts/PnPjsCrudDemo/components/IPnPjsCrudDemoProps.ts

Você verá um código básico que serve como base para o desenvolvimento da sua web part.

2. Apagando os Arquivos Padrão

Agora, vamos remover os arquivos padrão para criar uma estrutura mais personalizada:

• Delete os seguintes arquivos:
• PnPjsCrudDemoWebPart.ts
• PnPjsCrudDemo.tsx
• IPnPjsCrudDemoProps.ts

Isso limpará o código da web part gerada, permitindo que criemos do nosso jeito, utilizando o PnPjs.

3. Criando a Web Part com PnPjs

Agora vamos recriar a web part do zero, implementando o PnPjs para interagir com listas do SharePoint.

Passos:

1. Criar o arquivo da web part: Vamos criar novamente o arquivo PnPjsCrudDemoWebPart.ts, que será o ponto de entrada da nossa web part:

   import { spfi, SPFx } from "@pnp/sp";
   import { Version } from '@microsoft/sp-core-library';
   import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
   import * as React from 'react';
   import * as ReactDom from 'react-dom';
   import { PnPjsCrudDemo } from './components/PnPjsCrudDemo';
   import { IPnPjsCrudDemoProps } from './components/IPnPjsCrudDemoProps';

   export default class PnPjsCrudDemoWebPart extends BaseClientSideWebPart<{}> {

     public onInit(): Promise<void> {
       spfi().using(SPFx(this.context));  // Inicializa PnPjs com o contexto do SharePoint
       return super.onInit();
     }

     public render(): void {
       const element: React.ReactElement<IPnPjsCrudDemoProps> = React.createElement(
         PnPjsCrudDemo,
         {
           context: this.context
         }
       );

       ReactDom.render(element, this.domElement);
     }
   }

2. Criar o componente React: Agora, recrie o componente PnPjsCrudDemo.tsx para que ele possa realizar operações CRUD em uma lista do SharePoint:

   import * as React from 'react';
   import { spfi } from "@pnp/sp";
   import "@pnp/sp/lists";
   import "@pnp/sp/items";
   import { IPnPjsCrudDemoProps } from './IPnPjsCrudDemoProps';

   export const PnPjsCrudDemo: React.FC<IPnPjsCrudDemoProps> = (props) => {
     const [items, setItems] = React.useState<any[]>([]);

     React.useEffect(() => {
       const fetchItems = async () => {
         const sp = spfi().using(SPFx(props.context));
         try {
           const listItems = await sp.web.lists.getByTitle('ListaDeExemplo').items();
           setItems(listItems);
         } catch (error) {
           console.error("Erro ao buscar itens: ", error);
         }
       };

       fetchItems();
     }, []);

     return (
       <div>
         <h2>Itens da Lista</h2>
         <ul>
           {items.map(item => (
             <li key={item.Id}>{item.Title}</li>
           ))}
         </ul>
       </div>
     );
   };

3. Criar o arquivo de props: Por último, recrie o arquivo IPnPjsCrudDemoProps.ts para definir as propriedades passadas para o componente:

   import { WebPartContext } from "@microsoft/sp-webpart-base";

   export interface IPnPjsCrudDemoProps {
     context: WebPartContext;
   }

4. Executando o Projeto

Agora que os arquivos estão prontos, basta rodar o projeto localmente para verificar se está funcionando corretamente.

1. No terminal, execute:

   gulp serve

2. Acesse o navegador e veja a web part funcionando. Ela deve buscar os itens da lista ListaDeExemplo e exibi-los.

5. Explicação do Código

PnPjs Initialization:

No arquivo PnPjsCrudDemoWebPart.ts, o PnPjs é inicializado usando o contexto do SharePoint, com a linha:

spfi().using(SPFx(this.context));

Fetching List Items:

No arquivo PnPjsCrudDemo.tsx, utilizamos o PnPjs para buscar os itens da lista. O código abaixo acessa a lista chamada ListaDeExemplo e obtém os itens:

const listItems = await sp.web.lists.getByTitle('ListaDeExemplo').items();

Substitua 'ListaDeExemplo' pelo nome da lista que você deseja acessar.

Conclusão

Agora você tem uma web part personalizada que interage com listas do SharePoint usando o PnPjs. Esse processo permite que você crie uma web part do zero, controlando cada aspecto da implementação.