JSF UI Framework

How to Customize the HTML5 Drag and Drop Import with Metadata Form

Updated: July 17, 2023

HTML5 drag and drop enables users to import documents in a folder and fill their metadata at the same time.

Follow the steps to below to customize the import form.

  1. In Nuxeo Studio, create a new XML Extension with the following content:

    <extension target="org.nuxeo.ecm.platform.actions.ActionService"
      point="actions">
     <action id="Chain.FileManager.ImportWithMetaDataInSeam"
          link="/nuxeo/dndFormCollector.faces?schemas=yourschemas&#038;layouts=dndEdit%40create"
          order="30" label="label.smart.import.with.md"
          help="desc.smart.import.with.md">
          <category>ContentView</category>
          <filter-id>create</filter-id>
     </action>
    </extension>
    
    
  2. In the link= element, change yourschemas for your schema prefixes.

    Make sure to mention all the prefixes of the schemas concerned by the fields of the dndEdit form.

  3. Go to Listings & Views > Form Layouts and click on New.
  4. Name your layout dndEdit.
  5. Drag and drop the widgets you need in the Creation Layout tab.
  6. Click on Save.
  7. Deploy your changes and drag and drop documents to display the smart import with metadata form..

Notes about Drag and drop form

It is currently not possible to use tags, collections and complex types on this form.