Al Agregar una página moderna a un sitio, agrega y personaliza elementos Web, que son los bloques de creación de la página. Puede conectar algunos elementos Web para crear una experiencia interactiva y dinámica para los visores de la página. Por ejemplo, puede conectar un elemento Web Biblioteca de documentos a un elemento Web visor de archivos. Cuando un usuario hace clic en un nombre de archivo en la lista de la biblioteca de documentos, el visor de archivos muestra el contenido de ese archivo específico. También puede conectar un elemento Web de lista a un elemento Web de incrustación y agregar código personalizado para una variedad de experiencias dinámicas.

Notas: 

  • Algunas funcionalidades se introducen gradualmente en organizaciones que han optado por el programa de versión dirigido. Esto significa que es posible que todavía no pueda ver esta característica o que la vea con un aspecto diferente a como se describe en los artículos de ayuda.

  • Los elementos Web de este artículo no están disponibles para usarlos en páginas clásicas.

Entre los elementos Web que se pueden conectar se incluyen: el elemento Web propiedades de lista, el elemento Web visor de archivos y el elemento Web incrustar. A continuación se muestran algunos ejemplos de cómo puede usar estos elementos Web conectados.

Mostrar un archivo en función de lo que un usuario seleccione en una biblioteca de documentos (conectar un elemento Web visor de archivos a un elemento Web Biblioteca de documentos)

En este ejemplo, los usuarios pueden examinar una biblioteca de documentos de campaña y ver el contenido de un archivo seleccionado sin salir de la página, y sin tener que abrir cada archivo.

Ejemplo de un elemento Web visor de archivos conectado a una biblioteca de documentos

Para ello, realice lo siguiente:

  1. En la página, agregue un elemento Web Biblioteca de documentos con la biblioteca que desee usar y agregue un elemento Web visor de archivos.

  2. Si está agregando el elemento Web visor de archivos por primera vez, se abrirá el panel documentos recientes. Haga clic en Cancelar en la parte inferior derecha de este panel.

  3. Haga clic en Editar elemento web Botón de edición del elemento Web en el lado izquierdo del elemento Web visor de archivos.

  4. Haga clic en los puntos suspensivos (...) en la parte superior derecha del panel de propiedades y, a continuación, haga clic en conectar con el origen.

    Botón conectar a origen
  5. En conectar con el origen, seleccione la biblioteca de documentos que desea usar de la lista desplegable.

    Panel de propiedades visor de archivos con la lista desplegable conectar a origen
  6. Haga clic en la X de la parte superior del panel para cerrarla.

  7. Haga clic en Guardar como borrador en la parte superior de la página.

  8. Pruebe su conexión seleccionando un documento de la biblioteca de documentos que elija. Debería ver el documento en el elemento Web visor de archivos.

  9. Cuando esté listo para que la audiencia vea la página, haga clic en publicar en la parte superior derecha de la página.

Mostrar un elemento en una lista en función de lo que un usuario seleccione en un elemento Web de lista (conectar un elemento Web de propiedades de lista a un elemento Web de lista)

Si tiene una lista grande con muchas columnas, puede resultar difícil para los usuarios encontrar la información específica que buscan. Con el elemento Web de propiedades de lista, un usuario puede seleccionar un elemento de un elemento Web de lista y ver solo los valores que especifique. En el siguiente ejemplo, un elemento Web de lista contiene una lista de oficinas regionales. Cuando el usuario selecciona un elemento de la lista, el elemento Web de las propiedades de lista muestra solo el nombre de la oficina y los datos de ventas.

Ejemplo de una lista conectada con un elemento Web propiedades de lista

Para ello, realice lo siguiente:

  1. En la página, agregue un elemento Web de lista con la lista que desea usar y, a continuación, agregue un elemento Web de propiedades de lista.

  2. Haga clic en Editar elemento web Botón de edición del elemento Web en el lado izquierdo del elemento Web propiedades de la lista.

  3. Haga clic en los puntos suspensivos (...) en la parte superior derecha del panel de propiedades y, a continuación, haga clic en conectar con el origen.

    Botón conectar a origen
  4. En conectar con el origen, seleccione la lista que desea usar de la lista desplegable.

  5. En Mostrar, seleccione lo que desea que el usuario vea en la página. 

  6. En campos para mostrar, active las casillas situadas junto a las columnas de las que desea mostrar valores.

    Panel del elemento Web propiedades de lista
  7. Haga clic en Guardar como borrador en la parte superior de la página.

  8. Pruebe su conexión seleccionando un elemento de la lista que ha elegido. Debería ver el valor que especificó en el elemento Web propiedades de lista.

  9. Cuando esté listo para que la audiencia vea la página, haga clic en publicar en la parte superior derecha de la página.

