If you are familiar with the native UI of the Nuxeo platform, you probably have noticed that we make extensive use of the lightbox graphic component. A lightbox (also called a modal pop-up) is a display area added on top of a dimmed out web page. The main idea is to show additional content or options in response to user actions, making the UI more helpful and engaging, for an improved user experience.

Example: Choosing a document type after clicking on “new” Lightbox Example: Choosing a document type after clicking on “new”

Configure a Custom Lightbox with Nuxeo Studio

It’s actually quite easy to create a custom lightbox/modal pop-up as almost all the pieces are already available: user actions, layouts and automation chains. The only missing part is some glue code to combine those components in Nuxeo Studio. The good news is that Nuxeo’s Solution Architect team has already created that missing part and made it available in the nuxeo-labs repository so you can reuse it in your projects.

Let’s take a simple example like starting a workflow. Instead of using the default widget of the platform, we want to have a user action “Send for review” that opens a dialog where the user must enter the reviewer name and the due date. This can be done easily and requires only a few configuration steps. Here are the steps:

  1. Build and deploy the nuxeo-labs-fancybox module

First you need to build and deploy the nuxeo-labs-fancybox on your instance. After that, everything happens in Nuxeo Studio.

  1. Configure a schema

This step is not mandatory but is recommended in order to define properties with self-explanatory names. In this example, we just need to configure the two fields which will be displayed in the lightbox.

Schema configuration in Studio Schema configuration in Studio
  1. Configure the workflow

Here we’ll configure a single step workflow which takes two input variables: the reviewer and the due date.

Workflow definition review Workflow variables configuration in Studio

Workflow graph configuration Workflow graph configuration in Studio
  1. Configure the lightbox layout

The lightbox uses a regular layout which we configure in Nuxeo Studio like any other.

Layout configuration in Studio Layout configuration in Studio
  1. Configure an automation chain

Here the main thing to remember is that the user input will be available in a context variable “data” as a DocumentModel object.

- Context.FetchDocument
- Context.StartWorkflow:
    id: review
    start: "true"
reviewer: "@{Context[\"data\"].getPropertyValue(\"fbsr:reviewer\")}"
- WebUI.Refresh: {}
  1. Add an XML contribution to the Studio project

This is the final step where everything comes together. The XML contribution links a user action to the layout and the automation chain that we configured in the previous steps.

<extension target="org.nuxeo.ecm.platform.actions.ActionService" point="actions">
  <action id="StartReview" order="0" label="Start Review" type="fancybox">
    _<!-- The fancybox container layout provided with the plugin -->_
    <property name="include">/incl/fancy_box_container.xhtml</property>
    _<!-- The form layout to display  -->_
    <property name="layout">**fancy_box_review**@edit</property>
    _<!-- The chain to start when the user hits the process button -->_
    <property name="chain">**StartReviewWorkflow**</property>
    _<!-- The fancybox main title -->_
    <property name="title">**Start review**</property>
    _<!-- The process button label -->_
    <property name="processLabel">**Send**</property>

That’s it! We can deploy the project on our instance and see the result. The UI now contains a new action with a well-defined business meaning!

Result Result