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 pueden funcionar como herramientas de la aplicación o como contenedores para organizar la página, y se agrupan en seis categorías:
- Los widgets basados en mapas son herramientas de aplicación que se conectan a un widget Mapa.
- Los widgets basados en datos son herramientas de aplicación que interaccionan con fuentes de datos.
- los widgets de elemento de página sirven para agregar imágenes, texto y otro tipo de contenido multimedia.
- Los widgets de menús y barras de herramientas ofrecen opciones que pueden ayudar a los usuarios a utilizar y compartir su aplicación.
- Los widgets de diseño son los contenedores que ayudan a organizar widgets en la página.
- Los widgets de sección presentan contenido dinámico en varias vistas y permiten a los usuarios cambiar de vista.
Al agregar y anidar widgets, consulte la lista interactiva de cada página, que muestra la jerarquía de widgets de la página y le ayuda a organizar, seleccionar y configurar widgets anidados. Al pasar el cursor por 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. Para los widgets que contienen otros widgets, haga clic en Expandir todo o Contraer todo para mostrar u ocultar la jerarquía subyacente.
Utilice los accesos directos estándar del teclado de copiar y 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 y la etiqueta. Las etiquetas de widget nuevas siguen una regla de numeración consecutiva. Por ejemplo, al duplicar Imagen 1 se genera Imagen 2, o Imagen 3 si ya existe Imagen 2. 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 aparecen líneas de alineación, los widgets correspondientes se alinean 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, puede 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 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 mediante la opción Definir vínculo, que le permite dirigir a los usuarios a otra página, ventana o vista de sección de su aplicación; a una vista previa de impresión; o a 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: el vínculo dirige a una página diferente en su aplicación.
- Vista: el vínculo dirige a una vista específica en un widget Sección.
- Ventana: el vínculo abre una ventana específica en su aplicación.
- URL*: el vínculo lleva a una dirección web (escriba una URL que empiece por https://).
- Vista previa de impresión: el vínculo dirige a una vista previa de impresión.
- Bloque: el vínculo se desplaza a un bloque específico de la misma página de desplazamiento en su aplicación. (No está disponible para el widget Texto).
- Inicio de página: el vínculo se desplaza hacia el inicio de la página. (No disponible para el widget Texto).
*También puede usar la opción URL para vincular a una dirección de correo electrónico, número de teléfono, etc. (Por ejemplo, escriba mailto:alguien@ejemplo.com). Actualmente, Definir vínculo admite los siguientes esquemas URI:
| Esquema | Propósito | Notas de uso | Formato | Ejemplos |
|---|---|---|---|---|
| https | Direcciones web | https://xxx | https://www.esri.com | |
| mailto | Direcciones de correo electrónico | Los encabezados son opcionales, pero a menudo incluyen subject=. Preconfigure el cuerpo de un mensaje utilizando body=. | mailto:<address> mailto:<address>[?<header1>=<value1>[&<header2>=<value2>]] | mailto:jsmith@ejemplo.com mailto:jsmith@ejemplo.com?subject=A%20Test&body=My%20idea%20is%3A%20%0A |
| tel | Números de teléfonos | tel:<phonenumber> | tel:+18883774575 | |
| sms | Mensajes de texto SMS | Existen pequeñas diferencias de formato al utilizar el esquema sms para Android frente a dispositivos iOS. | Android: sms:<phone number>[?actions] iOS: sms://<phone number>[&actions] | sms:+11234567890?body=hello%20there sms:+11234567890,+11234567891?body=hello%20there sms://+11234567890&body=111222Hello%20There%20Hi! |
| ftp | Recursos FTP | Utilice una sintaxis genérica para los recursos FTP. | ftp://xxx | ftp://user/example.com |
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.