Web UI Framework

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

Updated: October 16, 2020

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?schema=yourschema&#038;layout=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 yourschema for your schema prefix.

  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.