Ejercicio: Extensión del escritorio de Conexiones Viva con elementos web

  • 13 minutos

En este ejercicio, creará un elemento web de SharePoint Framework que obtiene datos de una lista de SharePoint. A continuación, agregará el elemento web al escritorio de Conexiones Viva.

Crear una nueva solución

Para empezar, cree una solución usando el generador de SharePoint Framework Yeoman:

  1. Cree una carpeta para su proyecto llamada spfx-company-announcements-webpart.

  2. En un terminal, cambie el directorio de trabajo a spfx-company-announcements-webpart.

  3. Ejecute el yo @microsoft/sharepoint comando para iniciar el scaffolding ​de una nueva solución

  4. Responda a las indicaciones del generador:

    Prompt Entrada
    ¿Cómo se llama su solución? spfx-company-announcements-webpart
    Solo se admite SharePoint Online (más reciente). Para versiones anteriores de SharePoint (2016 y 2019) use la versión 1.12.1 del generador. Solo SharePoint Online (versiones más recientes)
    ¿Dónde desea ubicar los archivos? Use la carpeta actual.
    ¿Desea permitir que el administrador de inquilinos pueda implementar la solución en todos los sitios inmediatamente sin ejecutar ninguna implementación de características ni agregar aplicaciones en sitios? No
    ¿Los componentes de la solución necesitarán permisos para acceder a las API web que son exclusivas y no se compartirán con otros componentes en el espacio empresarial?: No
    ¿Cuál es el tipo de componente del lado cliente que se va a crear? WebPart
    ¿Cómo se llama su elemento web? Anuncios de empresa
    ¿Cuál es la descripción del elemento web? Muestra anuncios de la empresa
    ¿Qué marco desea utilizar? No es un marco de JavaScript

  5. Espere a que se complete la creación de proyecto. Esta operación puede tardar unos minutos.

    Sugerencia

    Mientras espera, es probable que vea algunas advertencias. Puede omitirlas sin problemas.

Instalar el certificado de desarrollo

SharePoint Framework usa un área de trabajo hospedada en SharePoint Online donde puede probar el código antes de implementarlo en Conexiones Viva. Al probar el código, se inicia un servidor web local con Gulp. El área de trabajo de SharePoint Framework carga los archivos del servidor local y le permite probarlos.

Para permitir que workbench cargue archivos desde el servidor de desarrollo local, use el siguiente procedimiento para confiar en el certificado de desarrollo de SharePoint Framework.

Importante

Instale el certificado de desarrollo sólo una vez en el equipo. Cuando se crea un nuevo proyecto, SharePoint Framework usará el certificado previamente instalado. Si ya lo ha hecho, puede omitir estos pasos.

  1. Abra un terminal
  2. Cambie el directorio de trabajo a la carpeta del proyecto.
  3. Ejecute el comando gulp trust-dev-cert.
  4. Siga las instrucciones de la pantalla para completar la instalación del certificado.

Edite el elemento web.

Después de crear el proyecto, el siguiente paso es ampliar la parte web para que cargue los anuncios de la empresa desde la lista y los muestre en la página:

  1. Abra el proyecto en el editor de código.

  2. En el editor de código, abra el archivo ./src/webparts/companyAnnouncements/CompanyAnnouncementsWebPart.ts.

  3. En la sección superior del archivo, agregue import { SPHttpClient } from '@microsoft/sp-http';.

  4. Borre el contenido del método render.

  5. En el método render, agregue el siguiente bloque de código:

    this.context.spHttpClient
  .get(`${this.context.pageContext.web.absoluteUrl}/_api/web/lists/getByTitle('Announcements')/items?$select=Title,Description,Important`,
    SPHttpClient.configurations.v1,
    {
      headers: {
        'accept': 'application/json;odata.metadata=none'
      }
    })
  .then(response => response.json())
  .then(announcements => {
    // todo: display results
  })
  .catch(error => this.context.statusRenderer.renderError(this.domElement, error));

    Se usa spHttpClientpara recuperar la lista de anuncios de la lista de Anuncios creada previamente. spHttpClient ajusta la API fetch estándar y se autentica para llamar a las API de SharePoint.

    En la dirección URL de la API, se usa el parámetro OData $select para especificar la lista de propiedades que se va a recuperar. Estas propiedades coinciden con las columnas de la lista Anuncios.

    Al llamar a la API de SharePoint, también establece el encabezado accept para suprimir los metadatos de la respuesta. Le permite minimizar la cantidad de datos enviados a través de la red.

    Después de recibir la respuesta de la API, recupera su respuesta JSON. Si se produce un error mientras se llama a la API, será mostrado en el área de contenido de la parte web a través del método de ayuda expuesto por la parte web.

  6. Después de recuperar los anuncios de la lista, el siguiente paso es mostrarlos en la parte web. En la última cláusula then, reemplace el comentario // todo: display results por el siguiente bloque:

    const announcementsHtml = announcements.value.map(announcement =>
  `<dt${announcement.Important ?
    ` class="${styles.important}"` : ''}>${announcement.Title}</dt>
  <dd>${announcement.Description}</dd>`);

