Fluent UI da Microsoft: Guia Técnico Hands-On para Uso no SharePoint com Exemplos de WebParts
Introdução
O Fluent UI é uma poderosa biblioteca de componentes UI da Microsoft, ideal para criar interfaces acessíveis e responsivas no ecossistema Microsoft 365, incluindo SharePoint. Neste artigo, exploraremos seu uso prático no SharePoint e expandiremos os exemplos para incluir mais componentes, além de fornecer uma lista de links e vídeos úteis para aprofundar seu aprendizado.
Uso do Fluent UI no SharePoint
O Fluent UI é perfeitamente compatível com o SharePoint Framework (SPFx), sendo uma escolha popular para a criação de WebParts modernas e altamente interativas. Vamos explorar mais componentes além do botão e da tabela já apresentados.
Exemplo 3: Uso do TextField para Criar Formulários
O TextField é um componente essencial para formular entradas de texto. Vamos criar uma WebPart com um formulário simples que inclui campos de texto.
- Importando o Componente
TextField:
import * as React from 'react';
import { TextField, PrimaryButton } from '@fluentui/react';
import { useState } from 'react';
const FormWebPart: React.FC = () => {
const [name, setName] = useState('');
return (
<div>
<TextField
label="Nome"
value={name}
onChange={(e, newValue) => setName(newValue || '')}
/>
<PrimaryButton text="Enviar" onClick={() => alert(`Nome: ${name}`)} />
</div>
);
};
export default FormWebPart;
- Renderizando no SharePoint:
No métodorender()da WebPart:
public render(): void {
const element: React.ReactElement = React.createElement(FormWebPart, {});
ReactDom.render(element, this.domElement);
}
- Resultado:
Um formulário simples será exibido, onde o usuário pode inserir um nome e enviá-lo.
Exemplo 4: Uso do Dropdown para Seleção
Outro componente popular é o Dropdown, que permite ao usuário selecionar opções de uma lista.
- Implementando o
Dropdown:
import * as React from 'react';
import { Dropdown, IDropdownOption, PrimaryButton } from '@fluentui/react';
import { useState } from 'react';
const options: IDropdownOption[] = [
{ key: 'op1', text: 'Opção 1' },
{ key: 'op2', text: 'Opção 2' },
{ key: 'op3', text: 'Opção 3' },
];
const DropdownWebPart: React.FC = () => {
const [selectedOption, setSelectedOption] = useState<IDropdownOption>();
return (
<div>
<Dropdown
label="Escolha uma opção"
options={options}
onChange={(e, option) => setSelectedOption(option)}
/>
<PrimaryButton
text="Confirmar"
onClick={() => alert(`Opção selecionada: ${selectedOption?.text}`)}
/>
</div>
);
};
export default DropdownWebPart;
- Renderizando no SharePoint:
No métodorender():
public render(): void {
const element: React.ReactElement = React.createElement(DropdownWebPart, {});
ReactDom.render(element, this.domElement);
}
- Resultado:
Um dropdown será apresentado, permitindo ao usuário escolher uma opção e confirmá-la.
Exemplo 5: Uso do Panel para Criar Sidebars
O Panel é um componente que cria uma sidebar deslizante. Vamos criar uma WebPart que exibe informações detalhadas em um painel deslizante.
- Implementando o
Panel:
import * as React from 'react';
import { Panel, PrimaryButton } from '@fluentui/react';
import { useState } from 'react';
const PanelWebPart: React.FC = () => {
const [isPanelOpen, setIsPanelOpen] = useState(false);
return (
<div>
<PrimaryButton text="Abrir Detalhes" onClick={() => setIsPanelOpen(true)} />
<Panel
headerText="Detalhes"
isOpen={isPanelOpen}
onDismiss={() => setIsPanelOpen(false)}
>
<p>Aqui estão algumas informações detalhadas exibidas no painel.</p>
</Panel>
</div>
);
};
export default PanelWebPart;
- Renderizando no SharePoint:
No métodorender():
public render(): void {
const element: React.ReactElement = React.createElement(PanelWebPart, {});
ReactDom.render(element, this.domElement);
}
- Resultado:
Ao clicar no botão, um painel lateral será aberto com informações adicionais.
Exemplo 6: Uso do Dialog para Criar Pop-ups de Confirmação
Vamos implementar o Dialog, um componente ideal para confirmar ações do usuário.
- Implementando o
Dialog:
import * as React from 'react';
import { Dialog, DialogType, DialogFooter, PrimaryButton, DefaultButton } from '@fluentui/react';
import { useState } from 'react';
const DialogWebPart: React.FC = () => {
const [isDialogVisible, setIsDialogVisible] = useState(false);
return (
<div>
<PrimaryButton text="Mostrar Confirmação" onClick={() => setIsDialogVisible(true)} />
<Dialog
hidden={!isDialogVisible}
onDismiss={() => setIsDialogVisible(false)}
dialogContentProps={{
type: DialogType.normal,
title: 'Confirmação',
subText: 'Você tem certeza que deseja continuar?',
}}
>
<DialogFooter>
<PrimaryButton text="Sim" onClick={() => alert('Confirmado!')} />
<DefaultButton text="Não" onClick={() => setIsDialogVisible(false)} />
</DialogFooter>
</Dialog>
</div>
);
};
export default DialogWebPart;
- Renderizando no SharePoint:
No métodorender():
public render(): void {
const element: React.ReactElement = React.createElement(DialogWebPart, {});
ReactDom.render(element, this.domElement);
}
- Resultado:
Um pop-up de confirmação será exibido, permitindo ao usuário confirmar ou cancelar a ação.
Lista de Links para Saber Mais
- Documentação Oficial Fluent UI
- Fluent UI GitHub Repository
- SharePoint Framework (SPFx) Documentation
- Exemplos de Fluent UI no CodeSandbox
- Fluent Design System
Vídeos no YouTube para Aprofundar
- Introdução ao Fluent UI | Build Modern React Apps – 45 minutos
- Fluent UI in SPFx Development – 50 minutos
- Building WebParts with Fluent UI – 40 minutos
- Fluent UI: Component Library Deep Dive – 35 minutos
Links Específicos para Microsoft Learn
- Criando WebParts com SPFx
- Construindo Interfaces de Usuário com Fluent UI
- Integração Fluent UI e SharePoint
Conclusão
O Fluent UI é uma poderosa ferramenta para desenvolver interfaces modernas e interativas no SharePoint. Usar componentes como TextField, Dropdown, Panel e Dialog ajuda a criar WebParts robustas e responsivas. Agora que você explorou vários exemplos práticos, você está pronto para desenvolver soluções ainda mais complexas e eficientes com o Fluent UI no SPFx.
edvaldo b. guimarães filho 
Leave a comment