Como usar web parts personalizadas no SharePoint

As web parts personalizadas no SharePoint permitem criar componentes reutilizáveis e sob medida que aprimoram a colaboração, melhoram a experiência do usuário e atendem a necessidades específicas de negócios. Seja para construir um painel corporativo, integrar serviços de terceiros ou adicionar formulários personalizados, as web parts personalizadas são ferramentas essenciais para usuários avançados e desenvolvedores.

Neste artigo, você aprenderá o que são web parts personalizadas, como criá-las usando o SharePoint Framework (SPFx) e como utilizá-las de forma eficaz em páginas modernas.

O que são web parts personalizadas no SharePoint?

As web parts são blocos de construção das páginas do SharePoint. Ele já oferece várias web parts prontas, como texto, imagem, lista, calendário, entre outras. As web parts personalizadas, por outro lado, são componentes que os desenvolvedores criam para atender às necessidades exclusivas de uma organização. Elas podem incluir funcionalidades avançadas como:

• Visualização de dados
• Integração com APIs externas
• Formulários e entradas personalizadas
• Elementos interativos

Essas web parts são construídas usando o SharePoint Framework (SPFx) — um modelo de desenvolvimento moderno baseado em TypeScript, React e outras tecnologias abertas da web.

Pré-requisitos

Para desenvolver e utilizar web parts personalizadas, é necessário ter os seguintes itens configurados:

• Site SharePoint do Office 365
• Node.js (versão LTS) – Instale em nodejs.org
• Yeoman e gerador SharePoint – Para criar a estrutura do projeto
• Gulp CLI – Para compilar e executar a web part
• Editor de código (ex: Visual Studio Code)

Execute os seguintes comandos para instalar as ferramentas:

npm install -g yo gulp

npm install -g @microsoft/generator-sharepoint

Como criar uma web part personalizada

1. Criar o projeto

Abra o terminal e execute:

yo @microsoft/sharepoint

Responda às perguntas:

• Nome da solução: minha-webpart-personalizada
• Destino: Apenas SharePoint Online
• Tipo de componente: WebPart
• Framework: React (ou sem framework, se preferir)

O Yeoman irá gerar a estrutura do projeto.

2. Desenvolver a web part

Navegue até a pasta gerada e abra o projeto no Visual Studio Code:

cd minha-webpart-personalizada

code .

Personalize a web part no arquivo:

src\webparts\[NomeDaWebPart]\components\[NomeDaWebPart].tsx

Por exemplo, você pode modificar o componente para exibir dados de uma lista do SharePoint.

3. Testar a web part localmente

Execute o servidor local:

gulp serve

Isso abrirá o Workbench em https://localhost:4321/temp/workbench.html, onde é possível visualizar a web part.

4. Publicar a web part

Para publicar no SharePoint:

1. Criar o pacote da solução:

gulp bundle –ship

gulp package-solution –ship

2. Enviar o arquivo .sppkg para o Catálogo de Aplicativos do SharePoint.
3. Adicionar o aplicativo ao seu site e inserir a web part em qualquer página moderna.

Como usar a web part em uma página

Depois de publicada:

1. Acesse seu site SharePoint.
2. Clique em Editar em qualquer página moderna.
3. Clique no botão + e selecione sua web part personalizada.
4. Configure as propriedades conforme necessário.
5. Salve e publique a página.

Boas práticas

• Mantenha a interface responsiva: use frameworks modernos como o Fluent UI.
• Gerencie permissões corretamente: respeite as permissões dos usuários e utilize as APIs do Microsoft Graph ou REST com cuidado.
• Use verificações de ambiente: evite carregar dados reais durante testes locais.
• Teste em vários navegadores: garanta compatibilidade e boa experiência em diferentes dispositivos.

Conclusão

As web parts personalizadas no SharePoint permitem que as organizações ultrapassem os limites das funcionalidades padrão e criem soluções sob medida. Utilizando o SPFx, os desenvolvedores podem construir experiências ricas e integradas diretamente no ambiente do SharePoint. Seja para melhorar a colaboração, exibir dados analíticos ou integrar serviços externos, as web parts personalizadas oferecem flexibilidade e controle inigualáveis.

Veja também nosso artigo sobre SharePoint Web Parts personalizadas e seus benefícios.