Home Reference Source
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
public get
public

components: *[]

public
public
public
public

editing: *

public

element: *

public
public get

form: Object: *

Gets the form object.

public set

form(form: Object)

Sets the form value.

public

Promise that executes when the form is ready and rendered.

public

Called when this form could not load and is rejected.

public

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

public

The Formio instance for this form.

public
public set

language(lang: *): Promise

Sets the language for this form.

public

loader: HTMLElement

The loader HTML element.

public get

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
public set
public get
public

Promise that is triggered when the submission is done loading.

public

options: *

public
public get

Called when both the form and submission have been loaded.

public

root: *

public
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

Returns the submission object that was set within this form.

public set

submission(submission: Object)

Sets the submission of a form.

public

Promise that executes when the submission is ready and rendered.

public

Called when this form could not load and is rejected.

public

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

public

Determines if this submission is explicitly set.

public

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

public

Determines if the form is being submitted at the moment.

public
public

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
private
private
private

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

Send a delete request to the server.

public

destroy(deleteFromGlobal: boolean): *

public
public

executeSubmit(options: *): *

public

Focus on selected component.

public
public

getValue(): *

public
public

init(): *

Build the form.

public
public

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

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
public

restoreDraft(-: userId)

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

public

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

Public Constructors

public constructor(options: Object) source

Creates a new Form instance.

Params:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
code *
lang *
active *

Return:

*

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

Params:

NameTypeAttributeDescription
element *
shortcut *

public attach(element: *): * source

Params:

NameTypeAttributeDescription
element *

Return:

*

public build(element: *): * source

Params:

NameTypeAttributeDescription
element *

Return:

*

public cancel(noconfirm: *): boolean source

Cancels the submission.

Params:

NameTypeAttributeDescription
noconfirm *

Return:

boolean

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

Params:

NameTypeAttributeDescription
data *
flags {}
  • optional
  • default: {}

Return:

*

public deleteSubmission(): * source

Send a delete request to the server.

Return:

*

public destroy(deleteFromGlobal: boolean): * source

Params:

NameTypeAttributeDescription
deleteFromGlobal boolean
  • optional
  • default: false

Return:

*

public executeFormController(): boolean source

Return:

boolean

public executeSubmit(options: *): * source

Params:

NameTypeAttributeDescription
options *

Return:

*

public focusOnComponent(key: string): * source

Focus on selected component.

Params:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
_this *
_that *

public onChange(changed: *, flags: *) source

Trigger the change event for this form.

Params:

NameTypeAttributeDescription
changed *
flags *

public onSubmissionError(error: Object): * source

Called when an error occurs during the submission.

Params:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
- 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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
submission *

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

Set the src of the form renderer.

Params:

NameTypeAttributeDescription
value *
options *

Return:

*

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

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

Params:

NameTypeAttributeDescription
submission *
flags *

Return:

Promise<TResult>

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

Sets the url of the form renderer.

Params:

NameTypeAttributeDescription
value *
options *

Return:

boolean

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

Params:

NameTypeAttributeDescription
submission *
flags {}
  • optional
  • default: {}

Return:

*

public showErrors(error: Object): * source

Show the errors of this form within the alert dialog.

Params:

NameTypeAttributeDescription
error Object

An optional additional error to display along with the component errors.

Return:

*

public submit(before: boolean): Promise source

Submits the form.

Params:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
options {}
  • optional
  • default: {}

Return:

*

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

Params:

NameTypeAttributeDescription
URL *
headers *

Return:

*

public triggerRecaptcha() source