I have been studying JSLink and its possible uses and have implemented some examples. But all of the examples work by modifying value in the existing column in a list view.

Can we use JSLink to add a dummy column in the list view which acts on information of the current item? And it does not require creating column in list, say adding a button at the end of the row in list view.

  • yes, that should be possible by modifying the DOM onpostrender. Commented Nov 15, 2017 at 16:13
  • @Colbs: Can you please share an example?
    – Naveen
    Commented Nov 15, 2017 at 18:04
  • answer posted below Commented Nov 27, 2017 at 18:28
  • I would need to load column names from another list. So my list "ColumnNames" contains for example 10 records, each describing the name of the column to add in "onPreRender". However, I can't use ctx it seems to do a Caml Query to get those records. I can do it the normal way, using var context = SP.ClientContext.get_current(); but then I first need to load sp.js (via executeOrDelayUntilScriptLoaded), otherwise SP.ClientContext.get_current() is undefined. The issue is, if I delay (via executeOrDelayUntilScriptLoaded), it seems i'm "too late" in the sequence to still be able to add columns in
    – Peter
    Commented Apr 18, 2019 at 13:17

2 Answers 2


Actually, you can add a dummy field not present on the list by adding to the ctx.ListSchema.Field collection in OnPreRender. Then, when the actual rendering starts, SharePoint will just add another column on the view automatically. Then you can add something into that cell in OnPostRender.

Here's an example of the code to add the field definition into the schema to make the dummy column:

function addTemporaryField(ctx) {
    // make sure we haven't added the field already,
    // in case OnPreRender fires twice, which it does sometimes
    if (ctx.ListSchema.Field.filter(function (fld) {
        return fld.Name == 'FakeField';
    }).length == 0) {

        // create the field schema object to insert
        var FakeFieldObj = {
            AllowGridEditing: 'FALSE',
            DisplayName: 'Fake Field',
            RealFieldName: 'FakeField',
            Name: 'FakeField',
            FieldType: 'Text',
            Type: 'Text',
            Filterable: 'FALSE',
            Sortable: 'FALSE',
            ReadOnly: 'TRUE',

        // find the index of the field to insert next to,
        // based on that field's DISPLAY name.
        var insertIdx = ctx.ListSchema.Field.map(function (fld) {
            return fld.DisplayName;
        }).indexOf('Some Field Name');

        // if you want to insert *before* the field do not add anything
        // but, if you want to insert *after* the field, add 1

        // insert your fake field schema object into the list schema
        ctx.ListSchema.Field.splice(insertIdx, 0, FakeFieldObj);

I wrote a blog post about it where I also go into inserting data into the dummy column, and you could certainly render a button in there.


Here is some sample code I wrote for your situation. I was initially thinking about adding an actual <td> element to the <table>, however, manipulating an existing field is much easier than the DOM.

You need to first add a new placeholder field in your list. That is where the button will be rendered. You basically override the item render and return the proper html with the button.

(function () {
    var overrideCtx = {};
    overrideCtx.Templates = {};
    overrideCtx.OnPostRender = [];

    overrideCtx.Templates.Fields =
        'Button': { 'View': renderButton }



function renderButton(ctx){ 
    var btnTxt = ctx.CurrentItem["Button"];
    var id = ctx.CurrentItem.ID;

    return "<input type='button' onclick='btnClick(" + id + ")' value='" + 
    btnTxt + "'></input>";


function btnClick(id) {
  alert("button " + id + " clicked");

enter image description here

  • Thanks @Michael that worked, is there a quick way to check status or a column value for the row? The other options i could think of is to open the form in a new tab or write rest apis to change values Commented Feb 19, 2021 at 11:40
  • var status = ctx.CurrentItem["Status"]; Commented Feb 19, 2021 at 17:47
  • Sorry, I mean update the value of the column! I definitely got the value using the above solutions Commented Feb 19, 2021 at 21:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.