Agregar ventanas

Las ventanas son paneles que puede configurar para que se abran cuando se cargue la aplicación o una página, o cuando el usuario haga clic en un widget. Las ventanas son apropiadas para agregar pantallas de presentación, mensajes de confirmación, tutoriales y alertas a sus experiencias web.

Para agregar ventanas a una experiencia web, vaya al panel Página, haga clic en la pestaña Ventana, haga clic en el botón Agregar ventana y seleccione una plantilla. A diferencia de las páginas, las ventanas solo tienen contenido de cuerpo. Cuando agrega widgets a una ventana, aparecen en la sección Contorno de la pestaña Ventana y en el menú de navegación rápida de la parte inferior de la ventana del builder.

Las ventanas se agrupan en dos categorías, fijas y ancladas. Puede apuntar a una ventana en el panel y hacer clic en Establecer como presentación si la ventana no está conectada para abrirse con una página. Para cambiar el nombre de una ventana, duplicarla o eliminarla, haga clic en el botón Más de la ventana y elija Cambiar nombre, Duplicar o Eliminar. Al agregar una ventana nueva, su etiqueta sigue una regla de numeración consecutiva. Por ejemplo, al duplicar Ventana 1 se genera Ventana 2, o Ventana 3 si ya existe Ventana 2. Para ventanas fijas (excepto ventanas de presentación), el nombre de la ventana también se utiliza en la URL de la experiencia. (Si cambia el nombre de una ventana después de publicar, las direcciones URL utilizadas anteriormente seguirán funcionando).

Utilice las siguientes opciones para administrar las ventanas de una aplicación:

• Las ventanas de presentación que se abren con la experiencia web se pueden establecer en el panel Ventana. Apunte a una ventana de Ventanas fijas (excepto a aquellas que estén conectadas para abrirlas en una página) y haga clic en el botón Establecer como presentación. Una experiencia web puede tener una ventana de presentación.
• Para que una ventana se abra con una página, vaya a la configuración de Página y elija una ventana fija en el menú Abrir con ventana. Las ventanas establecidas como presentación no aparecen en las opciones. Una vez que se establece que se abra una ventana con una página, aparece el icono Abrir con página junto a ella en el panel Ventana. Apunte al icono de información sobre herramientas con el nombre de la página conectada. Las ventanas de página solo aparecen una vez en la experiencia web a menos que el usuario actualice el navegador.
• Configure Definir vínculo para abrir una ventana con un ajuste de widget. En una ventana de widget Definir vínculo, en Vínculo, elija Ventana y seleccione una ventana anclada o fija (excepto presentación). Las ventanas desencadenadas por widgets aparecen cada vez que un usuario hace clic en el widget.

Configuración

Las ventanas incluyen los siguientes ajustes de configuración:

• Modo
  • Fija: aparece en una posición fija.
  • Anclada: aparece junto al widget vinculado

  Nota:

  Puede cambiar un modo de ventana en su configuración; sin embargo, debido a los diferentes mecanismos de activación para ventanas fijas que se establecen como presentación o se conectan para abrirse con una página, no puede cambiarlos al modo Anclada (y viceversa).

• Posición y tamaño
  • Posición: para ventanas fijas, puede utilizar la cuadrícula para fijar la ventana de modo que aparezca en uno de los nueve puntos de anclaje de la página. (Aparecen ventanas ancladas junto al widget asociado y la posición se establece automáticamente).
  • Tamaño: puede especificar los valores para el ancho y la altura en píxeles (px) para una ventana anclada y en píxeles o porcentaje del lienzo (%) para una ventana fija. También puede arrastrar los bordes de la ventana para cambiar su tamaño. En una ventana fija, el modo Personalizado le permite establecer valores específicos y agregar desplazamientos, y el modo Extensión le permite especificar valores para los márgenes de la ventana.
    • Desplazamiento X: establezca el desplazamiento horizontal de la ventana. Un valor negativo desplaza la ventana hacia la izquierda, mientras que un valor positivo la desplaza hacia la derecha.
    • Desplazamiento Y: establezca la distancia vertical de la ventana. Un valor negativo desplaza la ventana hacia arriba, mientras que un valor positivo la desplaza hacia abajo.
    • Márgenes: defina la cantidad de espacio entre un borde de la ventana y el borde correspondiente del lienzo. Si establece el ancho de una ventana en Extensión, puede especificar valores para los márgenes Izquierdo y Derecho. Si establece la altura de una ventana en Extensión, puede especificar valores para los márgenes Superior e Inferior.

  Nota:

  Cuando la ventana utiliza un diseño personalizado para dispositivos de pantalla mediana o pequeña, puede personalizar la posición, el tamaño y el diseño de la ventana. Los iconos de la configuración de posición y tamaño indican el tamaño de pantalla (grande, mediano y pequeño) que se aplica a la configuración.

• Bloquear página: impida que el usuario haga clic o interactúe de otro modo con otras partes de la aplicación mientras la ventana esté activa. Este ajuste solo está disponible para ventanas fijas.
  • Color de máscara: elija un color para la máscara que rellena el espacio alrededor de la ventana.
• Opciones de cierre
  • Hacer clic fuera para cerrar la ventana: permita que los usuarios cierren una ventana haciendo clic en cualquier lugar fuera de ella.

    Nota:

    Si desactiva Bloquear página para una ventana fija, este ajuste no estará disponible.

  • Interacción (modo fijo solamente): agregue una interacción en la parte inferior de la ventana.
    • Estilo: elija un diseño para la casilla de verificación y el botón.
    • Tipo: elija el tipo de interacción de la ventana.
      • Confirmación: requiere que los usuarios finales activen la casilla de verificación para cerrar la ventana. Esta restricción se aplica a todos los métodos de cierre. Esta interacción muestra la ventana una vez de manera predeterminada, a menos que active Mostrar siempre esta ventana.
      • Opción "No volver a mostrar": los usuarios finales marcan esta casilla en la ventana para evitar que se vuelva a abrir. También puede cerrar la ventana con este cuadro activado o sin activar.

        Sugerencia:

        Para que vuelva a aparecer la ventana después de activar el cuadro, guarde la experiencia otra vez y abra su vista previa o vuelva a publicar la experiencia y visualice el elemento publicado.

    • Texto de la casilla de verificación: proporcione el texto que aparecerá junto a la casilla de verificación y cambie el tamaño de la fuente (en píxeles o rem).
    • Texto del botón: proporcione el texto que aparecerá en el botón (si corresponde) y cambie el tamaño de la fuente (en píxeles o rem).
  • También puede agregar un widget de botón en la ventana para cerrarlo. Utilice Definir vínculo en la configuración del botón y vincule el botón con una página para cerrarlo. Si necesita establecer varias páginas para abrirlas con una única ventana o botones en diferentes páginas vinculados a una única ventana, la vinculación con una página específica no resulta práctica para estas condiciones, por lo que puede establecer el vínculo a la página actual para volver a la página que activa la ventana.

    Nota:

    Aunque se puede establecer el vínculo de los botones de una ventana con otra ventana de la aplicación, no se recomienda.

• Animación: agregue animación para la ventana y para su widget contenido.
• Fondo: elija un color o imagen de relleno para establecer el fondo de la ventana. Utilice el botón Estilo rápido para seleccionar entre diseños predefinidos que se coordinen con el tema de la aplicación.
• Borde: elija el color, estilo y ancho para el borde de la ventana. Puede cambiar el tamaño del radio para dar forma a las esquinas de la ventana. Utilice el botón Estilo rápido para seleccionar entre diseños predefinidos que se coordinen con el tema de la aplicación.
• Sombra del cuadro: agregue un efecto de sombra alrededor de la ventana. Utilice el botón Estilo rápido para seleccionar entre diseños predefinidos o utilice esta configuración:
  • Desplazamiento X: establezca la distancia horizontal de la sombra. Un valor negativo coloca la sombra a la izquierda de la ventana y un valor positivo la coloca a la derecha.
  • Desplazamiento Y: establezca la distancia vertical de la sombra. Un valor negativo coloca la sombra sobre la ventana y un valor positivo la coloca debajo.
  • Radio de desenfoque: aplique un efecto de desenfoque en la sombra.
  • Radio de propagación: ajuste el tamaño de la sombra.
  • Color: seleccione un color.

Plantillas

Experience Builder contiene las siguientes plantillas de ventanas:

• Las plantillas Bloqueador fijo son apropiadas si desea bloquear la interacción con el resto de la aplicación hasta que el usuario cierre la ventana.
  • Ventana en blanco es una plantilla vacía.
  • Confirmar es un preajuste de plantilla con una confirmación de cierre y está diseñado para el contenido que necesita verificación o revisión para continuar.
  • Alerta es una plantilla que permite a los usuarios aceptar o rechazar un mensaje.
  • Las plantillas Simple y Vogue son dos diseños diferentes concebidos para mostrar o introducir información.
  • Nueva proporciona un diseño con un botón de cierre fuera del contenido principal.
  • Barra lateral es una plantilla situada a la derecha de forma predeterminada y está diseñada para mostrar texto largo para desplazarse verticalmente.
  • Carrusel es una plantilla para una ventana más grande para mostrar varias imágenes y contenido en una vista cíclica.
  • Particulares es una plantilla para una ventana más grande que proporciona más información mediante un gráfico, una tabla, una lista, imágenes, botones y opciones de uso compartido en redes sociales.
• Las plantillas Paso fijo son apropiadas si desea que los usuarios interactúen con una ventana en paralelo con otras partes de la aplicación.
  • Nota al pie aparece en la parte inferior del diseño de la aplicación con una animación flotante.
  • Información del elemento aparece a la derecha del diseño de la aplicación con una animación con vuelo de entrada.
• Las plantillas Ancladas son apropiadas si desea vincular una ventana a un widget.
  • La Información sobre herramientas es apropiada para proporcionar más información sobre el widget vinculado, que puede ser un widget Botón o Imagen.
  • Los Pasos están diseñados para mostrar o introducir información en varias vistas.

Parámetros de la URL

La siguiente es una lista de parámetros de URL que puede usar para controlar el comportamiento de las ventanas.

Abrir una ventana

Para dirigir a una ventana activa específica, utilice dlg seguido de un Id. o etiqueta de ventana.

https://experience.arcgis.com/experience/<AppId>/?dlg=Window-1

Controlar el enfoque en ventana

Para integrar una aplicación de Experience Builder con ventanas de presentación o ventanas de página sin que la aplicación se mueva automáticamente a dichas ventanas, utilice el parámetro disable_window_focus para controlar el comportamiento. Agregue la siguiente URL a la página web del host para evitar el comportamiento de movimiento. De forma predeterminada, el valor de disable_window_focus es false.

https://experience.arcgis.com/experience/<AppId>/?disable_window_focus=true

Para controlar el enfoque de la ventana para una ventana específica, utilice dlg seguido por un Id. de ventana o etiqueta y el parámetro disable_window_focus, como en el siguiente ejemplo:

https://experience.arcgis.com/experience/<AppId>/?dlg=Window-1&disable_window_focus=true