Verbessern Sie die UI-Erfahrung mit einem modalen Panel (Fancybox)

“I’m so fancy!” “Fancy” war nicht nur ein riesiger Hit für Iggy Azalea, sondern auch für unsere Kunden von L.A. bis Tokyo! Steigen Sie ein in die Nuxeo “Fancybox”. Fancybox ist ein modales Panel und gleicht einem Pop-up-Fenster. Für diesen speziellen Anwendungsfall verwende ich Fancybox für die Zusammenstellung von Text/Anweisungen. Mein Kunde wollte ein modales Panel zum Zusammenstellen von Anweisungen für das Erstellen eines neuen Grafikdesigns verwenden. Die Verwendung der Fancybox ermöglicht eine Benutzeraktion, in diesem Fall eine Schaltfläche, über den der Benutzer zusätzlichen Content anzeigen kann, ohne die aktuelle Seite zu verlassen, und bietet allgemein ein besseres Erscheinungsbild.

Um eine Fancybox zu verwenden, müssen Sie das Nuxeo Labs-Paket herunterladen und installieren. Sobald dies heruntergeladen und installiert wurde, können Sie mit der Implementierung beginnen. Zum Zweck dieses Blogs werde ich das Beispiel “new instructions” (neue Anweisungen) verwenden.

##Schritt 1: Fügen Sie eine neue XML-Erweiterung in Nuxeo Studio mit dem Namen “Fancybox-NewInstructions” hinzu. Achten Sie dabei genau auf die Eigenschaften von Layout und Kette:

Schritt 2: Erstellen Sie ein neues Schema mit dem Namen “InstructionFB” und fügen Sie dann ein neues Feld mit dem Namen “instructions” hinzu. Dies wird von Fancybox zum Speichern der Anweisungen verwendet. Außerdem wird es später von einer Automatisierungskette benötigt.

Schritt 3: Erstellen Sie ein neues Formularlayout mit dem Namen _”fancybox_Instructions”_ und binden Sie einen Textbereich an das Anweisungsfeld im Schema ein.

Schritt 4: Erstellen Sie eine neue Automatisierungskette mit dem Namen _”createInstruction_Fancybox”_. In unserem Beispiel erhält sie die Anweisungen vom Schema, erstellt ein neues Anweisungsdokument für das übergeordnete Dokument und navigiert dann auf einen benutzerdefinierten Tab mit dem Namen “Instructions”. Dies alles geschieht, wenn Benutzer auf die Schaltfläche “Create Instruction” in der Fancybox klicken.

Schritt 5: Erstellen Sie eine neue benutzerdefinierte Aktionskategorie mit dem Namen “InstructionActionCat”. Mit machen dies, damit wir eine Schaltfläche im Tab “Instructions” hinzufügen können, damit die Fancybox erscheint, wenn auf sie geklickt wird.

Schritt 6: Legen Sie fest, welcher Tab die neue benutzerdefinierte Aktionskategorie verwenden soll. Erstellen Sie für dieses Beispiel einen neuen Tab mit dem Namen “Instructions”. Fügen Sie das Widget “Toolbar Actions” gemeinsam mit dem Feld “Instructions” dem Tab hinzu.

Schritt 7: Konfigurieren Sie dann das Symbolleisten-Action Widget, das unsere neue “Instruction Action Category” verwendet, und legen Sie “Actions Display” auf “Buttons” fest. Nachdem Sie einen Hot Swap (oder Neustart des Servers) durchgeführt haben, sollten Sie eine hervorragende Fancybox anzeigen können!

Besuchen Sie das neue Nuxeo-Dokumentationscenter, um mehr darüber zu erfahren!