Can JSLink be used to add a new column in the list view?
-
06-01-2021 - |
質問
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.
解決
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.
他のヒント
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");
}