Question: I am wondering if anyone could clarify my confusion on how to use JavaScript to read/filter SharePoint List items, please? As a code example from MSDN: <https://msdn.microsoft.com/en-us/library/office/hh185007(v=office.14).aspx>

In the CAML query XML, what is the FieldRef field in SharePoint List? Is it defined column names/list properties?

When ClientContext object load collListItem, it has a (Include) parameter which includes a bunch of field/property names, what are they? Are they defined column names/list properties as well?

Is there anyway I can know what field names are, so I can use/filter the List?

Thank you.

Answer: 
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](https://morefunthanapokeintheeye.blogspot.com/2016/06/how-to-add-temporary-columns-to-list-views.html) 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 }
    };

    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](https://i.stack.imgur.com/d8Cxs.png)](https://i.stack.imgur.com/d8Cxs.png)