List or Libray Control - inline editing, custom button

Forms
1

Hello folks,

is there a way to add a button to each item of list/library control, that sets a value on button click, for example "approved = yes" directly when clicking the item, without having to click on the pencil on the left?

image
image766×412 6.85 KB

2

Hello @JonHebbe,

You can change the appearance of any column: change color, add buton, etc.; with column formatters.

Use this code example as a starting point to add a button that updates the list item:

// the example is for the ID column 
//replace ListName with the source list internal name
//replace Control0 with the internal name of the List or Library control
const value = ctx.row.ID;
const {row, listId, webUrl} = ctx;
return `<button onclick="pnp.sp.web.lists.getByTitle('List Name').items.getById('${value}').update({  Title: 'New Title' }).then(function() { fd.control('Control0').refresh() })" type="button" class="fd-button btn btn-light" style="width: 100px;">Update</button>`
1 Like
3

Hey @mnikitina, thanks for you fast answer.

I get these 2 errors when clicking the button. I corrected the ListName to the specific list and the Control0 to SPDataTable1

[Report Only] Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'strict-dynamic' 'unsafe-eval' 'nonce-c5136c0f-0c29-4ed2-8c9f-db04a7d1466e'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

Uncaught ReferenceError: pnp is not defined
at HTMLButtonElement.onclick

4

Hello @JonHebbe,

Try to define fd and pnp globally, add the below code before all the code:

window.fd= fd;
window.pnp = pnp;

image