import Webform from 'formiojs/src/Webform.js'

public class | source

Webform

Extends:

src/components/_classes/nesteddata/NestedDataComponent.js~NestedDataComponent → Webform

Direct Subclass:

PDF

Renders a Form.io form within the webpage.

Constructor Summary

Public Constructor
public	constructor(options: Object) Creates a new Form instance.

Member Summary

Public Members
public	alert: HTMLElement The alert HTML element
public	component: *
public get	componentComponents: *
public	components: *[]
public	currentForm: *
public	customErrors: *[]
public	draftEnabled: boolean
public	editing: *
public	element: *
public	executeShortcuts: *
public get	form: Object: * Gets the form object.
public set	form(form: Object) Sets the form value.
public	formReady: Promise Promise that executes when the form is ready and rendered.
public	formReadyReject: function Called when this form could not load and is rejected.
public	formReadyResolve: function Called when the formReady state of this form has been resolved.
public	formio: Formio The Formio instance for this form.
public	initialized: boolean
public set	language(lang: *): Promise Sets the language for this form.
public	loader: HTMLElement The loader HTML element.
public get	loading: boolean: * Returns if this form is loading.
public set	loading(loading: boolean) Set the loading state for this form, and also show the loader spinner.
public	loadingSubmission: boolean
public set	nosubmit
public get	nosubmit: *
public	onSubmission: Promise Promise that is triggered when the submission is done loading.
public	options: *
public	pristine: boolean
public get	ready: Promise: * Called when both the form and submission have been loaded.
public	root: *
public	savingDraft: boolean
public get	schema: *
public	shortcuts: *[]
public get	src: string: * Get the embed source of the form.
public set	src(value: string) Set the Form source, which is typically the Form.io embed URL.
public get	submission: Object: * Returns the submission object that was set within this form.
public set	submission(submission: Object) Sets the submission of a form.
public	submissionReady: Promise Promise that executes when the submission is ready and rendered.
public	submissionReadyReject: function Called when this form could not load and is rejected.
public	submissionReadyResolve: function Called when the formReady state of this form has been resolved.
public	submissionSet: boolean Determines if this submission is explicitly set.
public	submitted: boolean Determines if the form has tried to be submitted, error or not.
public	submitting: boolean Determines if the form is being submitted at the moment.
public	triggerSaveDraft: *
public	type: string The type of this element.
public get	url: string: * Get the embed source of the form.
public set	url(value: string) Set the form source but don't initialize the form and submission from the url.

Private Members
private	_form: {}
private	_loading: boolean
private	_nosubmit: *
private	_src: string
private	_submission: *

Method Summary

Public Methods
public	addLanguage(code: , lang: , active: ): Add a language for translations
public	addShortcut(element: , shortcut: )
public	attach(element: ):
public	build(element: ):
public	cancel(noconfirm: *): boolean Cancels the submission.
public	checkData(data: , flags: {}):
public	deleteSubmission(): * Send a delete request to the server.
public	destroy(deleteFromGlobal: boolean): *
public	executeFormController(): boolean
public	executeSubmit(options: ):
public	focusOnComponent(key: string): * Focus on selected component.
public	getClassName(): *
public	getValue(): *
public	hasRequiredFields(): *
public	init(): * Build the form.
public	keyboardCatchableElement(element: *): boolean
public	loadSubmission(): * Loads the submission if applicable.
public	localize(): * Perform the localization initialization.
public	mergeData(_this: , _that: )
public	onChange(changed: , flags: ) Trigger the change event for this form.
public	onSubmissionError(error: Object): * Called when an error occurs during the submission.
public	onSubmit(submission: Object, saved: boolean): object Called when the submission has completed, or if the submission needs to be sent to an external library.
public	redraw(): *
public	removeShortcut(element: , shortcut: )
public	render(): *
public	resetValue()
public	restoreDraft(-: userId) Restores a draft submission based on the user who is authenticated.
public	saveDraft() Saves a submission draft.
public	setAlert(type: string, message: string, classes: string) Sets a new alert to display in the error dialog of the form.
public	setForm(form: Object): * Sets the JSON schema for the form to be rendered.
public	setMetadata(submission: *)
public	setSrc(value: , options: ): * Set the src of the form renderer.
public	setSubmission(submission: , flags: ): Promise<TResult> Sets a submission and returns the promise when it is ready.
public	setUrl(value: , options: ): boolean Sets the url of the form renderer.
public	setValue(submission: , flags: {}):
public	showErrors(error: Object): * Show the errors of this form within the alert dialog.
public	submit(before: boolean): Promise Submits the form.
public	submitForm(options: {}): *
public	submitUrl(URL: , headers: ): *
public	triggerRecaptcha()

