Como Utilizar o Fluent UI no SharePoint Online: Um Guia Técnico com Exemplos de WebParts
Introdução
O Fluent UI, anteriormente conhecido como Office UI Fabric, é uma biblioteca de componentes de interface do usuário criada pela Microsoft, projetada para facilitar o desenvolvimento de aplicações que seguem os princípios de design do Microsoft Office. No contexto do SharePoint Online, o Fluent UI é amplamente utilizado para construir WebParts customizadas que oferecem uma experiência de usuário coesa e integrada ao ecossistema Office 365.
Neste artigo, veremos como utilizar o Fluent UI no SharePoint Online para criar WebParts, com 10 exemplos práticos e uma lista de vídeos e blogs para aprender mais sobre o assunto.
Pré-requisitos
Antes de começar, é necessário ter as seguintes ferramentas e tecnologias configuradas:
- Node.js e NPM instalados
- Yeoman e @microsoft/generator-sharepoint para a criação de projetos SPFx (SharePoint Framework)
- Familiaridade com React, pois o Fluent UI utiliza React para construção de componentes
- Visual Studio Code ou outro editor de sua escolha
1. Instalando o Fluent UI em um Projeto SPFx
Primeiro, certifique-se de ter um projeto SPFx configurado. Se ainda não o fez, utilize o seguinte comando para criar um projeto básico de WebPart no SharePoint Online:
yo @microsoft/sharepoint
Uma vez dentro do projeto, você pode instalar o Fluent UI executando o comando:
npm install @fluentui/react
Com o Fluent UI instalado, agora podemos começar a desenvolver WebParts personalizadas.
2. Exemplo de WebPart: Botão Básico com Fluent UI
Neste exemplo, adicionaremos um botão usando o componente PrimaryButton do Fluent UI.
import * as React from 'react';
import { PrimaryButton } from '@fluentui/react';
const FluentUIButton: React.FC = () => {
return (
<PrimaryButton text="Clique Aqui" onClick={() => alert('Botão clicado!')} />
);
};
export default FluentUIButton;
3. Exemplo de WebPart: Campo de Texto
import * as React from 'react';
import { TextField } from '@fluentui/react';
const FluentUITextField: React.FC = () => {
return (
<TextField label="Digite algo" placeholder="Exemplo de campo de texto" />
);
};
export default FluentUITextField;
4. Exemplo de WebPart: Lista de Seleção
import * as React from 'react';
import { Dropdown, IDropdownOption } from '@fluentui/react';
const options: IDropdownOption[] = [
{ key: 'A', text: 'Opção A' },
{ key: 'B', text: 'Opção B' },
{ key: 'C', text: 'Opção C' },
];
const FluentUIDropdown: React.FC = () => {
return <Dropdown label="Escolha uma opção" options={options} />;
};
export default FluentUIDropdown;
5. Exemplo de WebPart: Checkbox
import * as React from 'react';
import { Checkbox } from '@fluentui/react';
const FluentUICheckbox: React.FC = () => {
return <Checkbox label="Marque esta opção" />;
};
export default FluentUICheckbox;
6. Exemplo de WebPart: Slider
import * as React from 'react';
import { Slider } from '@fluentui/react';
const FluentUISlider: React.FC = () => {
return <Slider label="Ajuste o valor" min={0} max={100} step={1} />;
};
export default FluentUISlider;
7. Exemplo de WebPart: Ícones
import * as React from 'react';
import { Icon } from '@fluentui/react';
const FluentUIIcon: React.FC = () => {
return <Icon iconName="Add" />;
};
export default FluentUIIcon;
8. Exemplo de WebPart: Modal
import * as React from 'react';
import { Modal, PrimaryButton } from '@fluentui/react';
const FluentUIModal: React.FC = () => {
const [isModalOpen, setIsModalOpen] = React.useState(false);
return (
<>
<PrimaryButton text="Abrir Modal" onClick={() => setIsModalOpen(true)} />
<Modal isOpen={isModalOpen} onDismiss={() => setIsModalOpen(false)}>
<div>Este é um modal!</div>
</Modal>
</>
);
};
export default FluentUIModal;
9. Exemplo de WebPart: Painel
import * as React from 'react';
import { Panel, PanelType, PrimaryButton } from '@fluentui/react';
const FluentUIPanel: React.FC = () => {
const [isPanelOpen, setIsPanelOpen] = React.useState(false);
return (
<>
<PrimaryButton text="Abrir Painel" onClick={() => setIsPanelOpen(true)} />
<Panel isOpen={isPanelOpen} type={PanelType.medium} onDismiss={() => setIsPanelOpen(false)} headerText="Título do Painel">
<p>Conteúdo do painel.</p>
</Panel>
</>
);
};
export default FluentUIPanel;
10. Exemplo de WebPart: DatePicker
import * as React from 'react';
import { DatePicker } from '@fluentui/react';
const FluentUIDatePicker: React.FC = () => {
return <DatePicker label="Selecione uma data" />;
};
export default FluentUIDatePicker;
Vídeos do YouTube
Aqui estão alguns vídeos úteis para aprender mais sobre Fluent UI e SPFx:
- https://www.youtube.com/watch?v=Abo8FdQZ4Dc
- https://www.youtube.com/watch?v=aReBtUoEyNI
- https://www.youtube.com/watch?v=crb9dLcRoGg
Blogs e Links Úteis
Aqui estão alguns blogs e recursos recomendados para você aprender mais sobre Fluent UI no SharePoint:
- Microsoft Fluent UI Documentation – A documentação oficial do Fluent UI.
- SPFx Community Blog – Um blog mantido pela comunidade PnP da Microsoft, com muitos artigos e exemplos práticos sobre SPFx.
- SharePoint Framework Dev Blog – O blog oficial de desenvolvedores do SharePoint.
- React + Fluent UI in SharePoint – Um blog técnico focado em integrar React e Fluent UI no SharePoint.
- Fluent UI and SPFx Integration – Outro recurso útil para aprender sobre a integração.
Conclusão
O Fluent UI oferece uma forma eficiente de construir WebParts customizadas no SharePoint Online, proporcionando uma experiência de usuário consistente com o restante do ecossistema Microsoft. Com os exemplos fornecidos, você pode começar a criar seus próprios componentes e personalizar ainda mais o SharePoint Online.
edvaldo b. guimarães filho 
Leave a comment