Componentes de Fluent UI en un WebPart (SPFx)

Sin comentarios

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