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.

Step 1: Add a new XML Extension in Nuxeo Studio called “Fancybox-NewInstructions”. Pay close attention to the layout & chain properties:

Step 2: Create a new schema called “InstructionFB” and then add a new field called “instructions”. This will be used by the Fancybox to store the instruction. Also, an automation chain will need this later.

Step 3: Create a new Form layout called _“fancybox_Instructions”_ and bind a text-area to the instructions field in the schema.

Step 4: 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.

Step 5: Create a new custom action category called “InstructionActionCat”. This is so we can add a button to the Instructions tab to make the Fancybox visible when clicked.

Visit the new Nuxeo Documentation Center to learn more!

Enhance UI Experience with a Modal Panel (Fancybox)

Step 1: Add a new XML Extension in Nuxeo Studio called “Fancybox-NewInstructions”. Pay close attention to the layout & chain properties:

Step 2: Create a new schema called “InstructionFB” and then add a new field called “instructions”. This will be used by the Fancybox to store the instruction. Also, an automation chain will need this later.

Step 3: Create a new Form layout called _“fancybox_Instructions”_ and bind a text-area to the instructions field in the schema.

Step 5: Create a new custom action category called “InstructionActionCat”. This is so we can add a button to the Instructions tab to make the Fancybox visible when clicked.

Step 6: Define which tab should use the new custom action category. For our example, create a new tab called Instructions. Add the “Toolbar actions” widget to the tab along with the Instructions field.

Step 7: 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!