TransWikia.com

Is the creation of a custom button for edit in a column possible?

SharePoint Asked on November 28, 2021

The image here isn’t real, of course, but it’s a representation of what I’m trying to accomplish. The buttons that occupy the right-most column in this list are simply "Edit" buttons, and the images for the buttons could theoretically be stored in Site Assets, etc. Is there a way I can create this?

prototype

2 Answers

As Ganesh Sanap mentioned in the comments, that is entirely possible using Client Side Rendering (CSR).

CSR allows you to tap into the same system that SharePoint itself uses for it's default rendering, and allows you to override the SharePoint code and output whatever HTML you want to implement your custom rendering.

This is one of the best articles explaining CSR.

Essentially what you would want to do is create a CSR override script for your "Sign Up" column, overriding the "View" aspect (you can also override the "EditForm" and "DisplayForm", and more... it's in the article), and instead of letting SharePoint determine the HTML that would go in the table cell of the list view, you would output a <button> element (or <input type="button">, or however you wanted to do it, all valid HTML would work) with all the information needed to indicate what would happen when someone clicked the button.

The second part of the solution would be (also as Ganesh Sanap mentioned) to use JSLink to attach your override script somewhere so it would be pulled in wherever it was needed.

At this point I think it's important to note: CSR and JSLink are not equivalent. If you do research on the web you will find many examples where people treat them as if they are, but they are not. CSR is what you use to output the custom HTML you want for your field. JSLink is simply a mechanism by which you can attach Javascript files to various SharePoint objects. You can use CSR without using JSLink, and you can use JSLink to attach Javascript files that are not CSR files. However, they work so well together that people confuse one for the other. JSLink is definitely the easiest way to pull in CSR files.

Anyway, you can attach scripts using the JSLink property of the column itself (you will need to use Powershell to do this), which would be useful if you wanted to control the rendering of the field in more than one place, say in the View and in the DisplayForm and in the EditForm. And if your field is a site column, if someone used it in a different list, the CSR script would follow along.

There is also a JSLink you can access on views, through the List View Web Part. If you edit the LVWP, at the bottom of the web part editor pane, you will see a "Miscellaneous" section, which has a JSLink text box where you can enter the URL of your CSR file. This is easy to access through the web UI, however the one caveat to note here is that the JSLink property in the LVWP attaches the file to the current view only, not the entire LVWP. So if you create a second view, and you want your custom rendering there, you will have to switch to that view, edit the webpart again, and re-populate the URL to your CSR file.

So yes, it is entirely possible to do what you want, in a variety of ways, using CSR and JSLink. Search for that and you will find plenty of examples.

Answered by Dylan Cristy on November 28, 2021

if the button you are tryng to achieve have the same functionality as the standard Edit buttons.. can't you just css style that view?

Answered by Fabrizio Chionni on November 28, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP