Is it possible to have a button inside a column in Sharepoint list

Question

Is it possible to have a button inside a column in Sharepoint list.

For Example:

We have a column as ID - number, Name - Single line text box, Status - Approve as button so that user will click Approve and will update the Field value in the list and submits the record.

Is it is feasible in Sharepoint.

May I know, which version of SharePoint you are using? – Shantha Kumar Thambidurai Jan 07 '16 at 14:01 — Shantha Kumar Thambidurai, Jan 07 '16 at 14:01

score 12 · Accepted Answer · answered Jan 07 '16 at 14:34

If you are using SharePoint 2013 or SharePoint Online, you can take advantage of JSLink to render your Status field as you want - in this case a button with some javascript logic behind it.

The process would be very similar to the one described here: http://sharepoint-community.net/profiles/blogs/using-jslink-to-implement-delete-buttons-for-list-view.

I'm assuming here that by "submits the record" you are referring to something that can be achieved by javascript

Danny '365CSI' Engelman · Answer 2 · 2021-10-05T08:30:39.290

Note:

in June 2017, Microsoft disabled the use of JavaScript in a Calculated Column

That means given answers may not apply for newer SharePoint versions

For long explanation and work arounds see:
June 13th 2017 Microsoft blocked handling HTML markup in SharePoint calculated fields - how to get the same functionality back

**Original answer:**

Create a Calculated Column View
set Datatype=Number (will output String as HTML)

Add the Formula:

  ="<a href='#' onclick=""{event.stopPropagation();"
  &"var ID=getItemIDFromIID(findIIDInAncestorNode(this)),"
  &"url=_spPageContextInfo.serverRequestPath.replace(/[^\/]*$/gi,'');"
  &"this.parentNode.innerHTML='Opening:'+ID;"
  &"document.location=url+'DispForm.aspx?ID='+ID;"
  &"}""><img src='/_layouts/images/VIEWREPORTSHH.png' width='20px'></a>"

Onclick it captures the ID value from the TR node
Builts the correct url
Displays a message (every click in a webpage should give an immediate response IMHO)
goes to the url

I am not 100% sure if those IID functions exist in 2010, if not see the examples below for alternative code

More:

Clone/Duplicate item: Set default values in new controls on custom form
Start a Workflow: Can I add a start workflow link to a column in a list view?

ICC

To get the calculated field working on new webapps you need to change a property:
$url = "http://yourwebappurl" $spWA = Get-SPWebApplication $url $spWA.CustomMarkupInCalculatedFieldDisabled = $false $spWA.Update() — Chris DS, Jan 31 '19 at 14:03

score 0 · Answer 3 · edited Oct 22 '20 at 05:41

The column formatting is handled in this document: https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting

Here is an example of adding a button into the list. This can connect to a Power Automate flow which can handle the approval.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "button",
  "txtContent": "It's Flow Time!",
  "customRowAction": {
    "action": "executeFlow",
    "actionParams": "{\"id\":\"f7ecec0b-15c5-419f-8211-302a5d4e94f1\", \"headerText\":\"It's Flow Time!\",\"runFlowButtonText\":\"Do it\"}"
  }
}

Is it possible to have a button inside a column in Sharepoint list

3 Answers3