Trying to add a custom button to Sharepoint List

Forms SharePoint Online
1

I'm trying to add a custom button to sharepoint library using documentation* found on the site.
Seems no matter what I do I can't get this to work, please tell me where I am going wrong.

*Work with buttons on the toolbar of a List or Library — SharePoint forms

I've added the below code to my JS > Current Form.
I am expecting to icon in my list view, but no success.

//ADD CUSTOM BUTTON
fd.spRendered(function() {
//new button
var button = {
    text: '',
    class: 'btn-secondary',
    visible: true,
    icon: 'Blocked',
    iconType: 0,
    location: 1,
    click: function() {
        alert('Button clicked!');
    }
}

fd.control('SPDataTable1').ready().then(function(dt) {
    //dt parameter is the same as fd.control('SPDataTable1')
    dt.buttons.push(button);
});

});

All other buttons have been hidden using CSS, my custom button is not appearing.
image

2

Dear @drryaт,
The code you have will add button to the right, like in the example article:

image
image829×244 11 KB

It might be hidden with your CSS, as it's no different than any other buttons. Try it without the CSS.

3

Hi I see now this code is not what I am looking for.
This adds to a Datatable control.

Not what I am looking for.

I am trying to add custom a button to the sharepoint list/library view.
I want to be able to select sharepoint records and take actions based on the those selected records. (Send out a mail.)

4

Dear @drryan,
This code is specific to Forms, and the List or Library control you can use on our forms. This List or Library control allows you to present any SharePoint List or Library on the form, and customize it, but only on a form, not in the List View.

5

Hi,

I am trying to update the dropdown field to "Approved" for selected rows using custom button. I tried to follow the documentation but didn't work. Can you please help.

image

6

@aseem,

You need to get the ID of the selected items and update item with PnPjs function.

The code to get selected items:

fd.control('Control1').selectedItems

And find code examples on how to update list item with PnPjs here: