Frame-Panels in Jitterbit App Builder

Übersicht

Ein Frame-Panel ist ein Paneltyp, der es ermöglicht, Seiten in einem festen Bereich des Bildschirms zu laden, anstatt den Bildschirm vollständig zu ersetzen. Im Gegensatz zu anderen Paneltypen hat ein Frame-Panel keinen eigenen Inhalt: es existiert nur, um Seiten zu empfangen, die von Links an anderer Stelle auf dem Bildschirm dorthin gesendet werden. Dies wird am häufigsten verwendet, um ein persistentes Navigationsmenü zu erstellen, bei dem das Menü selbst auf dem Bildschirm bleibt, während das Frame-Panel die vom Leser ausgewählte Seite lädt.

Ein Frame-Panel muss mit einem anderen Panel gekoppelt werden, das Inhalte dorthin sendet, da es keine eigenen Navigationssteuerungen hat. Die folgende Seite zeigt beispielsweise ein Frame-Panel auf der rechten Seite, gekoppelt mit einem Navigationsmenü auf der linken Seite, das aus einem Form-Panel mit Symbolfeldern besteht, die als Navigationslinks konfiguriert sind: Das Klicken auf ein Symbol lädt die entsprechende Seite in das Frame-Panel.

Diese Seite behandelt:

• Frame-Panel erstellen und positionieren
  Wie man ein Frame-Panel zu einer Seite hinzufügt und steuert, wo es angezeigt wird.

• Navigation in und aus einem Frame-Panel
  Wie man das Linkverhalten in ein und aus einem Frame-Panel steuert, einschließlich des vollständigen Verlassens eines Panels, der Verwendung der Option Replace Page In History innerhalb eines Panels und des Verlinken in ein Panel mit einer benutzerdefinierten URL.

• Seiten innerhalb eines Frame-Panels
  Wie App Builder entscheidet, welche Seite standardmäßig in ein Frame-Panel geladen wird, wie eine geladene Seite auf das Frame-Panel verweisen kann, in dem sie ausgeführt wird, und wie ein Frame-Panel die Daten der Container-Seite neu lädt.

Am Ende der Seite gibt es auch ein praktisches Beispiel, das mehrere dieser Funktionen demonstriert.

Frame-Panel erstellen und positionieren

Wie bei jedem anderen Paneltyp fügt man ein Frame-Panel mithilfe des Panel erstellen-Assistenten zu einer Seite hinzu und wählt Frame als Paneltyp aus. Die Position und Größe eines Frame-Panels werden durch denselben Panel-Layout-Service gesteuert wie jedes andere Panel, sodass es überall auf der Seite positioniert werden kann, wo normalerweise ein Panel platziert würde.

Navigation in und aus einem Frame-Panel

Dieser Abschnitt beschreibt, wie man das Linkverhalten in ein und aus einem Frame-Panel steuert, einschließlich der Möglichkeit, ein Frame-Panel vollständig zu verlassen, wie sich Replace Page In History innerhalb eines Panels verhält, und wie man direkt mit einer benutzerdefinierten URL in ein Frame-Panel verlinkt.

Frame-Panel verlassen

Das Setzen des Link Target eines Panels auf Exit Frame Panel ermöglicht es, dass ein Link innerhalb eines Frame-Panels den gesamten Bildschirm navigiert, anstatt sein Ziel in das Frame-Panel zu laden. Man kann ein Frame-Panel auch über Link To Page (aus dem Tab Update Methods) oder ein Popup verlassen, wenn das Ersetzen des gesamten Bildschirms nicht der gewünschte Effekt ist. Unter Konfigurieren, wie verlinkte Seiten geöffnet werden findet sich die vollständige Liste der Link Target- und Link To Page-Optionen.

Option „Replace Page In History" in einem Frame-Panel verwenden

Die Einstellung Link To Page eines Steuerelements kann auch Replace Page In History verwenden, wenn sich dieses Steuerelement innerhalb eines Frame-Panels befindet. Dies ist dieselbe Einstellung, die unter Konfigurieren, wie verlinkte Seiten geöffnet werden beschrieben wird. Dies ist besonders nützlich für ein mit einem Frame-Panel erstelltes Navigationsmenü: Ohne Replace Page In History fügt das Klicken auf mehrere Menülinks nacheinander für jeden Klick einen neuen Eintrag zur Seitenverlauf hinzu, sodass das Drücken von < Zurück nur den Verlauf des Menüs selbst einen Link nach dem anderen durchläuft, bevor die Seite erreicht wird, die der Leser hatte, bevor er das Menü zu verwenden begann. Mit Replace Page In History aktiviert auf den Links des Menüs wird das Klicken auf weitere Links den Inhalt des Frame-Panels an Ort und Stelle ersetzen, anstatt neue Einträge hinzuzufügen, sodass das Drücken von < Zurück sofort zur Seite zurückkehrt, die offen war, bevor der Leser das Menü zu verwenden begann.

