The Form Application

A very common use case for building Application() UI elements is to edit an existing data object. The editing workflow has many common features - you have a form of input fields which are modified and then saved, at which point the underlying data object is saved and further downstream updates may also occur.

In order to simplify this workflow, the FormApplication() class provides a layer of abstraction which extends the base Application() and adds some additional methods and workflows which are specifically ideal for working with forms and saving new data.

class FormApplication(object, options)

An abstract pattern for defining an Application responsible for updating some object using an HTML form

A few critical assumptions: 1) This application is used to only edit one object at a time 2) The template used contains one (and only one) HTML <form> as it’s outer-most element 3) This abstract layer has no knowledge of what is being updated, so the implementation must define _updateObject

  • object (*) – Some object or entity which is the target to be updated.
  • options (Object) – Additional options which modify the rendering of the sheet.
  • options.editable (Boolean) – (true) Is the form editable, or should its fields be disabled?
  • options.closeOnSubmit (Boolean) – (true) Automatically close the form when the submit button is pressed.
  • options.submitOnClose (Boolean) – (false) Automatically submit the form if the application window is closed.
  • options.submitOnUnfocus (Boolean) – (false) Automatically submit the form if an input field is unfocused.
FormApplication._updateObject(event, formData)

This method is called upon form submission after form data is validated

  • event (Event) – The initial triggering submission event
  • formData (Object) – The object of validated form data with which to update the object

Promise – A Promise which resolves once the update operation has completed


Activate the default set of listeners for the Entity sheet These listeners handle basic stuff like form submission or updating images

  • html (JQuery) – The rendered template ready to have listeners attached

Extend the logic applied when the application is closed to destroy any remaining MCE instances This function returns a Promise which resolves once the window closing animation concludes


type: Object

Assign the default options which are supported by the entity edit sheet


type: Object

Keep track of any mce editors which may be active as part of this form The values of this Array are inner-objects with references to the MCE editor and other metadata


type: Array

Keep track of any FilePicker instances which are associated with this form The values of this Array are inner-objects with references to the FilePicker instances and other metadata


type: HTMLElement

A convenience reference to the form HTMLElement


Provide data to the form

Returns:Object – The data provided to the template when rendering the form

type: Boolean

Is the Form Application currently editable?


type: *

The object target which we are using this form to modify


Submit the contents of a Form Application, processing its content as defined by the Application

  • updateData (Object|null) – Additional data updates to submit in addition to those parsed from the form

FormApplication – Return a self-reference for convenient method chaining