Enhance UI Experience with a Modal Panel (Fancybox)
“I’m so fancy!”
Not only was “Fancy” a big hit for Iggy Azalea, it’s also been a big hit for our customers from L.A. to Tokyo! Enter the Nuxeo “Fancybox”. Fancybox is a modal panel similar to a pop-up window. For this specific use case, I’m using a fancybox for gathering text/instructions. My customer wanted to use a modal panel for gathering instructions needed when creating a new graphic design. Using a fancybox allows for a user action, in this case a button to display additional content to the user without leaving the current page, and generally provides a more satisfying look and feel.
To use a Fancybox, you will need to download and install the Nuxeo Labs bundle. Once it's downloaded and installed, you are ready to begin implementing it. I will continue using the “new instructions” example for the purposes of this blog.
Add a new XML Extension in Nuxeo Studio called “Fancybox-NewInstructions”.
Pay close attention to the layout & chain properties:
Create a new automation chain called “createInstruction_Fancybox”. In our example, it gets the instruction from the schema, creates a new Instruction document for the parent document and then navigates to a custom tab called “Instructions”. All of this happens when the user clicks the “Create Instruction” button within the Fancybox.
Finally, configure the toolbar action widget to use our new “Instruction Action Category” and set Actions Display to Buttons. Once you do a hot swap (or server restart), you should now be on your way to displaying an awesome Fancybox!
Visit the new Nuxeo Documentation Center to learn more!