Panel de marco en Jitterbit App Builder

Un Panel de Marco permite que una página reserve un espacio en la pantalla donde se cargará el enlace de la página seleccionada. Los Marcos son tipos de Panel sin contenido propio. Cuando existe un Marco en una pantalla, la navegación de la página se dirigirá a su área en lugar de ocupar toda la pantalla. Esta función permite mostrar un menú de navegación lateral, y luego el contenedor de Marcos representa el contenido de la página asociada según el enlace de navegación seleccionado en dicho menú.

Página de ejemplo con menú de navegación lateral a la izquierda y un panel de marco a la derecha

Cómo crear un marco

Para crear un marco, puede crear una página nueva o añadirlo a una página existente en una aplicación. Para el tipo de panel, seleccione Marco.

El Servicio de Diseño de Paneles trata los marcos de la misma manera que cualquier otro panel. Esto significa que puede configurar la posición, el elemento principal y el tamaño, lo que le permite colocar el marco en cualquier lugar donde normalmente se ubicaría un panel.

Si desea que el usuario navegue fuera del marco del panel al enlazar a una página dentro de la aplicación, puede usar Enlazar a página (desde Métodos de actualización) o usar una ventana emergente para salir del marco.

Para que un marco funcione, debe estar emparejado con otro panel que gestione el contenido que se cargará en él. Por ejemplo: un panel de formulario que muestra los botones del menú de navegación.

Página de ejemplo con marco

Esta página es un marco en la parte superior y un panel de formulario en la inferior. Categorías es el primer Enlace de página definido. El panel de formulario tiene dos campos de icono que enlace a las páginas de Productos y Categorías. Técnicas utilizadas:

1. Uso de pestañas, con un tamaño de panel mínimo establecido en 1 para que los paneles Marco y Formulario siempre se muestren juntos
2. Panel de formato extra pequeño
3. Formato condicional para resaltar el ícono de la página que se muestra actualmente en el Marco
4. Tema personalizado para diseñar enlaces de íconos uno al lado del otro de manera horizontal y con un espaciado uniforme.

Reemplazar página en el historial

El enlace a página a nivel de campo puede usar Reemplazar página en el historial en un marco. Si se usa en una barra lateral, al hacer clic en varios enlaces se reemplazará el contenido del marco, pero al presionar el botón Atrás se regresará a la página anterior.

Página predeterminada

El App Builder consulta el Enlace a la Página configurado en el Panel de Marco para mostrar una página antes de que el usuario haga clic en ningún elemento. Tenga en cuenta que solo los enlaces de un panel basado en datos admiten criterios. Puede dejar el enlace a la página en blanco si desea esperar a que el botón del Panel de Formulario muestre la página predeterminada del marco.

Función de tiempo de ejecución de mvSQL llamada page()

Esta función proporciona una función mvSQL llamada Page(). Sin un parámetro, se proporcionará el UUID de la página superior. Si una página se renderiza en un marco, sus objetos de datos podrán conocer el contexto desde el que se ejecuta. Esto puede usarse para, por ejemplo, resaltar el enlace activo o unirse a la página. App_PageRegla para obtener el nombre de la página para una etiqueta de página personalizada.

La función también acepta un único parámetro de cadena. 'frame', para determinar qué página está cargada actualmente en el marco.

Nota

Este concepto funciona ahora en todas las páginas, incluso sin usar Frames

Recarga de datos

Cuando un marco procesa un enlace, App Builder realiza una recarga global en la página contenedora. Esto es útil si la página contenedora de nivel superior tiene un panel de una sola fila que funciona como menú. El objeto de datos puede actualizarse automáticamente para, por ejemplo, cargar el título y el icono de la página enmarcada o usar formato condicional para cambiar el color del enlace del menú activo (al usar la función Page()).

URL

Cuando se enlace por primera vez a una página ("ContainerPage", por ejemplo), la URL será: /app/MyApplication/ContainerPage

App Builder actualizará inmediatamente la barra de direcciones a: /app/MyApplication/ContainerPage/**PageInFrame**

Los enlaces entrantes se pueden personalizar para preincluir este formato si desea controlar qué páginas se cargan en un marco. El filtrado en la columna de un marco se realiza mediante &Framed.{{NombreDeColumna}}={{ValorColumna}} Después de los nombres de las aplicaciones y páginas en la primera parte de la URL:

app/MyApplication/OuterPage/MyApplication/InnerPage?OuterPageCriteria=123&Framed.InnerPageCriteria=456