Codificando WebParts (SPFx)

En este artículo veremos un ejemplo sencillo de como codificar WebParts (SPFx).

En el artículo Crea un primer Webpart con SharePoint Framework SPFx en SharePoint Online/2019/2016 hemos creado un primer Webpart de Sharepoint Framework (SPFx) y testeado de forma local.

Y en el artículo Agregar nuevas propiedades a un WebPart (SPFx) hemos agregado nuevas propiedades al Webpart de Sharepoint Framework (SPFx).

Ahora vamos a agregar nuevo código para renderizar propiedades en pantalla y poder visualizarlas en nuestro WebPart creado con React.

Para ello editamos el archivo src\webparts\holaMundoReact\components\HolaMundoReact.tsx con Visual Studio Code y agregamos la siguiente línea:

 <p className={ styles.description }>{escape(this.props.Sumario)}</p>
 

Como la propiedad Sumario no está definida en el interfaz src\webparts\holaMundoReact\components\IHolaMundoReactProps.ts se mostrarán los errores a tiempo real en Visual Studio Code.

También si tenemos arrancado gulp serve en PowerShell, alestár sirviendo el WebPart a tiempo real el error aparecerá también ahí.

Una vez que definimos la propiedad en interfaz src\webparts\holaMundoReact\components\IHolaMundoReactProps.ts, desaparece el error.

export interface IHolaMundoReactProps {
  description: string;
  Sumario: string;
}

Y se visualizará correctamente el Html que hemos añadido.

Es interensante ver que cuando editamos las propiedades no hay botón de salvar, ya que se guardan automáticamente.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.