this.domElement.innerHTML = `
<div class="${styles.companyAnnouncements}">
  <div class="${styles.container}">
    <div class="${styles.title}">Announcements</div>
    <dl>
      ${announcementsHtml.join('')}
    </dl>
  </div>
</div>
`;

    La announcement variable contiene la value propiedad que contiene un array de anuncios de la lista. Para cada anuncio, se crea una cadena HTML con los elementos dt y dd que contiene el contenido del anuncio. Después, combina los anuncios en una única cadena HTML y la muestra en el elemento DOM del elemento web.

    Sugerencia

    Cuando sea posible, siempre debe usar HTML semántico en lugar de los elementos div y span genéricos. El uso de HTML semántico, como un encabezado (h1-h6) o una lista de definiciones (dl), ayuda a las personas que utilizan lectores de pantalla y otras herramientas de accesibilidad a seguir el contenido de la página más fácilmente.

  7. Para guardar los cambios, seleccione Archivo>Guardar o seleccione Ctrl+S en el teclado (CMD+S en macOS).

Estilo del contenido del elemento web

Para mostrar anuncios en el elemento web, se usaron los elementos HTML dl, dt y dd estándar. También se incluyó una clase CSS personalizada denominada important para resaltar los anuncios importantes. Ahora agregue estilos CSS para dar formato a cómo se muestran los anuncios y los avisos importantes:

  1. En el editor de código, abra el archivo ./src/webparts/companyAnnouncements/CompanyAnnouncementsWebPart.module.scss.

  2. Cambie el contenido del archivo por el siguiente código:

    @import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';

