Drag and Drop Service for Content Capture (HTML5-based)

How to use it

Selecting the DropZone

If you drag some files from the Desktop to the Nuxeo WebUI, the possible DropZones will be highlighted.

In Nuxeo DM there are 5 different DropZones (depending on the page):

• ContentView: the content listing for a folderish Document

• Clipboard_CLIPBOARD: the user's Clipboard

• Clipboard_DEFAULT: the user's Worklist

• mainBlob: the main attachment of the current Document

• otherBlobs: additional attachments of the current Document

Depending on the DropZone you select, the import action will be different:

• ContentView: create Documents from files in the current container

• Clipboard: create Documents from files in the user's personal workspaces and add them to the clipboard

• mainBlob: attach a file to the document

• otherBlobs: attach file(s) as additional files in the document

Default mode vs advanced mode

In the default mode the file you drop will be automatically uploaded and imported into the Document repository.

By using the advanced mode you can have more control over the import process:

• you can do several file imports but still keep all files part of the same batch,

• you can select the operation chain that will be executed.

To trigger the extended mode, just maintain the drag over the DropZone for more than 2.5 seconds: the drop zone will be highlighted in red indicating you are now in extended mode.

How to customize it

Defining a new DropZone

You can very simply define a new DropZone in your pages; you simply need to add an HTML element (like a div) which:

• has a unique id,

• has the 'dropzone' CSS class,

• has a context attribute.

Associating Operation Chains

Each dropzone context is associated with a set of Content Automation Operations or Operation Chains.

This association is configured via the action service:

Where:

• id is the Operation or the Operation Chain identifier
  (for Operation Chains, append Chain. as a prefix for id)

• category represents the dropzone context

• filter / filter-id are the filter used to define if operation should be available in a given context

• link points to a page that can be used to collect parameters for the Operation chain

The Operation or Chain that will be called for the import will receive:

• as input: a BlobList representing the files that have been uploaded

• as context: the current page context

• as parameters: what has been collected by the form if any

The output of the chains does not really matter.

At some point, inside your Operation chain you may need to access Seam Context.

For that, new Operation where introduced:

• Seam.RunOperation: that can run an operation or a chain in the Seam context

For example, if you want to get available actions via the "Actions.GET" operation, but want to leverage seam context for actions filters:

• Seam.InitContext / Seam.DestroyContext : that can be used to initialize / destroy seam context

Parameters management

In some cases, you may want to user to provide some parameters via a form associated to the import operation he wants to run.

For that, you can use the the link attribute of the action used to bind your operation chain to a dropzone.
This URL will be used to display your form within an IFRAME inside the default import UI.

In order to send the collected parameters to the import wizard, you should call a JavaScript function inside the parent frame:

where collectedData is a JavaScript object that will then be sent (via JSON) as parameter of the Operation call.

In the default JSF WebApp you can have a look at DndFormActionBean and dndFormCollector.xhtml.