Das OFBiz ScreenWidget Framework bietet seit kurzem eine neue Möglichkeit, Verlinkungen zu realisieren.
Bisher wurden <Link>-Tags in Screen Widgets als Standard Hyperlinks ausgeführt. Das bedeutet beim Betätigen des Links wird eine neue Seite im definierten Target Fenster (_blank, _self, …) geladen.
Sollte die verlinkte Seite jedoch nur einige Informationen oder ein kleines Formular zum Speichern von Daten enthalten, ist es der Benutzerführung nicht förderlich von einer Seite auf die andere zu springen – der Benutzer wird beim Neuladen der Seite in seinem persönlichen Workflow gestört. Besser wäre es, die Informationen oder Formulare direkt innerhalb der Seite anzuzeigen um eine fehlerfreie Bearbeitung zu ermöglichen.
Um dies zu realisieren, kann das Target eines Links in einer Ajax Box geladen werden. Somit entsteht der Eindruck einer eingebetteten Seite, ähnlich wie bei den Lookups. So funktioniert das Ganze:
Erstellen eines Link Tags
Als erstes erstellen wir eine ExampleScreens.xml Datei mit den notwendigen Basis Informationen. Innerhalb unseres Screens fügen wir einen Link Tag ein welcher folgende Attribute enthält:
- target: Die zu ladende Seite, entspricht dem Eintrag in der controller.xml
- link-type: Hier wird der Typ des Links definiert, für die embedded Pages definieren wir den Typ „ajax-window“
- height: Die Höhe des zu ladenden Fensters in Pixeln
- width: Die Breite des zu ladenden Fensters in Pixeln
- text: Beschriftung des Buttons
- style: CSS Klasse des Buttons
<container> <link target="EditExampleLayer" link-type="ajax-window" height="350" width="480" text="${uiLabelMap.ExampleNewExample}" style="buttontext create"/> </container>
Controller Eintrag
Der Controller Eintrag definiert das Request Mapping und die View Map genau wie bei jedem anderen Request.
<request-map uri="EditExampleLayer"> <security https="true" auth="true"/> <response name="success" type="view" value="EditExampleLayer"/> </request-map> <view-map name="EditExampleLayer" type="screen" page="component://example/widget/example/ExampleScreens.xml#EditExampleLayer"/>
Erstellen einer embedded page
Die embedded page enthält in unserem Fall einige Form Felder um Daten zu erfassen und anschließend in der Datenbank abzulegen. Der Screen darf keinen Decorator Eintrag enthalten oder es muss auf einen minimalen Dekorator, der speziell für eingebettete Seiten erstellt wurde, zurückgegriffen werden. Anderenfalls wird in der layered box das komplette Menü mitgeladen.
<screen name="EditExampleLayer"> <section> <actions> <set field="titleProperty" value="PageTitleEditExample"/> <set field="tabButtonItem" value="EditExample">/> <set field="exampleId" from-field="parameters.exampleId"/> <entity-one entity-name="Example" value-field="example"/> </actions> <widgets> <include-form name="EditExample" location="component://example/widget/example/ExampleForms.xml"/> </widgets> </section> </screen>
Optimieren der embedded page
Beim Absenden des Formulars werden die Daten in der Datenbank gespeichert und die Seite neu geladen. Dies kann natürlich optimiert werden um die User Experience weiter zu verbessern.
Nach dem Absenden des Requests, wird das Formular im Hintergrund abgeschickt, ein Spinner zeigt den laufenden Status der Operation an. Nach erfolgreichem Request wird der Layer geschlossen und die Ausgangstabelle aktualisiert. Somit haben wir eine komplette Update Funktion ohne Neuladen der Seite realisiert.
Darüber sprechen wir dann im nächsten Turtorial. Bis dahin viel Spaß mit dem neuen Link Typ!
Hallo.
Schön, dass es eine Möglichkeit gibt, auch Informationen über einen Layer anzuzeigen.
Verstanden habe ich nur noch nicht ganz, wie man dies ausgehend von einer ListView ansteuert, so dass z.B. aus einer ArtikelListe Details zu einem ausgewählten Artikel über die „embedded page“ dargestellt werden.
O.g. Beispiel bezieht sich auf einen „globalen“ Link auf der Seite. Auch müsste ich für meine Artikel-Detail-View Parameter übergeben können…
Gruß, Heico
Hallo Heiko,
innerhalb von Listen kannst du die „embedded pages“ nur über Tag aufrufen. Über den
Tag ist es aus den Forms heraus nicht möglich. Falls die Lookups
das
nicht deinen Anforderungen entsprechen, müsstest du das Link Tag
erweitern und die Funktionalität nachbauen. Falls du dafür Hilfe
benötigst, melde dich einfach.
Viele Grüße
Sascha
Hallo Sascha.
Danke für deine Antwort. Gut, in den Listen könnte ich
mir soweit helfen, dass ich in die Detail-View des jeweiligen
Formulars springe.
Wie aber, wenn ich nun in einer Form bin und dort z.B.
Hersteller-ID, Produkt-ID, etc. habe und diese Id’s mit
einem Link auf das Popup versehen möchte?
Gruß, Heico
Hallo Heico,
du könntest die Parameter einfach an die URL hängen
(per GET Request).
controllerCall?param1=value1¶m2=value2
Die Parameter kannst du dann interpretieren und
die entsprechenden Informationen im Lookup rendern.
Viele Grüße
Sascha