Mostrar un vídeo, una imagen o una ubicación en función de lo que un usuario seleccione en un elemento Web de lista (conectar un elemento Web incrustado a un elemento Web de lista)

Con el elemento Web embed, puede escribir vínculos o código para insertar que usen variables, lo que le permitirá mostrar una amplia variedad de elementos según el tipo de selección de su visor de página. Aquí tiene tres ejemplos de cómo puede mostrar las imágenes, los vídeos y las ubicaciones que seleccione.

Mostrar un vídeo de YouTube seleccionado

En este ejemplo, el elemento Web lista contiene una lista con títulos e identificadores de vídeo para varios vídeos de YouTube. Cuando un usuario elige un vídeo de la lista, el elemento Web insertar muestra ese vídeo. El vínculo del elemento Web insertar usa una variable para representar el identificador de video del vídeo elegido por un usuario de la lista.

Ejemplo de un elemento Web incrustado conectado a una lista

Para ello, realice lo siguiente:

  1. Cree una lista que tenga una columna de título y una columna para los identificadores de video (como en el ejemplo anterior). El identificador es la parte del vínculo de YouTube que identifica el vídeo, y se encuentra después de la parte "v =" del vínculo. Por ejemplo, en el vínculo siguiente, la parte en cursiva es el identificador de video:

    https://www.youtube.com/watch?v =0YEPy7HRf60

  2. En la página, agregue un elemento Web de lista y seleccione la lista con los identificadores de video.

  3. Agregue un elemento Web incrustar.

  4. Haga clic en Editar elemento web Botón de edición del elemento Web en el lado izquierdo del elemento Web incrustado.

  5. Haga clic en los puntos suspensivos (...) en la parte superior derecha del panel de propiedades y, a continuación, haga clic en conectar con el origen.

    Botón conectar a origen
  6. En conectar al origen, seleccione la lista de la lista desplegable.

  7. En dirección del sitio web o código para insertar, agregue el vínculo de YouTube. Sin embargo, en lugar de usar un identificador de vídeo individual, use el nombre de la columna de lista que contiene los identificadores como una variable. Una variable se denota con un corchete de apertura, un $ y un corchete de cierre después del nombre. A continuación se muestra un ejemplo en el que el identificador de video es el nombre de la columna:

    Insertar el panel de propiedades del elemento Web que muestra la lista conectada

  8. Haga clic en Guardar como borrador en la parte superior de la página.

  9. Pruebe su conexión seleccionando un elemento de la lista que ha elegido. Debería ver el vídeo en el elemento Web incrustar.

  10. Cuando esté listo para que la audiencia vea la página, haga clic en publicar en la parte superior derecha de la página.

Mostrar una imagen seleccionada

En este ejemplo, el elemento Web lista contiene los títulos de imagen y las direcciones URL de las imágenes almacenadas en un sitio de SharePoint. Cuando un usuario elige una imagen de la lista, el elemento Web insertar muestra esa imagen. En este ejemplo, el código de IFrame se usa en el elemento Web de incrustación y la variable representa el vínculo de imagen.

Ejemplo de un elemento Web incrustado conectado a una lista de imágenes

Para ello, realice lo siguiente:

  1. Cree una lista que tenga una columna de título y una columna para las direcciones URL de las imágenes.

    Sugerencia: Para obtener una URL para la imagen, vaya a la biblioteca donde está almacenada la imagen, haga clic con el botón secundario en la imagen y haga clic en Copiar vínculo. A continuación, haga clic en copiar. Ahora puedes pegar el vínculo en tu lista.

  2. En la página, agregue un elemento Web de lista y seleccione la lista con las direcciones URL de la imagen.

  3. Agregue un elemento Web incrustar.

  4. Haga clic en Editar elemento web Botón de edición del elemento Web en el lado izquierdo del elemento Web incrustado.

  5. Haga clic en los puntos suspensivos (...) en la parte superior derecha del panel de propiedades y, a continuación, haga clic en conectar con el origen.

    Botón conectar a origen
  6. En conectar al origen, seleccione la lista de la lista desplegable.

  7. En dirección del sitio web o código para insertar, agregue el código para insertar. En este ejemplo, el código para insertar es:

    <iframe width = "693" height = "390" src = "[$Image URL]" frameBorder = "0" allowFullScreen = "" Allow = "Accelerometer; reproducción automática archivos multimedia cifrados; gyroscope; imagen en imagen "></iframe>

    donde [$Image URL] es la variable que representa el nombre de columna de las direcciones URL de la imagen.

    Ejemplo de código para insertar una imagen seleccionada
  8. Haga clic en Guardar como borrador en la parte superior de la página.

  9. Pruebe su conexión seleccionando un elemento de la lista que ha elegido. Verá la imagen en el elemento Web insertar.

  10. Cuando esté listo para que la audiencia vea la página, haga clic en publicar en la parte superior derecha de la página.

