Managing form's toolbar with JS

Toolbar

Property holds all parameters for the form toolbar.

fd.toolbar;

Toolbar buttons

Get all toolbar buttons as an array of objects. Can be used to add new buttons, modify or remove existing ones.

//return toolbar buttons as an array of objects
fd.toolbar.buttons;

By default, the toolbar contains three buttons:

Save
Close
Export to PDF
Comments

You can access a specific button by entering its index number:

//save button
fd.toolbar.buttons[0];

//close button
fd.toolbar.buttons[1];

//export to PDF button
fd.toolbar.buttons[3];

//comments button
fd.toolbar.buttons[4];

Button id

The property holds a unique identifier for the button. Use the property to identify a specific button in the toolbar:

//get the Save button
var saveButton = fd.toolbar.buttons.find(function(b) {
    return b.id === 'SAVE'
})

//get the index of the Export to PDF button
var indexPDF = fd.toolbar.buttons.findIndex(function(b) {
    return b.id === 'PDF'
})

Button class

The object holds the button’s CSS classes. Use the property to assign CSS classes with either string or an object. Default class btn cannot be removed or changed.

//set button's class with a string
fd.toolbar.buttons[1].class  = 'btn-danger';

//or with an object
fd.toolbar.buttons[1].class  = {'btn-danger': true};

Button style

The property holds a button’s HTML property style as a string. Use the property to add styles to a specific button.

//hide the button
fd.toolbar.buttons[1].style = 'display: none;';

//increase text font size the button
fd.toolbar.buttons[2].style = 'font-size: 20px;';

Button text

Get or set button’s text.

//set button's text
fd.toolbar.buttons[0].text = "Submit";

Button icon

The property holds an icon name that matches icon names from Microsoft Fabric Icons. Use the property to add or change a button’s icon.

//get button's icon as a string
fd.toolbar.buttons[0].icon;

//set button's icon
fd.toolbar.buttons[0].icon = 'Save';

Button position

The property defines a button position.

0 - the button is located on the left; 1 - on the right.

//move button to the right
fd.toolbar.buttons[0].location = 1

Disable button

The property defines whether a button is disabled or enabled.

//disable button
fd.toolbar.buttons[0].disabled = true;

//enable button
fd.toolbar.buttons[0].disabled = false;

Button function

Holds a function, that is executed when a button is clicked. Can be used to assign a new function.

//change button click function
fd.toolbar.buttons[1].click = function(){
    if (confirm('Are you sure you want to exit the form?')) {
        fd.close();
    }
}

Customize toolbar

Here you will learn how to customize the form toolbar.

Add new button

Create a new button and add it to the toolbar.

var approveBtn = {
    icon: 'WaitlistConfirm',
    class: 'btn-outline-primary',
    text: 'Approve record',
    location: 1,
    click: function() {
        fd.field('Status').value = 'Approved';
        fd.save();
    }
}

//add new button
fd.toolbar.buttons.push(approveBtn);

Remove button

Remove button object from the toolbar.

//remove the close button
fd.toolbar.buttons.splice(1,1);

Managing SharePoint form’s toolbar with JavaScript in Plumsail Forms