Public Constructors

public constructor(options: Object) source

Creates a new Form instance.

Params:

Name	Type	Attribute	Description
options	Object		The options to create a new form instance.
options.saveDraft	boolean		Set this if you would like to enable the save draft feature.
options.saveDraftThrottle	boolean		The throttle for the save draft feature.
options.readOnly	boolean		Set this form to readOnly
options.noAlerts	boolean		Set to true to disable the alerts dialog.
options.i18n	boolean		The translation file for this rendering. @see https://github.com/formio/formio.js/blob/master/i18n.js
options.template	boolean		Provides a way to inject custom logic into the creation of every element rendered within the form.

Public Members

public alert: HTMLElement source

The alert HTML element

public component: * source

public get componentComponents: * source

public components: *[] source

public currentForm: * source

public customErrors: *[] source

public draftEnabled: boolean source

public editing: * source

public element: * source

public executeShortcuts: * source

public get form: Object: * source

Gets the form object.

Return:

Object

The form JSON schema.

public set form(form: Object) source

Sets the form value.

public formReady: Promise source

Promise that executes when the form is ready and rendered.

Example:

import Webform from 'formiojs/Webform';
let form = new Webform(document.getElementById('formio'));
form.formReady.then(() => {
  console.log('The form is ready!');
});
form.src = 'https://examples.form.io/example';

public formReadyReject: function source

Called when this form could not load and is rejected.

public formReadyResolve: function source

Called when the formReady state of this form has been resolved.

public formio: Formio source

The Formio instance for this form.

public initialized: boolean source

public set language(lang: *): Promise source

Sets the language for this form.

Return:

Promise

public loader: HTMLElement source

The loader HTML element.

public get loading: boolean: * source

Returns if this form is loading.

Return:

boolean

TRUE means the form is loading, FALSE otherwise.

public set loading(loading: boolean) source

Set the loading state for this form, and also show the loader spinner.

public loadingSubmission: boolean source

public set nosubmit source

public get nosubmit: * source

public onSubmission: Promise source

Promise that is triggered when the submission is done loading.

public options: * source

public pristine: boolean source

public get ready: Promise: * source

Called when both the form and submission have been loaded.

Return:

Promise

The promise to trigger when both form and submission have loaded.

public root: * source

public savingDraft: boolean source

public get schema: * source

public shortcuts: *[] source

public get src: string: * source

Get the embed source of the form.

Return:

string

public set src(value: string) source

Set the Form source, which is typically the Form.io embed URL.

Example:

import Webform from 'formiojs/Webform';
let form = new Webform(document.getElementById('formio'));
form.formReady.then(() => {
  console.log('The form is formReady!');
});
form.src = 'https://examples.form.io/example';

public get submission: Object: * source

Returns the submission object that was set within this form.

Return:

Object

public set submission(submission: Object) source

Sets the submission of a form.

Example:

import Webform from 'formiojs/Webform';
let form = new Webform(document.getElementById('formio'));
form.src = 'https://examples.form.io/example';
form.submission = {data: {
  firstName: 'Joe',
  lastName: 'Smith',
  email: 'joe@example.com'
}};

public submissionReady: Promise source

Promise that executes when the submission is ready and rendered.

Example:

import Webform from 'formiojs/Webform';
let form = new Webform(document.getElementById('formio'));
form.submissionReady.then(() => {
  console.log('The submission is ready!');
});
form.src = 'https://examples.form.io/example/submission/234234234234234243';

public submissionReadyReject: function source

Called when this form could not load and is rejected.

public submissionReadyResolve: function source

Called when the formReady state of this form has been resolved.

public submissionSet: boolean source