Mostrar una ubicación seleccionada

En este ejemplo, el elemento Web lista contiene ubicaciones y sus coordenadas. Cuando un usuario elige una ubicación de la lista, el elemento Web insertar muestra esa ubicación en un mapa de Bing. En este ejemplo, se usa el código IFrame en el elemento Web embed y las variables representan las coordenadas.

Ejemplo de un elemento Web de incrustación conectado que muestra una ubicación de una lista

Para ello, realice lo siguiente:

  1. Cree una lista que tenga una columna de título y columnas para la longitud y latitud.

  2. En la página, agregue un elemento Web de lista y seleccione la lista con la información de ubicación.

  3. Agregue un elemento Web incrustar.

  4. Haga clic en Editar elemento web Botón de edición del elemento Web en el lado izquierdo del elemento Web incrustado.

  5. Haga clic en los puntos suspensivos (...) en la parte superior derecha del panel de propiedades y, a continuación, haga clic en conectar con el origen.

    Botón conectar a origen
  6. En conectar al origen, seleccione la lista de la lista desplegable.

  7. En dirección del sitio web o código para insertar, agregue el código para insertar. En este ejemplo, el código para insertar es:

    <iframe de ancho = "500" height = "400" src = "https://www.Bing.com/maps/embed? h = STY-x,&amp; w = 500&amp;. CP = [$Latitude] ~ [$Longitude] &amp; alto = 13&amp; Typ = amp; = r&amp; src = SHELL&amp; FORM = MBEDV8 "frameBorder =" 0 "scrolling =" no "> </iframe>

    donde [$Latitude] y [$Longitude] son las variables que representan los nombres de columna de cada uno de esos puntos.

    Ejemplo de código para insertar para mostrar ubicaciones
  8. Haga clic en Guardar como borrador en la parte superior de la página.

  9. Pruebe su conexión seleccionando un elemento de la lista que ha elegido. Debería ver un mapa de Bing que muestra la ubicación que se muestra en el elemento Web insertar.

  10. Cuando esté listo para que la audiencia vea la página, haga clic en publicar en la parte superior derecha de la página.

Notas: 

  • El código para insertar debe estar basado en iframe (es decir, empezar y finalizar con <etiquetas iframe>). No se admite el código para insertar que usa <etiquetas de> de script.

  • Solo se pueden incrustar sitios Web seguros. Asegúrese de que la dirección URL del sitio web comienza con HTTPS.

Filtrar una lista basándose en una selección de otra lista o biblioteca

Con el filtrado dinámico, puede filtrar una lista en función de una selección realizada en otra lista. En el siguiente ejemplo, la biblioteca de documentos de planeación se filtra por una selección en la lista información del proyecto. El valor "Marketing" de la columna equipo del proyecto está seleccionado, de modo que solo se muestran en la biblioteca de documentos de planeación los documentos que pertenecen al equipo de marketing. 

Lista filtrada dinámicamente

Para ello, realice lo siguiente:

  1. En la página, agregue un elemento Web de lista o un elemento Web de biblioteca y seleccione la lista o biblioteca con los valores por los que desea filtrar.

  2. Agregue otro elemento Web de lista o un elemento Web de biblioteca y seleccione la lista o biblioteca que contiene la información que desea filtrar.

  3. Seleccione el elemento Web de lista o biblioteca que desee filtrar y, a continuación, seleccione Editar elemento web Botón de edición del elemento Web en el lado izquierdo del elemento Web.

  4. En filtrado dinámico, deslice el botón de alternancia a la posición activado .

  5. Seleccione la columna que desea filtrar en la columna campo en [el nombre de la lista] para filtrar.

  6. En lista o biblioteca que contiene el valor del filtro, seleccione la lista o biblioteca que ha agregado a la página en el paso 1.

  7. En columna que contiene el valor de filtro, seleccione la columna que tiene los valores por los que desea filtrar.

  8. Seleccione Aplicar.

    Con la imagen de ejemplo al principio de la sección, las opciones de filtrado dinámico para la biblioteca de documentos de planeación tendrían el aspecto siguiente:

    Biblioteca de documentos con el panel abierto para las opciones de filtrado dinámico

  9. Cuando haya terminado, haga clic en Guardar como borrador en la parte superior de la página, o bien, si está listo para que el público vea la página, seleccione publicar en la parte superior derecha de la página.

¿Necesita más ayuda?

Ampliar sus conocimientos
Explorar los cursos
Obtener nuevas características primero
Unirse a Microsoft Office Usuarios de Insider

¿Le ha sido útil esta información?

¿Cuál es tu grado de satisfacción con la calidad del lenguaje?
¿Qué ha afectado a tu experiencia?

¡Gracias por sus comentarios!

×