Para criar uma lista de itens do SharePoint usando Fluent UI no SharePoint Framework (SPFx), o processo envolve três partes principais:
- Configuração do ambiente SPFx.
- Obtenção dos dados da lista de SharePoint.
- Renderização dos dados utilizando componentes do Fluent UI.
Aqui está um passo a passo detalhado:
1. Configuração do ambiente SPFx
Primeiro, certifique-se de ter um ambiente de desenvolvimento SPFx configurado com Node.js, Yeoman e o gerador SPFx:
- Crie uma nova Web Part SPFx:
yo @microsoft/sharepoint
- Instale as bibliotecas Fluent UI e PnPjs:
Você vai precisar do Fluent UI para os componentes e do PnPjs para acessar a lista do SharePoint.
npm install @fluentui/react @pnp/sp
2. Obtenção dos dados da lista do SharePoint
Agora vamos configurar o PnPjs para obter os dados da lista.
- Configurar PnPjs no projeto:
No arquivoPnPGetStartList2WebPart.ts, configure a inicialização do PnPjs:
import { spfi, SPFx } from "@pnp/sp";
import "@pnp/sp/webs";
import "@pnp/sp/lists";
import "@pnp/sp/items";
export default class PnPGetStartList2WebPart extends BaseClientSideWebPart<IPnPGetStartList2Props> {
private _sp: SPFI;
protected onInit(): Promise<void> {
this._sp = spfi().using(SPFx(this.context));
return super.onInit();
}
public render(): void {
// Your render code here
}
}
- Obtenha os itens da lista:
Dentro da funçãorender, use o PnPjs para buscar os itens de uma lista específica. Exemplo:
private async _getListItems(): Promise<void> {
try {
const items = await this._sp.web.lists.getByTitle("NomeDaSuaLista").items();
console.log(items); // Exibir no console para verificar os dados
} catch (error) {
console.error("Erro ao buscar itens da lista", error);
}
}
public render(): void {
this._getListItems();
this.domElement.innerHTML = `<div id="listContainer"></div>`;
}
3. Renderização dos dados com Fluent UI
Agora que temos os dados, vamos usar o Fluent UI para exibir os itens da lista.
- Crie um componente de lista utilizando Fluent UI:
No arquivo principal (por exemplo,PnPGetStartList2WebPart.ts), importe os componentes Fluent UI, comoDetailsList, e renderize a lista.
import * as React from 'react';
import { DetailsList, IColumn } from '@fluentui/react/lib/DetailsList';
export interface IListItem {
Title: string;
ID: number;
// Adicione mais campos conforme necessário
}
export default class PnPGetStartList2WebPart extends BaseClientSideWebPart<IPnPGetStartList2Props> {
private _columns: IColumn[] = [
{ key: 'column1', name: 'Title', fieldName: 'Title', minWidth: 100, maxWidth: 200, isResizable: true },
{ key: 'column2', name: 'ID', fieldName: 'ID', minWidth: 50, maxWidth: 100, isResizable: true },
];
private async _getListItems(): Promise<IListItem[]> {
try {
const items = await this._sp.web.lists.getByTitle("NomeDaSuaLista").items.select("Title", "ID")();
return items;
} catch (error) {
console.error("Erro ao buscar itens da lista", error);
return [];
}
}
public async render(): Promise<void> {
const items: IListItem[] = await this._getListItems();
const element: React.ReactElement = React.createElement(
DetailsList,
{
items: items,
columns: this._columns,
setKey: 'set',
layoutMode: 0,
selectionMode: 0,
}
);
ReactDom.render(element, this.domElement);
}
}
Neste exemplo:
- DetailsList é usado para renderizar os dados da lista.
- IColumn define as colunas da lista (neste caso, “Title” e “ID”).
- _getListItems obtém os itens da lista do SharePoint.
Resumo dos Comandos
- Criar um novo projeto SPFx:
yo @microsoft/sharepoint
- Instalar Fluent UI e PnPjs:
npm install @fluentui/react @pnp/sp
- Inicializar PnPjs:
this._sp = spfi().using(SPFx(this.context));
- Obter itens da lista:
const items = await this._sp.web.lists.getByTitle("NomeDaSuaLista").items();
- Renderizar uma lista com Fluent UI:
<DetailsList items={items} columns={this._columns} />
Esse exemplo cria uma Web Part SPFx que obtém os itens de uma lista do SharePoint e os exibe em uma tabela usando os componentes Fluent UI.
edvaldo b. guimarães filho 
Leave a comment