.companyAnnouncements {
  .container {
    @include ms-Grid;
    color: var(--primaryText, #323130);
  }

  .title {
    @include ms-fontSize-18;
    @include ms-fontWeight-semibold;
  }

  dt {
    @include ms-fontWeight-bold;
    @include ms-fontSize-14;
    margin-top: 1rem;

    &.important {
      color: $ms-color-red;
    }
  }

  dd {
    margin-left: 0;
  }
}

    Comenzará con la importación de la interfaz de usuario de Fluent para asegurar un estilo coherente con Microsoft 365. Después, agregue una clase CSS para el título del elemento web. En la clase, se hace referencia a las definiciones de fuente de la interfaz de usuario de Fluent. Después, defina el estilo de los elementos dt y dd que usó para mostrar los anuncios.

    Al igual que hizo con el título del elemento web, hace referencia a la interfaz de usuario de Fluent para garantizar la coherencia. Para resaltar anuncios importantes, se define una clase adicional denominada important, que usa texto rojo tal como se define en la interfaz de usuario de Fluent.

  3. Para guardar los cambios, seleccione Archivo>Guardar o seleccione Ctrl+S en el teclado (CMD+S en macOS).

Probar el elemento web

Para crear y obtener la vista previa de la parte web para los anuncios de la empresa:

  1. En un terminal, ejecute siguiente comando gulp serve --nobrowser: Este comando iniciará un servidor web local en https://localhost:4321.

    Captura de pantalla de una ventana de terminal con la salida del comando gulp serve.

    Advertencia

    Si ve la siguiente advertencia en el terminal, significa que el servidor web local no pudo cargar el certificado de desarrollo:

    Pantalla de una ventana de terminal que muestra una advertencia después de ejecutar el comando gulp serve.

    Advertencia: [spfx-serve] Al servir en modo HTTPS, se debe proporcionar una ruta de acceso de certificado PFX o una ruta de acceso de certificado y una ruta de acceso de clave, o bien se debe generar y confiar en un certificado de desarrollo. Si no se proporciona un certificado SSL, se usará un certificado autofirmado predeterminado. Espere advertencias de seguridad del explorador.

    Para solucionar este problema, detenga el servidor web seleccionando Ctrl+C y ejecute el comando gulp trust-dev-cert.

  2. En un explorador web, vaya al área de trabajo en <Home site url>/_layouts/workbench.aspx. La URL del sitio de inicio es donde usted creó la lista Anuncios en el ejercicio anterior.

    Advertencia

    Después de abrir el banco de trabajo, si ve el siguiente error, significa que el servidor web local no pudo cargar su certificado de desarrollo:

    Captura de pantalla de la mesa de trabajo de SharePoint que muestra un mensaje de advertencia sobre la imposibilidad de cargar el manifiesto local.

    El elemento web no aparecerá en el cuadro de herramientas. Asegúrese de que "gulp serve" se ejecuta en un proyecto de elemento web. Actualice la página una vez que se esté ejecutando "gulp serve".

    Para solucionar este problema, detenga el servidor web seleccionando Ctrl+C y ejecute el gulp trust-dev-certcomando.

  3. Para agregar la parte web recién creada al lienzo, seleccione el botón (más) + para abrir la caja de herramientas.

    Captura de pantalla del botón más para abrir la caja de herramientas en la mesa de trabajo de SharePoint.

  4. En la barra de búsqueda, escriba Anuncios de la empresa y seleccione la parte web.

    Captura de pantalla de la parte web para anuncios de empresa en la caja de herramientas.

    Si ha seguido todos los pasos con éxito, verá sus anuncios de la lista de Anuncios mostrados en la mesa de trabajo.

    Captura de pantalla que muestra la parte web para los anuncios de la empresa que muestra los anuncios en el banco de trabajo de SharePoint.

    Los títulos de los anuncios seleccionados como importantes aparecen en rojo.

  5. Para detener el servidor web de desarrollo, vuelva al terminal y seleccione Ctrl+C.

Implementación del elemento web en Conexiones Viva

Usted ha construido la parte web de Anuncios de la empresa usando el SharePoint Framework. Ahora puede implementarlo en Conexiones Viva.

Para empaquetar la parte web en una aplicación utilizando Gulp:

  1. Vaya al terminal donde el directorio de trabajo es la carpeta raíz del proyecto.
  2. Para construir la solución en modo de liberación, ejecute el gulp bundle --ship comando
  3. Para crear un paquete de modo de versión de la solución, ejecute el comando gulp package-solution --ship.

La package-solution tarea crea un archivo de paquete de aplicaciones llamado spfx-company-announcements-webpart.sppkg en la carpeta ./sharepoint/solution. Este archivo forma parte del paquete de la aplicación. A continuación, implementará este paquete en el catálogo de aplicaciones de SharePoint, que contiene todas las extensiones de Conexiones Viva.

Si no tiene un catálogo de aplicaciones en su inquilino, créelo ahora:

  1. En un navegador web, vaya al Centro de administración de Microsoft 365

  2. En el menú lateral, seleccione la opción Mostrar todo.

  3. En la lista Admin centers, seleccione SharePoint.

  4. En el Centro de administración de SharePoint, en la navegación lateral, seleccione Más características

  5. En la sección Aplicaciones, seleccione el botón Abrir para ir a la página de administrador de Aplicaciones

  6. En Aplicaciones, seleccione Catálogo de aplicaciones

  7. Si el sitio se abre, ya tiene un catálogo de aplicaciones y puede omitir más pasos

    Si el catálogo de aplicaciones no existe, se le pedirá que cree uno.

  8. En la lista de opciones, seleccione Crear automáticamente un nuevo sitio de catálogo de aplicaciones, y luego, seleccione Aceptar.

Implementar la aplicación en el catálogo:

  1. En un navegador web, vaya al catálogo de aplicaciones de SharePoint.

  2. En el menú lateral del catálogo, seleccione Aplicaciones para SharePoint.

  3. Arrastre el archivo spfx-company-announcements-webpart.sppkg a la lista.

  4. SharePoint le pide que confirme e implemente el paquete. Seleccione Deploy para que el paquete esté disponible para su instalación en sitios de SharePoint.

    Captura de pantalla del aviso del catálogo de aplicaciones de SharePoint para confirmar la implementación del paquete de soluciones cargado.

Una vez que la aplicación se haya implementado con éxito en el catálogo de aplicaciones, deberá instalarla en su sitio web:

  1. En un navegador web, vaya a la página de inicio.
  2. En la barra superior, seleccione el icono de Configuración (con forma de engranaje)
  3. En la sección SharePoint, seleccione el vínculo Agregar una aplicación.
  4. En el cuadro de búsqueda de la página Mis aplicaciones, escriba Empresa y encuentre la aplicación spfx-company-announcements-webpart-client-side-solution.
  5. Seleccione el botón Agregar.

Ahora puede agregar la parte web de Anuncios de la empresa en cualquier página de SharePoint del sitio. Para agregar la parte web en la página de inicio del sitio principal:

  1. En un navegador web, vaya a la página de inicio.
  2. Para asegurarse de que está en la página de inicio, seleccione Inicio en el menú superior.
  3. Para editar la página, seleccione Editar en el menú de la página.
  4. Elija un área dentro de la página donde colocará la parte web.
  5. Seleccione el + botón para abrir la caja de herramientas
  6. Busque la parte web de Anuncios de la empresa.
  7. Seleccione la parte web para agregarla a la página.
  8. En el menú de la página, seleccione Publicar de nuevo.

La parte web de Anuncios de la empresa está ahora en la página de inicio de su sitio web. Pruebe la aplicación para ver el aspecto de este elemento web en Conexiones Viva en Microsoft Teams:

  1. Abra el cliente de escritorio de Microsoft Teams o vaya al sitio de Teams en un navegador web.

  2. Abra la aplicación de conexión Viva y confirme que el elemento web Anuncios de empresa muestra todos los anuncios en la página principal del sitio principal.

    Captura de pantalla que muestra el elemento web de los anuncios de la empresa que muestran anuncios en el escritorio de Conexiones Viva.