Determines if this submission is explicitly set.

public submitted: boolean source

Determines if the form has tried to be submitted, error or not.

public submitting: boolean source

Determines if the form is being submitted at the moment.

public triggerSaveDraft: * source

public type: string source

The type of this element.

public get url: string: * source

Get the embed source of the form.

Return:

string

public set url(value: string) source

Set the form source but don't initialize the form and submission from the url.

Private Members

private _form: {} source

private _loading: boolean source

private _nosubmit: * source

private _src: string source

private _submission: * source

Public Methods

public addLanguage(code: , lang: , active: ): source

Add a language for translations

Params:

Name	Type	Attribute	Description
code	*
lang	*
active	*

Return:

public addShortcut(element: , shortcut: ) source

Params:

Name	Type	Attribute	Description
element	*
shortcut	*

public attach(element: ): source

Params:

Name	Type	Attribute	Description
element	*

Return:

public build(element: ): source

Params:

Name	Type	Attribute	Description
element	*

Return:

public cancel(noconfirm: *): boolean source

Cancels the submission.

Params:

Name	Type	Attribute	Description
noconfirm	*

Return:

boolean

public checkData(data: , flags: {}): source

Params:

Name	Type	Attribute	Description
data	*
flags	{}	optional default: {}

Return:

public deleteSubmission(): * source

Send a delete request to the server.

Return:

public destroy(deleteFromGlobal: boolean): * source

Params:

Name	Type	Attribute	Description
deleteFromGlobal	boolean	optional default: false

Return:

public executeFormController(): boolean source

Return:

boolean

public executeSubmit(options: ): source

Params:

Name	Type	Attribute	Description
options	*

Return:

public focusOnComponent(key: string): * source

Focus on selected component.

Params:

Name	Type	Attribute	Description
key	string		The key of selected component.

Return:

public getClassName(): * source

Return:

public getValue(): * source

Return:

public hasRequiredFields(): * source

Return:

public init(): * source

Build the form.

Return:

public keyboardCatchableElement(element: *): boolean source

Params:

Name	Type	Attribute	Description
element	*

Return:

boolean

public loadSubmission(): * source

Loads the submission if applicable.

Return:

public localize(): * source

Perform the localization initialization.

Return:

public mergeData(_this: , _that: ) source

Params:

Name	Type	Attribute	Description
_this	*
_that	*

public onChange(changed: , flags: ) source

Trigger the change event for this form.

Params:

Name	Type	Attribute	Description
changed	*
flags	*

public onSubmissionError(error: Object): * source

Called when an error occurs during the submission.

Params:

Name	Type	Attribute	Description
error	Object		The error that occured.

Return:

public onSubmit(submission: Object, saved: boolean): object source

Called when the submission has completed, or if the submission needs to be sent to an external library.

Params:

Name	Type	Attribute	Description
submission	Object		The submission object.
saved	boolean		Whether or not this submission was saved to the server.

Return:

object

The submission object.

public redraw(): * source

Return:

public removeShortcut(element: , shortcut: ) source

Params:

Name	Type	Attribute	Description
element	*
shortcut	*

public render(): * source

Return:

public resetValue() source

public restoreDraft(-: userId) source

Restores a draft submission based on the user who is authenticated.

Params:

Name	Type	Attribute	Description
-	userId		The user id where we need to restore the draft from.

public saveDraft() source

Saves a submission draft.

public setAlert(type: string, message: string, classes: string) source

Sets a new alert to display in the error dialog of the form.

Params:

Name	Type	Attribute	Description
type	string		The type of alert to display. "danger", "success", "warning", etc.
message	string		The message to show in the alert.
classes	string		Styling classes for alert.

public setForm(form: Object): * source

Sets the JSON schema for the form to be rendered.

Params:

Name	Type	Attribute	Description
form	Object		The JSON schema of the form @see https://examples.form.io/example for an example JSON schema.

Return:

Example:

import Webform from 'formiojs/Webform';
let form = new Webform(document.getElementById('formio'));
form.setForm({
  components: [
    {
      type: 'textfield',
      key: 'firstName',
      label: 'First Name',
      placeholder: 'Enter your first name.',
      input: true
    },
    {
      type: 'textfield',
      key: 'lastName',
      label: 'Last Name',
      placeholder: 'Enter your last name',
      input: true
    },
    {
      type: 'button',
      action: 'submit',
      label: 'Submit',
      theme: 'primary'
    }
  ]
});

