Managing SharePoint form’s toolbar with JavaScript in Plumsail Forms

On this page, you will find information about the SharePoint form toolbar and how to access its properties.

Toolbar preview


Property holds all parameters for the form 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

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

//close button

//export to PDF button

//comments button

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 === 'SAVE'

//get the index of the Export to PDF button
var indexPDF = fd.toolbar.buttons.findIndex(function(b) {
    return === '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

//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?')) {

Customize toolbar

Here you will learn how to customize the form toolbar.

Hide toolbar

Show or hide the toolbar:

//hide toolbar
fd.toolbar.hidden = true;

//show toolbar
fd.toolbar.hidden = false;

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';;

//add new button

Remove button

Remove button object from the toolbar.

//remove the close button