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

Arguments:
  • 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.activateListeners(html)

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

Arguments:
  • html (JQuery) – The rendered template ready to have listeners attached
FormApplication.close()

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

Returns:Promise
FormApplication.defaultOptions

type: Object

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

FormApplication.editors

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

FormApplication.filepickers

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

FormApplication.form

type: HTMLElement

A convenience reference to the form HTMLElement

FormApplication.getData()

Provide data to the form

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

type: Boolean

Is the Form Application currently editable?

FormApplication.object

type: *

The object target which we are using this form to modify