2

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. – Michael Colbs Nov 15 '17 at 16:13
  • @Colbs: Can you please share an example? – Naveen Nov 15 '17 at 18:04
  • answer posted below – Michael Colbs Nov 27 '17 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 Apr 18 '19 at 13:17
5

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
        insertIdx++;

        // 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.

| improve this answer | |
0

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 }
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

})();

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

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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