JavaScript framework basics of public web forms¶

fd¶

fd is a Form Manager that provides access to all events, containers, controls, fields, validators, and data of the form.

Whenever you want to manipulate your form, you must call the manager first.

// the form is ready
fd.rendered(function() {
    // and its fields are available to get/set
    fd.field('Title').value = 'New Title';
});

$¶

$ allows you to access jQuery library. It can be used to apply direct changes to DOM, hide and show fields, and much more.

// hide fields by CSS class
$('.field-to-hide').hide();

// change input background color
$(fd.field('Field1').$el).find('input').css('background-color', 'red');

Vue¶

Vue is a global Vue object. Allows you to register global components or wait for the next DOM update cycle with Vue.nextTick.

formId¶

Gets the ID of the form.

fd.formId; // 'b5257750-2483-4bea-ac1a-79ad7c670756'

submissionId¶

Gets the ID of the submission.

fd.submissionId; // '2021-12-30T13:40:22-4dcdad7b-6fdc-44ab-9789-cfd9118b6780'

name¶

Gets the name of the form.

fd.name; // 'My Form'

culture¶

Gets the current culture name.

fd.culture; // 'en-US'

language¶

Gets the current language of the form.

fd.language; // 'en-US'

isValid¶

Checks if the form is valid or not.

Each time the property is called, it runs validators on all form elements recursively.

Returns true on success. Otherwise, returns false and error messages get displayed.

fd.isValid;

validators¶

Gets an array of form validators. Can be used to add new ones. These are more complex validators than Field validators and are used to check that multiple fields have appropriate values. If the fields do not match these criteria, the form will not submit.

// return form validators
fd.validators;

// add new form Validator
fd.validators.push({
    name: 'MyCustomValidator',
    error: 'Age must be 18 or over in order to subscribe',
    validate: function(value) {
        if (fd.field('Age').value < 18
            && fd.field('PaymentModel').value === 'Subscription')
            return false;

        return true;
    }
});

account¶

Gets the logged-in user (for forms that require authenitcation).

fd.account.username; // '[email protected]'

messages¶

Gets language constants as an object. Can be used to set text for localization.

To change language constant, call the property inside fd.created event:

fd.created(function(vue) {
    fd.messages.PlumsailForm_Submission_Success = 'Thank you!';
});

theme¶

Holds the name or ID of the current form theme. Can be used to set theme dynamically.

//switch to a predefined theme by name
fd.theme = 'Plumsail'

//switching to a custom theme by ID
fd.theme = 'dfd4cfc38dc1735745ef623de3b56441'

save¶

Saves the form.

fd.save();

field¶

Returns a field by its Name.

fd.field('Field1')

fields¶

Returns all fields available on the form.

fd.fields();

data¶

Gets data from all fields on the form. Can be also used to set multiple values at the same time.

// get data as an object
fd.data();
// set field values
fd.data({Field1: value1, Field2: value2});

control¶

Returns a control by its Name.

fd.control('Control1')

controls¶

Returns all controls available on the form.

fd.controls();

container¶

Returns a container by its Name.

fd.container('Container1')

containers¶

Returns all containers available on the form.

fd.containers();

clear¶

Clears the form.

fd.clear();

exportToPDF¶

Exports the current form to a PDF file. Accepts the following arguments:

file – a filename of the file.

options – options for the PDF file, such as paper size, margin, orientation, etc.

fd.exportToPDF('contacts-form', {
    paperSize: 'A4',
    landscape: false,
    multiPage: true
});

Find more about PDF options in How to save form as PDF for printing.

beforeCreate¶

Occurs prior to the form creation.

vueConfig passed as an argument to the handler is a configuration of the main vue-component. You can register your own child components. You can read more about it here.

fd.beforeCreate(function(vueConfig) {
    console.log('beforeCreate');
    console.log(vueConfig);
});

created¶

Occurs as soon as the form is created.

vue passed as an argument to the handler is a Vue instance of the form.

It is also available from fd variable this way: fd._vue

fd.created(function(vue) {
    console.log('created');
    console.log(vue);
});

beforeRender¶

Occurs before mounting the vue-component to DOM.

vue passed as an argument to the handler is a Vue instance of the form.

It is also available from fd variable this way: fd._vue

fd.beforeRender(function(vue) {
    console.log('beforeRender');
    console.log(vue);
});

rendered¶

Occurs after mounting the vue-component to DOM.

Best place to run your JavaScript since all elements are mounted.

vue passed as an argument to the handler is a Vue instance of the form.

It is also available from fd variable this way: fd._vue

fd.rendered(function(vue) {
    console.log('rendered');
    console.log(vue);
});

beforeSave¶

Occurs before submitting the form.

data passed as an argument to the handler is an object representing user’s input.

Keys are internal names of form fields, Values – user’s input:

{
    Field1: 'text'
    DateTime1: new Date('2017-01-01')
}

Here, you can modify form’s data with code before sending it to the server.

fd.beforeSave(function(data) {
    console.log('beforeSave');
    console.log(data);
});

//async check
fd.beforeSave(function(data) {
    return $.getJSON('https://mywebservice.contoso.com')
            .then(function(result) {
                if(result == null){
                    throw new Error('No results');
                }
                data.additionalProperties = result;
            });
});

saved¶

Occurs after the data is submitted.

Can be used to display confirmation messages after the form is saved or perform some other actions.

fd.saved(function() {
    console.log('saved');
});