En esta publicación, echamos un vistazo a algunas de las diferentes formas en que se pueden crear libretas de direcciones en SharePoint Online.
Introducción
La idea de esta publicación surgió del comentario del lector George que solicitaba hacer una demostración de cómo se puede crear una libreta de direcciones en SharePoint. De mi investigación ya hay bastante sobre cómo hacer esto, pero aquí están mis dos formas de crear una libreta de direcciones.
Ejemplo 1: filtrado de listas dinámicas
Este ejemplo es una solución de SharePoint pura y lista para usar para crear una función de libreta de direcciones. Para este ejemplo, usaremos el filtrado dinámico entre dos listas para mostrar un determinado conjunto de valores cuando se selecciona una opción.
Para empezar necesitaremos crear dos listas:
Crear la lista del alfabeto
- Comience creando una nueva lista personalizada > llame a la lista Alfabeto.
- Cree nuevos elementos en la lista para cada letra del alfabeto. Usé ‘editar en modo de cuadrícula’ para acelerar este proceso
Cree una lista alfabética para almacenar las letras de la A a la Z como elementos de la lista.
- Cambiar la vista a una vista de galería
- Desde aquí, formatee la vista de lista utilizando el formato de vista de lista JSON de ejemplo a continuación, o cree uno propio para diseñar la lista AZ para mostrar cada letra como un botón
{ "€schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json", "height": 45, "width": 53, "hideSelection": false, "fillHorizontally": true, "formatter": { "elmType": "div", "attributes": { "class": "sp-card-container" }, "children": [ { "elmType": "button", "attributes": { "class": "sp-card-defaultClickButton", "role": "presentation" }, "customRowAction": { "action": "defaultClick" } }, { "elmType": "div", "attributes": { "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer" }, "children": [ { "elmType": "div", "attributes": { "class": "sp-card-lastTextColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "title": "[€Title]", "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent" }, "txtContent": "=[€Title]", "style": { "text-align": "left", "font-size": "0.8em", "font-weight": "bold" } } ] } ] } ] } }- Guarde su vista con un nuevo nombre, yo llamé a la mía «vista de filtro alfabético». El resultado final se verá como el siguiente:
Ejemplo de formato de vista de lista de galería para mostrar AZ como botones.
NOTA: Había un ejemplo original para esto que encontré en línea hace muchos meses, pero no puedo encontrarlo. Si alguien sabe de dónde vino este ejemplo, deje un mensaje en los comentarios y lo acreditaré en esta publicación.
Crear la lista de contactos
A continuación, necesitamos crear la lista de contactos. Si ya tiene sus datos de usuario en otro lugar, siempre puede crear su nueva lista de contactos desde Excel.
- Una vez creada la lista de contactos, cree una nueva columna de búsqueda con la siguiente configuración:
- Asigne un nombre a su columna de búsqueda. Llamé al mío «AZLookup»
- Requerir que esta columna contenga información = No
- Aplicar valores únicos = No
- Obtener información de: Alfabeto
- En esta columna: Título
- Presiona Guardar
Cree una columna de búsqueda para conectarse a la lista alfabética.
- Ahora debe actualizar cada elemento en la lista de contactos para asegurarse de que cada elemento tenga un valor AZ en la columna de búsqueda. Nuevamente, para esto usé «editar en vista de cuadrícula» para acelerar las cosas.
Actualice la lista de contactos para incluir valores en la columna de búsqueda.
- Cambie a la vista de galería y formatee la lista usando el formato de vista de lista JSON de ejemplo a continuación, o cree uno propio para diseñar la lista de contactos de una manera que se adapte a sus necesidades.
{ "€schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json", "height": 166, "width": 300, "hideSelection": false, "fillHorizontally": true, "formatter": { "elmType": "div", "attributes": { "class": "sp-card-container" }, "children": [ { "elmType": "button", "attributes": { "class": "sp-card-defaultClickButton", "role": "presentation" }, "customRowAction": { "action": "defaultClick" } }, { "elmType": "div", "attributes": { "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer" }, "children": [ { "elmType": "div", "attributes": { "class": "sp-card-previewColumnContainer" }, "children": [ { "elmType": "div", "style": { "display": "flex" }, "children": [ { "elmType": "p", "attributes": { "class": "sp-card-userEmptyText" }, "txtContent": "=if(length([€DisplayName]) == 0, '–', '')" }, { "forEach": "personIterator in [€DisplayName]", "elmType": "a", "attributes": { "class": "=if(loopIndex('personIterator') >= 5, 'sp-card-userContainer', 'sp-card-userContainer sp-card-keyboard-focusable')" }, "style": { "display": "=if(loopIndex('personIterator') >= 5, 'none', '')" }, "children": [ { "elmType": "img", "defaultHoverField": "[€personIterator]", "attributes": { "src": "=getUserImage([€personIterator.email], 'S')", "title": "[€personIterator.title]", "class": "sp-card-userThumbnail" }, "style": { "display": "=if(length([€DisplayName]) > 5 && loopIndex('personIterator') >= 4, 'none', '')" } }, { "elmType": "div", "attributes": { "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary sp-card-userOthers" }, "style": { "display": "=if(length([€DisplayName]) > 5 && loopIndex('personIterator') == 4, '', 'none')" }, "customCardProps": { "formatter": { "elmType": "div", "attributes": { "class": "sp-card-personCallout" }, "children": [ { "forEach": "personIterator in [€DisplayName]", "elmType": "div", "attributes": { "class": "sp-card-userContainer sp-card-userCustomCard" }, "style": { "display": "=if(loopIndex('personIterator') < 4, 'none', '')" }, "children": [ { "elmType": "img", "defaultHoverField": "[€personIterator]", "attributes": { "src": "=getUserImage([€personIterator.email], 'S')", "title": "[€personIterator.title]", "class": "sp-card-userThumbnail" } } ] } ] }, "openOnEvent": "hover" }, "children": [ { "elmType": "span", "txtContent": "='+' + toString(length([€DisplayName]) - (4))" } ] } ] }, { "elmType": "div", "attributes": { "class": "sp-card-userTitle" }, "style": { "display": "=if(length([€DisplayName]) == 1, '', 'none')" }, "defaultHoverField": "[€personIterator]", "txtContent": "[€DisplayName.title]" } ] } ] }, { "elmType": "div", "attributes": { "class": "sp-card-displayColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "title": "[€FirstName]", "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent", "role": "heading", "aria-level": "3" }, "txtContent": "=if ([€FirstName] == '', '–', [€FirstName])" } ] }, { "elmType": "div", "attributes": { "class": "sp-card-displayColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "title": "[€Surname]", "class": "ms-fontColor-neutralPrimary sp-card-content " }, "txtContent": "=if ([€Surname] == '', '–', [€Surname])" } ] }, { "elmType": "div", "attributes": { "class": "sp-card-lastTextColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "title": "[€Email]", "class": "ms-fontColor-neutralPrimary sp-card-content " }, "txtContent": "=if ([€Email] == '', '–', [€Email])" } ] } ] } ] } }- Guarde la vista y asígnele un nuevo nombre. Llamé a la mía «Tarjetas de contacto». El resultado se verá como el siguiente:
Lista de contactos con formato de vista de lista aplicado.
Crear la página de la libreta de direcciones
Ahora que las listas están creadas y formateadas, es hora de crear una nueva página, agregar nuestros elementos web y comenzar el filtrado dinámico.
- Crea una nueva página, selecciona cualquier plantilla que te guste
- En una nueva sección de una columna, agregue un nuevo elemento web de lista > seleccione la lista Alfabeto
- Edite el elemento web y realice los siguientes cambios:
- Cambiar la vista a Vista de filtro alfabético
- Establezca el tamaño en pequeño: alrededor de 5 artículos
- Ocultar la barra de comandos
- Ocultar el botón ver todo
- Presiona Aplicar
- Ya sea en la misma sección de una columna o en una nueva, agregue un nuevo elemento web de lista > seleccione la lista de contactos
- Edite el elemento web y realice los siguientes cambios:
- Cambiar la vista a Tarjetas de contacto
- Establezca el tamaño en tamaño automático: ajuste a la cantidad de elementos
- Ocultar la barra de comandos
- Ocultar el botón ver todo
- Activar el filtrado dinámico
- Columna en Contactos para filtrar = AZLookup
- Lista o biblioteca que contiene el valor del filtro: Alfabeto
- Columna que contiene las propiedades de los valores de filtro: Título
- Presiona Aplicar
¡Ahora podrá filtrar dinámicamente su lista de contactos usando los botones AZ en la página de la libreta de direcciones!
¡Prima! Rellene la lista de contactos a partir de los datos de usuario de M365
Al crear esta demostración, pensé: «¿No sería genial si pudieras completar la lista de contactos a partir de los datos que ya están en Microsoft 365?». Pensé que era una buena idea, así que creé un flujo de Power Automate para obtener todos los datos de usuario de M365 y agregarlos a la lista de contactos.
Automatiza el flujo de energía para completar la lista de contactos con datos de usuario de Microsoft 365.
El flujo usa la acción de búsqueda de usuarios (V2) que, si no se agregan términos de búsqueda, traerá de vuelta a todos los usuarios dentro de Microsoft 365 dentro del flujo. Una vez que esa acción ha recuperado a todos los usuarios, la acción de creación de elemento, envuelta dentro de una aplicación para cada uno, crea un nuevo elemento dentro de la lista de contactos para cada usuario que ha encontrado la acción de búsqueda de usuarios, completando las columnas en la lista de contactos con contenido dinámico de la acción anterior.
NOTA: Hay una configuración de paginación que deberá actualizarse si tiene más del límite de umbral de 1000 usuarios.
Configuración de paginación dentro de la acción de búsqueda de usuarios (V2).
Este flujo fue realmente solo para probar el concepto, por lo que se ejecuta de forma manual. Si quisiera hacer algo como esto, le sugiero que tenga una «importación única de todos los datos del perfil de usuario en la lista de contactos, luego un flujo separado que se ejecuta en un horario más largo que solo se ejecuta si se cumplen ciertas condiciones ( por ejemplo: si la dirección de correo electrónico aún no existe en la lista de contactos).
Ejemplo 2: elementos web de la libreta de direcciones de SharePoint Framework personalizada
Hay varias soluciones de muestra de SharePoint Framework (SPFx) disponibles en GitHub que funcionan como libretas de direcciones, se conectan a los datos del usuario en Microsoft 365 y le permiten explorar y buscar usuarios. No todas las muestras se ofrecen como paquetes de soluciones descargables, a veces necesitará empaquetarlas e implementarlas manualmente. Tengo una publicación aquí que cubre todo lo que necesitas hacer 🙂
Ejemplo de directorio de personas SPFx
Esta muestra estuvo disponible como parte del kit de inicio de PnP (anteriormente el kit de inicio de SharePoint), que instalé y he estado usando en mi inquilino desde 2019 sin problemas. Este elemento web le permite explorar una AZ, además de poder buscar usuarios.
Ejemplo de directorio de personas SPFx.
Este elemento web se puede descargar desde GitHub e instalar en su arrendatario.
Enlace a la muestra: https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-people-directory
Ejemplo de directorio de organización SPFx
Esta muestra le permite explorar una AZ, además de poder buscar usuarios y ordenar los resultados por título de trabajo, nombre, apellido, etc. Cuando se encuentra un usuario, se muestra una tarjeta flotante de perfil que es la misma que la resto de Microsoft 365.
Ejemplo de directorio de organización SPFx.
Este elemento web debe empaquetarse en una solución antes de instalarlo en su arrendatario.
Enlace a la muestra: https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-directory
