Paneles Frame en Jitterbit App Builder

Descripción general

Un panel Frame es un tipo de panel que permite cargar páginas en un área fija de la pantalla, en lugar de reemplazar la pantalla completamente. A diferencia de otros tipos de panel, un panel Frame no tiene contenido propio: existe solo para recibir cualquier página que un enlace en otra parte de la pantalla envíe hacia él. Esto se utiliza más comúnmente para construir un menú de navegación lateral persistente, donde el menú en sí permanece en pantalla mientras el panel Frame carga la página que el lector seleccionó.

Un panel Frame necesita estar emparejado con otro panel que envíe contenido hacia él, ya que no tiene controles de navegación propios. Por ejemplo, la siguiente página empareja un panel Frame a la derecha con un menú de navegación lateral a la izquierda, construido a partir de un panel Form con campos de icono configurados como enlaces de navegación: al hacer clic en un icono se carga la página correspondiente en el panel Frame.

Esta página cubre:

• Crear y posicionar un panel Frame
  Cómo agregar un panel Frame a una página y controlar dónde aparece.

• Navegar dentro y fuera de un panel Frame
  Cómo controlar el comportamiento de los enlaces dentro y fuera de un panel Frame, incluyendo salir completamente de uno, usar la opción Replace Page In History dentro de uno y vincular a uno con una URL personalizada.

• Páginas dentro de un panel Frame
  Cómo App Builder decide qué página carga en un panel Frame de forma predeterminada, cómo una página cargada puede hacer referencia al panel Frame en el que se está ejecutando y cómo un panel Frame recarga los datos de su página contenedora.

Al final de la página, también hay un ejemplo práctico que demuestra varias de estas características.

Crear y posicionar un panel Frame

Como cualquier otro tipo de panel, se agrega un panel Frame a una página usando el asistente Create a panel, seleccionando Frame como el tipo de panel. La posición y el tamaño de un panel Frame se rigen por el mismo Panel layout service que cualquier otro panel, por lo que puede posicionarse en cualquier lugar donde normalmente iría un panel en la página.

Navegar dentro y fuera de un panel Frame

Esta sección describe cómo controlar el comportamiento de los enlaces dentro y fuera de un panel Frame, incluyendo cómo salir completamente de un panel Frame, cómo se comporta Replace Page In History dentro de uno y cómo vincular directamente a un panel Frame usando una URL personalizada.

Salir del panel Frame

Configurar el Link Target de un panel a Exit Frame Panel permite que un enlace dentro de un panel Frame navegue en toda la pantalla en lugar de cargar su destino en el panel Frame. También se puede navegar fuera de un panel Frame usando Link To Page (desde la pestaña Update Methods) o un Popup en su lugar, si no se desea el efecto de reemplazar toda la pantalla. Consulta Configure how linked pages open para ver el conjunto completo de opciones de Link Target y Link To Page.

Usar la opción Replace Page In History en un panel Frame

La configuración Link To Page de un control también puede usar Replace Page In History cuando ese control se encuentra dentro de un panel Frame, la misma configuración que se describe en Configure how linked pages open. Esto es especialmente útil para un menú de navegación lateral construido con un panel Frame: sin Replace Page In History, hacer clic en varios enlaces de menú seguidos agrega un nuevo punto al historial de páginas para cada clic, por lo que presionar < Back solo retrocedería a través del propio historial del menú un enlace a la vez antes de llegar a la página que el lector tenía abierta antes de comenzar a usar el menú. Con Replace Page In History habilitado en los enlaces del menú, hacer clic en enlaces adicionales reemplaza el contenido del panel Frame en su lugar en lugar de agregar nuevos puntos, por lo que presionar < Back regresa inmediatamente a la página que estaba abierta antes de que el lector comenzara a usar el menú.

Vincular a un panel Frame con una URL personalizada

Cuando se vincula por primera vez a una página desde fuera de cualquier contexto de panel Frame (una página llamada ContainerPage, por ejemplo), la URL se ve como una URL de página normal: /app/MyApplication/ContainerPage. Una vez que App Builder carga una página en un panel Frame en esa página, actualiza inmediatamente la barra de direcciones del navegador para reflejar ambas páginas: /app/MyApplication/ContainerPage/**PageInFrame**.

También se puede vincular directamente a una página específica dentro de un panel Frame construyendo una URL entrante en este mismo formato. Para filtrar qué página se carga en un panel Frame por un valor de columna, añade &Framed.{{ColumnName}}={{ColumnValue}} después de los nombres de la aplicación y página en la primera parte de la URL, por ejemplo: app/MyApplication/OuterPage/MyApplication/InnerPage?OuterPageCriteria=123&Framed.InnerPageCriteria=456.

Páginas dentro de un panel Frame

Esta sección describe cómo se comportan las páginas que se cargan dentro de un panel Frame, incluyendo cómo App Builder decide qué página se carga por defecto, cómo una página cargada puede hacer referencia al panel Frame en el que se ejecuta desde mvSQL, y cómo un panel Frame recarga los datos de su página contenedora.

Página predeterminada

App Builder utiliza la configuración Link To Page propia de un panel Frame para decidir qué página renderizar dentro de él por defecto, antes de que el lector haya hecho clic en algo. Solo la configuración Link To Page de un panel controlado por datos admite criterios de selección para este propósito. Deja la configuración Link To Page de un panel Frame en blanco si prefieres esperar a que un panel vinculado, como un botón de panel Form, proporcione la página predeterminada del panel Frame.

La función Page()

App Builder proporciona una función mvSQL llamada Page() que los objetos de datos de una página pueden llamar para determinar qué página está actualmente cargada, incluyendo cuando esa página se carga dentro de un panel Frame. Llamada sin parámetro, Page() devuelve el UUID de la página más superior actualmente abierta. Cuando una página se renderiza dentro de un panel Frame, esto permite que los objetos de datos de esa página sean conscientes del contexto en el que se ejecutan, por ejemplo para resaltar el enlace de navegación actualmente activo, o para unirse a la regla App_Page y buscar el nombre de esa página para una etiqueta de página personalizada. Llamada en su lugar con el parámetro de cadena 'frame', Page() devuelve el UUID de cualquier página que esté actualmente cargada en el panel Frame.

Recarga de datos

Cuando App Builder procesa un enlace dentro de un panel Frame, dispara una recarga global en la página contenedora a la que pertenece el panel Frame. Esto es útil cuando esa página contenedora también tiene un panel de una sola fila utilizado como menú de navegación, ya que la recarga permite que el objeto de datos de ese panel se actualice, por ejemplo para cargar el título o icono de la página con marco, o para aplicar formato condicional que resalte el enlace del menú actualmente activo (usando la función Page() descrita arriba).

Ejemplo: navegación lateral usando un panel Frame

La siguiente página combina un panel Frame en la parte superior con un panel Form debajo. El campo Categories del panel Form es el primer valor PageLinks definido, y sus dos campos de icono enlazan a las páginas Products y Categories, cargando cada una en el panel Frame anterior. Este ejemplo utiliza estas técnicas:

• Pestañas, con un tamaño mínimo de panel de 1, para que el panel Frame y el panel Form siempre se muestren juntos.
• Un pequeño panel Form.
• Formato condicional que resalta el icono de página actualmente mostrado en el panel Frame.
• Un tema personalizado que estiliza los enlaces de icono lado a lado horizontalmente y con espaciado uniforme.