public setMetadata(submission: *) source

Params:

Name	Type	Attribute	Description
submission	*

public setSrc(value: , options: ): * source

Set the src of the form renderer.

Params:

Name	Type	Attribute	Description
value	*
options	*

Return:

public setSubmission(submission: , flags: ): Promise<TResult> source

Sets a submission and returns the promise when it is ready.

Params:

Name	Type	Attribute	Description
submission	*
flags	*

Return:

Promise<TResult>

public setUrl(value: , options: ): boolean source

Sets the url of the form renderer.

Params:

Name	Type	Attribute	Description
value	*
options	*

Return:

boolean

public setValue(submission: , flags: {}): source

Params:

Name	Type	Attribute	Description
submission	*
flags	{}	optional default: {}

Return:

public showErrors(error: Object): * source

Show the errors of this form within the alert dialog.

Params:

Name	Type	Attribute	Description
error	Object		An optional additional error to display along with the component errors.

Return:

public submit(before: boolean): Promise source

Submits the form.

Params:

Name	Type	Attribute	Description
before	boolean		If this submission occured from the before handlers.

Return:

Promise

A promise when the form is done submitting.

Example:

import Webform from 'formiojs/Webform';
let form = new Webform(document.getElementById('formio'));
form.src = 'https://examples.form.io/example';
form.submission = {data: {
  firstName: 'Joe',
  lastName: 'Smith',
  email: 'joe@example.com'
}};
form.submit().then((submission) => {
  console.log(submission);
});

public submitForm(options: {}): * source

Params:

Name	Type	Attribute	Description
options	{}	optional default: {}

Return:

public submitUrl(URL: , headers: ): * source

Params:

Name	Type	Attribute	Description
URL	*
headers	*

Webform

Extends:

Direct Subclass:

Constructor Summary

Member Summary

Method Summary

Public Constructors

public constructor(options: Object) source

Params:

Public Members

public alert: HTMLElement source

public component: * source

public get componentComponents: * source

public components: *[] source

public currentForm: * source

public customErrors: *[] source

public draftEnabled: boolean source

public editing: * source

public element: * source

public executeShortcuts: * source

public get form: Object: * source

Return:

public set form(form: Object) source

public formReady: Promise source

Example:

public formReadyReject: function source

public formReadyResolve: function source

public formio: Formio source

public initialized: boolean source

public set language(lang: *): Promise source

Return:

public loader: HTMLElement source

public get loading: boolean: * source

Return:

public set loading(loading: boolean) source

public loadingSubmission: boolean source

public set nosubmit source

public get nosubmit: * source

public onSubmission: Promise source

public options: * source

public pristine: boolean source

public get ready: Promise: * source

Return:

public root: * source

public savingDraft: boolean source

public get schema: * source

public shortcuts: *[] source

public get src: string: * source

Return:

public set src(value: string) source

Example:

public get submission: Object: * source

Return:

public set submission(submission: Object) source

Example:

public submissionReady: Promise source

Example:

public submissionReadyReject: function source

public submissionReadyResolve: function source

public submissionSet: boolean source

public submitted: boolean source

public submitting: boolean source

public triggerSaveDraft: * source

public type: string source

public get url: string: * source

Return:

public set url(value: string) source

Private Members

private _form: {} source

private _loading: boolean source

private _nosubmit: * source

private _src: string source

private _submission: * source

Public Methods

public addLanguage(code: *, lang: *, active: *): * source

Params:

Return:

public addShortcut(element: *, shortcut: *) source

Params:

public attach(element: *): * source

public addLanguage(code: , lang: , active: ): source

public addShortcut(element: , shortcut: ) source

public attach(element: ): source

public build(element: ): source

public checkData(data: , flags: {}): source

public executeSubmit(options: ): source

public mergeData(_this: , _that: ) source

public onChange(changed: , flags: ) source

public removeShortcut(element: , shortcut: ) source

public setSrc(value: , options: ): * source