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

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

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

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.

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