Help with Buttons in List or Library Control

Hi there,

Apologies, I am a little amatuer with JS. I believe my issue is in the JS code. I have the below code for a button in my List/Library control which is rendering correctly. In fact I have multiple buttons which are all showing correctly (5 buttons in total). However when I press any button, the code that is running corresponds to the last item in my JS code. Have I got the JS correct if I want to show multiple buttons in my list or library control. I basically entered in the same script 5 times but configured it to the button requirements.

Like I said, the buttons are showing and when clicked run the workflow, but all buttons are running only the last URL which corresponds to the last button in the JS code.

var url = "URL";
fd.spRendered(function() {
    var intButton = {
        text: 'Book Interview',
        class: 'btn-secondary',
        visible: false,
        icon: 'Calendar',
        iconType: 0,
        click: function() {
            var itemIds = fd.control('SPDataTable1').selectedItems.map(function(item){ return item.ID} );
            fetch(url, {
                method: 'POST',
                body: JSON.stringify({ids: itemIds}),
                headers:{
                'Content-Type': 'application/json'
                }
            })
            .then(function(response) {
                if (response.status !== 202) {
                alert('Looks like there was a problem. Status Code: ' + response.status);
                } else {
                alert('Flow has successfully run, please check your email for the calendar invite and update before forwarding to the candidate');
                }
            })
        }
    }

    fd.control('SPDataTable1').ready(function(dt) {
        //dt parameter is the same as fd.control('SPDataTable1')
        dt.buttons.push(intButton);
        dt.$watch('selectedItems', function(items) {
            intButton.visible = items && items.length > 0 ;
        });
    });
});

var url = "URL";
fd.spRendered(function() {
    var medButton = {
        text: 'Book Medical',
        class: 'btn-secondary',
        visible: false,
        icon: 'Heart',
        iconType: 0,
        click: function() {
            var itemIds = fd.control('SPDataTable1').selectedItems.map(function(item){ return item.ID} );
            fetch(url, {
                method: 'POST',
                body: JSON.stringify({ids: itemIds}),
                headers:{
                'Content-Type': 'application/json'
                }
            })
            .then(function(response) {
                if (response.status !== 202) {
                alert('Looks like there was a problem. Status Code: ' + response.status);
                } else {
                alert('Flow has successfully run, please check your email to see if the medical was booked successfully');
                }
            })
        }
    }
    fd.control('SPDataTable1').ready(function(dt) {
        //dt parameter is the same as fd.control('SPDataTable1')
        dt.buttons.push(medButton);
        dt.$watch('selectedItems', function(items) {
            medButton.visible = items && items.length > 0 ;
        });
    });
});

Dear @mhannaway,
Isn't because you overwrite your URL before the requests even run? Try having multiple variables for your URL:

var url1 = "First URL";
var url2 = "Second URL";
1 Like

Thank you @Nikita_Kurguzov. It looks like that may have done the trick.