In einen Frame-Panel mit einer benutzerdefinierten URL verlinken

Wenn Sie zum ersten Mal von außerhalb eines Frame-Panel-Kontexts auf eine Seite verlinken (z. B. eine Seite namens ContainerPage), sieht die URL wie eine normale Seiten-URL aus: /app/MyApplication/ContainerPage. Sobald App Builder eine Seite in einen Frame-Panel auf dieser Seite lädt, aktualisiert es sofort die Adressleiste des Browsers, um beide Seiten widerzuspiegeln: /app/MyApplication/ContainerPage/**PageInFrame**.

Sie können auch direkt auf eine bestimmte Seite in einem Frame-Panel verlinken, indem Sie eine eingehende URL in demselben Format erstellen. Um zu filtern, welche Seite basierend auf einem Spaltenwert in einen Frame-Panel geladen wird, fügen Sie &Framed.{{ColumnName}}={{ColumnValue}} nach den App- und Seitennamen im ersten Teil der URL hinzu, z. B.: app/MyApplication/OuterPage/MyApplication/InnerPage?OuterPageCriteria=123&Framed.InnerPageCriteria=456.

Seiten in einem Frame-Panel

In diesem Abschnitt wird beschrieben, wie sich die Seiten verhalten, die in einen Frame-Panel geladen werden, einschließlich der Feststellung, welche Seite App Builder standardmäßig lädt, wie eine geladene Seite das Frame-Panel, in dem sie ausgeführt wird, von mvSQL aus referenzieren kann, und wie ein Frame-Panel die Daten der Containerseite neu lädt.

Standardseite

App Builder verwendet die eigene Einstellung Link To Page eines Frame-Panels, um zu entscheiden, welche Seite standardmäßig darin gerendert werden soll, bevor der Leser etwas angeklickt hat. Nur die Einstellung Link To Page eines datengesteuerten Panels unterstützt Auswahlkriterien für diesen Zweck. Lassen Sie die Einstellung Link To Page eines Frame-Panels leer, wenn Sie lieber warten möchten, bis ein verknüpfter Panel, wie z. B. eine Schaltfläche eines Form-Panels, stattdessen die Standardseite des Frame-Panels bereitstellt.

Die Funktion Page()

App Builder stellt eine mvSQL-Funktion namens Page() bereit, die Datenobjekte einer Seite aufrufen können, um zu bestimmen, welche Seite derzeit geladen ist, auch wenn diese Seite in einen Frame-Panel geladen wird. Wenn diese ohne Parameter aufgerufen wird, gibt Page() die UUID der obersten derzeit offenen Seite zurück. Wenn eine Seite in einem Frame-Panel gerendert wird, können die Datenobjekte dieser Seite dadurch den Kontext kennen, in dem sie ausgeführt werden, z. B. um den derzeit aktiven Navigationslink hervorzuheben oder um sich mit der Regel App_Page zu verbinden, um den Namen dieser Seite für eine benutzerdefinierte Seitenbeschriftung nachzuschlagen. Wenn diese stattdessen mit dem Stringparameter 'frame' aufgerufen wird, gibt Page() die UUID der Seite zurück, die derzeit in den Frame-Panel geladen ist.

Neuladen von Daten

Wenn App Builder einen Link in einem Frame-Panel verarbeitet, wird ein globales Neuladen auf der Containerseite ausgelöst, zu der der Frame-Panel gehört. Dies ist nützlich, wenn diese Containerseite auch ein einzelnes Panel aufweist, das als Navigationsmenü verwendet wird, da das Neuladen dem Datenobjekt dieses Panels ermöglicht, sich selbst zu aktualisieren, z. B. um den Titel oder das Symbol der gerahmten Seite zu laden oder um bedingte Formatierung anzuwenden, die den derzeit aktiven Menülink hervorhebt (unter Verwendung der oben beschriebenen Funktion Page()).

Beispiel: Seitennavigation mit einem Frame-Panel

Die folgende Seite kombiniert einen Frame-Panel oben mit einem Form-Panel darunter. Das Kategorienfeld des Form-Panels ist der erste definierte PageLinks-Wert, und die beiden Symbolfelder verlinken auf die Seiten „Produkte" und „Kategorien" und laden diese jeweils in den Frame-Panel oben. Dieses Beispiel verwendet diese Techniken:

• Registerkarten mit einer minimalen Panel-Größe von 1, sodass der Frame-Panel und der Form-Panel immer zusammen angezeigt werden.
• Ein kleines Form-Panel.
• Bedingte Formatierung, die das Seitensymbol hervorhebt, das derzeit im Frame-Panel angezeigt wird.
• Ein benutzerdefiniertes Design, das die nebeneinander liegenden Symbol-Links horizontal und gleichmäßig verteilt formatiert.