Componentes de Fluent UI en un WebPart (SPFx)

En este artículo vamos a ver un ejemplo de un WebPart creado de SharePoint FrameWork (SPFx) creado con la plantilla Yeoman. En el artículo anterior Office UI Fabric Core y Office UI Fabric React ahora son Fluent UI explicamos como Office UI Fabric es ahora Fluent UI.

Las nuevas experiencias modernas de SharePoint usan Office UI Fabric y Office UI Fabric React por defecto (como hemos dicho ahora Fluent UI). Por tanto al crear un WebPart en SharePoint Framework ya tenemos disponibles los estilos y componentes de Fabric Fluent UI para implementarlos en SharePoint sin tener que añadir nada más.

En este ejemplo vamos a probar a implementar el componente de Fluent UI de DocumentCard:

https://developer.microsoft.com/es-ES/fluentui#/controls/web/documentcard

Primero creamos el WebPart desde PowerShell con Yeoman (Ver más información en el artículo que enlazo a continuación sobre como crear nuestro primer WebPart Crea un primer Webpart con SharePoint Framework SPFx en SharePoint Online/2019/2016.

En Yeoman indicaremos lo siguiente:

Escribimos code . para abrir Visual Studio Code y editar el código. Editamos el fichero TypeScript de React src\webparts\webPartFluentUi\components\WebPartFluentUi.tsx

Cambiamos el código por el siguiente:

import * as React from 'react';
import styles from './WebPartFluentUi.module.scss';
import { IWebPartFluentUiProps } from './IWebPartFluentUiProps';
import { escape } from '@microsoft/sp-lodash-subset';

import {
  DocumentCard,
  DocumentCardPreview,
  DocumentCardTitle,
  DocumentCardActivity,
  IDocumentCardPreviewProps
} from 'office-ui-fabric-react/lib/DocumentCard';

export default class WebPartFluentUi extends React.Component<IWebPartFluentUiProps, {}> {
  public render(): JSX.Element {
    const previewProps: IDocumentCardPreviewProps = {
      previewImages: [
        {
          previewImageSrc: String(require('./document-preview.png')),
          iconSrc: String(require('./icon-ppt.png')),
          width: 318,
          height: 196,
          accentColor: '#ce4b1f'
        }
      ],
    };
    return (
      <DocumentCard onClickHref='http://bing.com'>
        <DocumentCardPreview { ...previewProps } />
        <DocumentCardTitle title='Revenue stream proposal fiscal year 2016 version02.pptx' />
        <DocumentCardActivity
          activity='Created Feb 23, 2016'
          people={
            [
              { name: 'Kat Larrson', profileImageSrc: String(require('./avatar-kat.png')) }
            ]
          }
        />
      </DocumentCard>
    );
  }
}
 
Como vemos, está todo preparado, sólo hemos agregado los import del componente deDocumentCard y el Html correspondiente en el evento render().
 
Para verlo también necesitamos agregar a nuestro proyecto estás 3 imágenes en la carpeta src\webparts\webPartFluentUi\components
 
Escribimos gulp serve para probar nuestro WebPart con el componente React DocumentView de Fluent UI.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *