Agregar y conectar widgets

Agregue widgets funcionales y de diseño a las aplicaciones que cree con Experience Builder. Puede aceptar estilos predeterminados o personalizar la apariencia y conectar widgets a datos, vínculos y otros widgets para disfrutar de una experiencia web única.

Insertar widgets

Los widgets son los bloques de construcción de sus aplicaciones. Si no utiliza widgets en las diversas plantillas disponibles para páginas, ventanas, grupos de pantallas y bloques, puede agregar widgets del panel Insertar widget mediante el método de arrastrar y soltar. Los widgets Marcador de posición y Controlador de widget, así como los paneles de desplazamiento de un grupo de pantallas, también tienen un botón Agregar widget. Los widgets se agrupan en las categorías básica y de diseño. Los widgets básicos son widgets funcionales que pueden comportarse como herramientas de aplicaciones y los widgets de diseño son los contenedores para organizar widgets en la página.

A medida que agregue y anide widgets, consulte la vista contorno interactiva de cada página, que muestra la jerarquía de widgets para la página y le ayuda a organizar, seleccionar y configurar widgets anidados. Al pasar el ratón por encima de un widget en el contorno, el widget correspondiente se resalta en el lienzo. En el contorno, haga clic en un widget y, a continuación, en el botón Más para ver un menú de operaciones del widget como, por ejemplo, cambiar el nombre, duplicar, eliminar, posición de bloqueo y tamaño, chincheta, organizar y alinear. Utilice los accesos directos estándar del teclado de copiar/pegar (Ctrl+C y Ctrl+V para Windows; Cmd-C y Cmd-V para Mac) para copiar widgets en páginas. Al duplicar o copiar un widget se conserva toda su configuración, excepto la posición en la página. Al arrastrar widgets por el lienzo para moverlos y cambiar su tamaño se muestran valores de líneas o distancias de alineación que le ayudan a alinear y posicionar con precisión widgets en un diseño fijo. Cuando aparezcan líneas de alineación, los widgets correspondientes se alinearán juntos en todas las resoluciones de pantalla.

La pestaña Pendiente en el panel Insertar widget resulta útil cuando necesita diseñar su aplicación para varios tamaños de pantalla. Por ejemplo, podría haber un requisito de diseño donde el widget de mapa se implemente en tamaños de pantalla grandes y medianos, aunque no en tamaños de pantalla pequeños. En este caso, podría quitar el widget de mapa del diseño de tamaño de pantalla pequeño y agregarlo a la lista de pendientes.

Conectar widgets

El panel de configuración de widget incluye los ajustes Contenido, Estilo y Acción. Contenido define el comportamiento, conexiones de datos y otros ajustes del widget. Los widgets se alinean y diseñan en la pestaña Estilo con ajustes como el tamaño, la posición, la animación, el fondo, el borde y la sombra del cuadro. La ubicación de los paneles de widget se recuerda en la aplicación en vivo. También puede utilizar las barras de herramientas del widget para alinear, eliminar o duplicar widgets.

Algunos widgets permiten agregar acciones que permiten la comunicación entre widgets. Por ejemplo, la acción de un widget desencadena la acción de otro widget, por ejemplo, hacer clic en una entidad geográfica de mapa para actualizar los detalles de la entidad que se muestran en un widget Información de entidad. Puede agregar acciones de mensaje para interacción automática o acciones de datos para que los usuarios finales accedan en el tiempo de ejecución desde un menú Acciones. Combine herramientas y widgets y conéctelos para obtener interactividad adicional. Ayude a los usuarios finales a navegar por su aplicación definiendo vínculos a otros contenidos, tales como páginas, ventanas y vistas de sección.

Definir vínculos

Puede agregar un hipervínculo a su contenido con la opción Definir vínculo que le permite dirigir a usuarios finales a otra página, ventana o vista de sección en su aplicación o en otra dirección web. En las páginas de desplazamiento, puede configurar vínculos de widgets para desplazarse a un bloque concreto de la página o volver a la parte superior de la página. Los siguientes widgets permiten establecer un vínculo:

Configuración

Al establecer un vínculo, puede elegir entre las siguientes opciones:

  • Página: vínculo que dirige a una página diferente en su aplicación.
  • Vista: vínculo que dirige a una vista específica en un widget Sección.
  • Ventana: vínculo que abre una ventana específica en su aplicación.
  • URL: vínculo que lleva a una dirección web (escriba una URL que empiece por https://).
  • Bloque: un vínculo que lleva a un bloque específico de la misma página de desplazamiento en su aplicación (no está disponible para el widget de texto).
  • Parte superior de página: un vínculo que lleva a la parte superior de la página. (No disponible para el widget Texto).

También puede decidir dónde debe abrirse el contenido vinculado:

  • Ventana de aplicación: el contenido vinculado se abre en la ventana del navegador actual que utiliza su aplicación.
  • Ventana superior: el contenido vinculado se sitúa fuera de todos los cuadros en los que está anidado y se abre en la parte superior de otras ventanas abiertas.
  • Nueva ventana: el contenido vinculado se abre en una nueva ventana del navegador, manteniendo la aplicación abierta en otra ventana.