Kategoriarkiv: jsgrid

Drag and Drop Image using Client Side Rendering

I continue my series about Client Side Rendering (CSR) and jsgrid. Today I want to try a custom field where users can drag and drop images. The inspiration comes from:

AutoUpload field written by Anton Vishnyakov and
Base64 Drag and drop written by oroboto

What I want to achieve is:

A custom field that is rendered with jslink
Users can drag and drop small pictures (thumbnails) into the field
A base64 image representation is saved as the field value
Optionally implement pasting images using Clipboard API

Step 1 Create a field with a custom jslink

Create a field of type Note. I am using the PnP Core Extensions to make it quickier:

‘

My jslink file is very simple to begin with:

(function () {
    'use strict';
    function view(ctx, field) {
        return &amp;quot;hello&amp;quot;;
    }

    var overrideContext = {};

    overrideContext.Templates = overrideContext.Templates || {};
    overrideContext.Templates.Fields = {
        'DragAndDropImage': {
            'View': view,
            'DisplayForm': view
            //'EditForm': verySimpleNewAndEdit,
            //'NewForm': verySimpleNewAndEdit
        }
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
})();

(function () {

'use strict';

function view(ctx, field) {

return &quot;hello&quot;;

}

var overrideContext = {};

overrideContext.Templates = overrideContext.Templates || {};

overrideContext.Templates.Fields = {

'DragAndDropImage': {

'View': view,

'DisplayForm': view

//'EditForm': verySimpleNewAndEdit,

//'NewForm': verySimpleNewAndEdit

}

};

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);

})();

This will result in the following display form. Just outputting “hello” indicates that my field is jslink are registered correctly:

Step 2. Ensure base64 works in the field

Not all fields will work. I have tried many of them and found that the field type Note with Plain text works for saving base64 images.

First download some sample icons at flaticons.com

Convert an icon to a base64 image using dataurl.net:

Save the string into the Drag And Drop Image field:

Now update the view template in the CSR overrides:

//http://stackoverflow.com/a/822486/632117
//in display form we have to strip the html elements that are pasted in by SharePoint
function strip(html) {
    var tmp = document.createElement(&amp;quot;DIV&amp;quot;);
    tmp.innerHTML = html;
    return tmp.textContent || tmp.innerText || &amp;quot;&amp;quot;;
}
function renderImage(fieldValue) {
    if (fieldValue) {
        return ['&lt;img style=&amp;quot;max-width:100px;&amp;quot; src=&amp;quot;',
            strip(fieldValue), '&amp;quot;/&gt;'].join(&amp;quot;&amp;quot;);
    }
    return &amp;quot;&amp;quot;;
}

function view(ctx, field) {
    //disable editing in Quick Edit mode
    if (ctx.inGridMode) {
        field.AllowGridEditing = false;
    }
    var fieldValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
    return renderImage(fieldValue);
}

//http://stackoverflow.com/a/822486/632117

//in display form we have to strip the html elements that are pasted in by SharePoint

function strip(html) {

var tmp = document.createElement(&quot;DIV&quot;);

tmp.innerHTML = html;

return tmp.textContent || tmp.innerText || &quot;&quot;;

}

function renderImage(fieldValue) {

if (fieldValue) {

return ['<img style=&quot;max-width:100px;&quot; src=&quot;',

strip(fieldValue), '&quot;/>'].join(&quot;&quot;);

}

return &quot;&quot;;

}

function view(ctx, field) {

//disable editing in Quick Edit mode

if (ctx.inGridMode) {

field.AllowGridEditing = false;

}

var fieldValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];

return renderImage(fieldValue);

}

Well, it works:

Step 3. Implement drag and drop

Let’s start with the edit template:

; title: ; notranslate ]
function renderDropZone(fieldValue) {
    var img = renderImage(fieldValue);
    return ['&lt;div id=&amp;quot;drop_zone&amp;quot;&gt;', img, '&lt;/div&gt;'].join('');
}

function edit(ctx, field) {
    var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);
    formCtx.registerGetValueCallback(formCtx.fieldName, function () {
        //will implement the logic later
        return &amp;quot;&amp;quot;;
    });
    var fieldValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
    return renderDropZone(fieldValue);
}

var overrideContext = {};
overrideContext.Templates = overrideContext.Templates || {};
overrideContext.Templates.Fields = {
    'DragAndDropImage': {
        'View': view,
        'DisplayForm': view,
        'EditForm': edit,
        'NewForm': edit
    }
};

; title: ; notranslate ]

function renderDropZone(fieldValue) {

var img = renderImage(fieldValue);

return ['<div id=&quot;drop_zone&quot;>', img, '</div>'].join('');

}

function edit(ctx, field) {

var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);

formCtx.registerGetValueCallback(formCtx.fieldName, function () {

//will implement the logic later

return &quot;&quot;;

});

var fieldValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];

return renderDropZone(fieldValue);

}

var overrideContext = {};

overrideContext.Templates = overrideContext.Templates || {};

overrideContext.Templates.Fields = {

'DragAndDropImage': {

'View': view,

'DisplayForm': view,

'EditForm': edit,

'NewForm': edit

}

};

I have wrapped the image element with a div (id=drop_zone). Now I need some css to show it:

var additionalStyle = [
    '&lt;style&gt;',
    '#drop_zone { height: 100px; width:100px; background: #efe}',
    '&lt;/style&gt;'
].join('');
document.write(additionalStyle);

var additionalStyle = [

'<style>',

'#drop_zone { height: 100px; width:100px; background: #efe}',

'</style>'

].join('');

document.write(additionalStyle);

Now there is a clear “drop zone”:

To make it as simple as possible, let’s follow oroboto’s drag and drop code. Here we go:

var processFiles = function (event) {
    var element = event.target;
    event.stopPropagation();
    event.preventDefault();
    removeDropZoneClass(event);

    // FileList object of File objects
    var files = event.dataTransfer.files;
    for (var i = 0, f; f = files[i]; i++) {
        var reader = new FileReader();

        // closure to capture file info
        reader.onload = (function (file, index) {
            return function (e) {
                var dataUri = e.target.result;
                var img = renderImage(dataUri);
                element.innerHTML = img;
            };
        })(f, i);

        // read file as data URI
        reader.readAsDataURL(f);
    }

};

var highlightDropZone = function (e) {
    e.stopPropagation();
    e.preventDefault();
    document.getElementById('drop_zone').classList.add('highlight');
}

var removeDropZoneClass = function (e) {
    document.getElementById('drop_zone').classList.remove('highlight');
}

function prepareDropZone(ctx) {
    if (ctx.inGridMode) {
        return;
    }
    // add event listeners if File API is supported
    var dropZone = document.getElementById('drop_zone');
    if (window.File &amp;amp;&amp;amp; window.FileReader &amp;amp;&amp;amp; window.FileList &amp;amp;&amp;amp; window.Blob) {
        dropZone.addEventListener('drop', processFiles, false);
        dropZone.addEventListener('dragover', highlightDropZone, false);
        dropZone.addEventListener('dragenter', highlightDropZone, false);
        dropZone.addEventListener('dragleave', removeDropZoneClass, false);
    } else {
        dropZone.innerHTML = 'The File APIs are not fully supported in this browser.';
        dropZone.className = 'highlight';
    }

};

// ... code omitted for brevity

overrideContext.Templates.OnPostRender = prepareDropZone;

var processFiles = function (event) {

var element = event.target;

event.stopPropagation();

event.preventDefault();

removeDropZoneClass(event);

// FileList object of File objects

var files = event.dataTransfer.files;

for (var i = 0, f; f = files[i]; i++) {

var reader = new FileReader();

// closure to capture file info

reader.onload = (function (file, index) {

return function (e) {

var dataUri = e.target.result;

var img = renderImage(dataUri);

element.innerHTML = img;

};

})(f, i);

// read file as data URI

reader.readAsDataURL(f);

}

};

var highlightDropZone = function (e) {

e.stopPropagation();

e.preventDefault();

document.getElementById('drop_zone').classList.add('highlight');

}

var removeDropZoneClass = function (e) {

document.getElementById('drop_zone').classList.remove('highlight');

}

function prepareDropZone(ctx) {

if (ctx.inGridMode) {

return;

}

// add event listeners if File API is supported

var dropZone = document.getElementById('drop_zone');

if (window.File &amp;&amp; window.FileReader &amp;&amp; window.FileList &amp;&amp; window.Blob) {

dropZone.addEventListener('drop', processFiles, false);

dropZone.addEventListener('dragover', highlightDropZone, false);

dropZone.addEventListener('dragenter', highlightDropZone, false);

dropZone.addEventListener('dragleave', removeDropZoneClass, false);

} else {

dropZone.innerHTML = 'The File APIs are not fully supported in this browser.';

dropZone.className = 'highlight';

}

};

// ... code omitted for brevity

overrideContext.Templates.OnPostRender = prepareDropZone;

That’s not bad, not bad:

The last thing in this step is to save the base64 value

formCtx.registerGetValueCallback(formCtx.fieldName, function () {
    var dropZone = document.getElementById(&amp;quot;drop_zone&amp;quot;);
    var img = dropZone.getElementsByTagName(&amp;quot;img&amp;quot;);
    return img.length ? img[0].src : &amp;quot;&amp;quot;;
});

formCtx.registerGetValueCallback(formCtx.fieldName, function () {

var dropZone = document.getElementById(&quot;drop_zone&quot;);

var img = dropZone.getElementsByTagName(&quot;img&quot;);

return img.length ? img[0].src : &quot;&quot;;

});

Step 4 Support pasting images

Drag And Drop is cool. But what about pasting images. Wouldn’t it be nice? The functionality is called Clipboard API. You can check which browsers support this on caniuse.com. The simplest example I’ve found is on stackoverflow: How does onpaste work

The code I use is as follows:

document.onpaste = function (event) {
    var items = (event.clipboardData || event.originalEvent.clipboardData).items;
    console.log(JSON.stringify(items)); // will give you the mime types
    var blob = items[0].getAsFile();
    var reader = new FileReader();
    reader.onload = function (e) {
        var dataUri = e.target.result;
        var img = renderImage(dataUri);
        dropZone.innerHTML = img;
    }; // data url!
    reader.readAsDataURL(blob);
}

document.onpaste = function (event) {

var items = (event.clipboardData || event.originalEvent.clipboardData).items;

console.log(JSON.stringify(items)); // will give you the mime types

var blob = items[0].getAsFile();

var reader = new FileReader();

reader.onload = function (e) {

var dataUri = e.target.result;

var img = renderImage(dataUri);

dropZone.innerHTML = img;

}; // data url!

reader.readAsDataURL(blob);

}

Here is how pasting works:

Step 5 Error handling (Not done yet)

I need to ensure that

only images are allowed
only small images are allowed, otherwise base64 will be to heavy
proper handling of old browsers, we don’t need to support them, but the users should get good information about what they need to make it work
a help icon is shown, when clicked a help callout is shown about how it works

Step 6 Support Quick Edit (Not done yet)

We need code that works in Quick Edit:

need to write code for jsgrid
need handling of multiple drop zones on the same page (unique ids and smart handling of pasting)

Summary

This post is about discovering what’s possible to do with client side rendering and using today’s technologies like html5 and new javascript apis. I hope you’ve got some inspiration how normal sharepoint fields combined with Client Side Rendering (CSR) api can create more value in your project, in Office 365 and in SharePoint On Premises. Please leave feedback in comments.

Fulll source code

And finally, here comes the most up-to-date full source code for this custom Drag And Drop Image field:

(function () {
    'use strict';
    var additionalStyle = [
        '&lt;style&gt;',
        '#drop_zone { height: 100px; width:100px; background: #efe}',
        '#drop_zone.highlight {background:#fee;}',
        '&lt;/style&gt;'
    ].join('');
    document.write(additionalStyle);


    var processFiles = function (event) {
        var element = event.target;
        event.stopPropagation();
        event.preventDefault();
        removeDropZoneClass(event);

        // FileList object of File objects
        var files = event.dataTransfer.files;
        for (var i = 0, f; f = files[i]; i++) {
            var reader = new FileReader();

            // closure to capture file info
            reader.onload = (function (file, index) {
                return function (e) {
                    var dataUri = e.target.result;
                    var img = renderImage(dataUri);
                    element.innerHTML = img;
                };
            })(f, i);

            // read file as data URI
            reader.readAsDataURL(f);
        }

    };

    var highlightDropZone = function (e) {
        e.stopPropagation();
        e.preventDefault();
        document.getElementById('drop_zone').classList.add('highlight');
    }

    var removeDropZoneClass = function (e) {
        document.getElementById('drop_zone').classList.remove('highlight');
    }

    function prepareDropZone(ctx) {
        if (ctx.inGridMode) {
            return;
        }
        // add event listeners if File API is supported
        var dropZone = document.getElementById('drop_zone');
        if (window.File &amp;amp;&amp;amp; window.FileReader &amp;amp;&amp;amp; window.FileList &amp;amp;&amp;amp; window.Blob) {
            dropZone.addEventListener('drop', processFiles, false);
            dropZone.addEventListener('dragover', highlightDropZone, false);
            dropZone.addEventListener('dragenter', highlightDropZone, false);
            dropZone.addEventListener('dragleave', removeDropZoneClass, false);
        } else {
            dropZone.innerHTML = 'The File APIs are not fully supported in this browser.';
            dropZone.className = 'highlight';
        }

        document.onpaste = function (event) {
            var items = (event.clipboardData 
                 || event.originalEvent.clipboardData).items;
            console.log(JSON.stringify(items)); // will give you the mime types
            var blob = items[0].getAsFile();
            var reader = new FileReader();
            reader.onload = function (e) {
                var dataUri = e.target.result;
                var img = renderImage(dataUri);
                dropZone.innerHTML = img;
            }; // data url!
            reader.readAsDataURL(blob);
        }
       
    };

    //http://stackoverflow.com/a/822486/632117
    //in display form we have 
    //to strip the html elements that are pasted in by SharePoint
    function strip(html) {
        var tmp = document.createElement(&amp;quot;DIV&amp;quot;);
        tmp.innerHTML = html;
        return tmp.textContent || tmp.innerText || &amp;quot;&amp;quot;;
    }
    function renderImage(fieldValue) {
        if (fieldValue) {
            return ['&lt;img style=&amp;quot;max-width:100px;&amp;quot; src=&amp;quot;',
                strip(fieldValue), '&amp;quot;/&gt;'].join('');
        }
        return &amp;quot;&amp;quot;;
    }
    
    function view(ctx, field) {
        //disable editing in Quick Edit mode
        if (ctx.inGridMode) {
            field.AllowGridEditing = false;
        }
        var fieldValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
        return renderImage(fieldValue);
    }
    
    function renderDropZone(fieldValue) {
        var img = renderImage(fieldValue);
        return ['Drop files here&lt;div id=&quot;drop_zone&quot;&gt;', img, '&lt;/div&gt;'].join('');
    }

    function edit(ctx, field) {
        var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);
        formCtx.registerGetValueCallback(formCtx.fieldName, function () {
            var dropZone = document.getElementById('drop_zone');
            var img = dropZone.getElementsByTagName('img');
            return img.length ? img[0].src : &amp;quot;&amp;quot;;
        });
        var fieldValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
        return renderDropZone(fieldValue);
    }

    var overrideContext = {};
    overrideContext.Templates = overrideContext.Templates || {};
    overrideContext.Templates.Fields = {
        'DragAndDropImage': {
            'View': view,
            'DisplayForm': view,
            'EditForm': edit,
            'NewForm': edit
        }
    };

    overrideContext.Templates.OnPostRender = prepareDropZone;

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
})();

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

(function () {

'use strict';

var additionalStyle = [

'<style>',

'#drop_zone { height: 100px; width:100px; background: #efe}',

'#drop_zone.highlight {background:#fee;}',

'</style>'

].join('');

document.write(additionalStyle);

var processFiles = function (event) {

var element = event.target;

event.stopPropagation();

event.preventDefault();

removeDropZoneClass(event);

// FileList object of File objects

var files = event.dataTransfer.files;

for (var i = 0, f; f = files[i]; i++) {

var reader = new FileReader();

// closure to capture file info

reader.onload = (function (file, index) {

return function (e) {

var dataUri = e.target.result;

var img = renderImage(dataUri);

element.innerHTML = img;

};

})(f, i);

// read file as data URI

reader.readAsDataURL(f);

}

};

var highlightDropZone = function (e) {

e.stopPropagation();

e.preventDefault();

document.getElementById('drop_zone').classList.add('highlight');

}

var removeDropZoneClass = function (e) {

document.getElementById('drop_zone').classList.remove('highlight');

}

function prepareDropZone(ctx) {

if (ctx.inGridMode) {

return;

}

// add event listeners if File API is supported

var dropZone = document.getElementById('drop_zone');

if (window.File &amp;&amp; window.FileReader &amp;&amp; window.FileList &amp;&amp; window.Blob) {

dropZone.addEventListener('drop', processFiles, false);

dropZone.addEventListener('dragover', highlightDropZone, false);

dropZone.addEventListener('dragenter', highlightDropZone, false);

dropZone.addEventListener('dragleave', removeDropZoneClass, false);

} else {

dropZone.innerHTML = 'The File APIs are not fully supported in this browser.';

dropZone.className = 'highlight';

}

document.onpaste = function (event) {

var items = (event.clipboardData

|| event.originalEvent.clipboardData).items;

console.log(JSON.stringify(items)); // will give you the mime types

var blob = items[0].getAsFile();

var reader = new FileReader();

reader.onload = function (e) {

var dataUri = e.target.result;

var img = renderImage(dataUri);

dropZone.innerHTML = img;

}; // data url!

reader.readAsDataURL(blob);

}

};

//http://stackoverflow.com/a/822486/632117

//in display form we have

//to strip the html elements that are pasted in by SharePoint

function strip(html) {

var tmp = document.createElement(&quot;DIV&quot;);

tmp.innerHTML = html;

return tmp.textContent || tmp.innerText || &quot;&quot;;

}

function renderImage(fieldValue) {

if (fieldValue) {

return ['<img style=&quot;max-width:100px;&quot; src=&quot;',

strip(fieldValue), '&quot;/>'].join('');

}

return &quot;&quot;;

}

function view(ctx, field) {

//disable editing in Quick Edit mode

if (ctx.inGridMode) {

field.AllowGridEditing = false;

}

var fieldValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];

return renderImage(fieldValue);

}

function renderDropZone(fieldValue) {

var img = renderImage(fieldValue);

return ['Drop files here<div id="drop_zone">', img, '</div>'].join('');

}

function edit(ctx, field) {

var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);

formCtx.registerGetValueCallback(formCtx.fieldName, function () {

var dropZone = document.getElementById('drop_zone');

var img = dropZone.getElementsByTagName('img');

return img.length ? img[0].src : &quot;&quot;;

});

var fieldValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];

return renderDropZone(fieldValue);

}

var overrideContext = {};

overrideContext.Templates = overrideContext.Templates || {};

overrideContext.Templates.Fields = {

'DragAndDropImage': {

'View': view,

'DisplayForm': view,

'EditForm': edit,

'NewForm': edit

}

};

overrideContext.Templates.OnPostRender = prepareDropZone;

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);

})();

Disabling a column in Quick Edit

In my project I have a column called Request Status. This column is not shown in any forms, meaning users should not edit, because it is controlled through the app. Nevertheless it is editable in the Quick Edit.

Yesterday I wrote about jsgrid in my blog. Now comes more. Today I’ll share a little practical solution how one can disable editing a field in Quick Edit.

The field is edited in jsgrid, but to disable it, we only have set the property called AllowGridEditing to false on our column (not even touching the heavy jsgrid api). We can do in the OnPreRender event in our Client Side Rendering (CSR) registration. Having the context object we have access to the Fields (ContextInfo.ListSchema.Field):

; title: ; notranslate ]
(function () {
    var overrideContext = {};
    overrideContext.Templates = overrideContext.Templates || {};
    overrideContext.Templates.OnPreRender = function(ctx) {
    	var statusField = ctx.ListSchema.Field.filter(function(f) {
    		return f.Name === &quot;Request_x0020_Status&quot;;
    	});
    	if (statusField) {
    		statusField[0].AllowGridEditing = false;
    	}
    }
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
})();

; title: ; notranslate ]

(function () {

var overrideContext = {};

overrideContext.Templates = overrideContext.Templates || {};

overrideContext.Templates.OnPreRender = function(ctx) {

var statusField = ctx.ListSchema.Field.filter(function(f) {

return f.Name === "Request_x0020_Status";

});

if (statusField) {

statusField[0].AllowGridEditing = false;

}

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);

})();

JSGrid Basics

JSGrid is the javascript framework in SharePoint used in Quick Edit View (previously Datasheet View). There are a few very good blog posts on this topic (See below in “Sources”). Nevertheless the fact is that jsgrid and working with quick edit from a developer’s perspective is a huge undiscovered area. Articles I have seen are intended for advanced developers. The goal with my post today is to outline the very basics of working with JSGrid. When you know the basics you will be more comfortable to discover and try out more.

The example I want to show is a jsgrid code for a “VerySimpleColumn”. The source code can be found on gist.github.com: https://gist.github.com/mirontoli/838d60df76107fac56a0 To focus on jsgrid, I assume you have knowledge and some experience of working with jslink, which is related to jsgrid.

A word of caution before we start

JSGrid is an undocumented part of SharePoint javascript “ecosystem”, neither it is a part of the official SharePoint javascript api. So actually we should not use it. On the other hand JSGrid indicates something that is more like a full-fledged javascript api because:

It seems to be carefully prepared (all possible situations are covered)
The api is human-readable. The events and properties are called OnBeginEdit, OnEndEdit, Focus, BindToCell and so on (opposed to the properties in the SP.Microfeed.js like $v_1, $v_2)
It follows many best-practices for handling the UI in javascript, eventhough some constructs are clumsy, e.g. using absolute-positioned overlays on top of original table cells while editing a cell value.

So to me it seems quite okay to use it in real applications, but we have to live with the risk that the jsgrid api will be changed without any notice to us developers.

Set up a site column with a custom jslink

The first step is to set up everything so we can start discovering jsgrid. It is just a walkthrough, not a detailed explanation. If you are eager to look at jsgrid, jump directly to that section. In this example we’ll apply a jslink to a custom site column. The very same jslink will be used in jsgrid, too.

First of all add a new Site Column, call it VerySimpleColumn. The type is Multiple lines of text:

Let us put it in a new group: Tolle Columns (beautiful, huh?)

Three lines of plain text. Nothing extravagant.

After that we can verify that the column exists. Fine.

Now we have to update the jslink property for the new column. Make it in an app:

Now add a custom list, call it “TolleList”:

In the List Settings add the new site column, then you’ll see this:

Now upload an empty js file to the Style Library, call it field.jslink.verysimplecolumn.js:

It goes so fast :) Now it is time to implement some jslink code

Writing jslink

I’ve been thinking a while. What example could I use for that jslink? I want it to be a very simple example, so we don’t need to concentrate on actual rendering logic. You can see sophisticated examples that I listed below in “Sources”. Here we will be using this example: We’ll append a text to the field value: “This field is fully controlled by jslink”. This text should be visible on all forms, but it is not a part of the actual field value. Well here it is:

The code should appear simple for us who have written at least some jslink code.

(function () {
    function verySimpleView(ctx, field) {
        var wrapper = 'This field is fully controlled by jslink&lt;hr&gt;&lt;span&gt;{0}&lt;/span&gt;';
        var value = ctx.CurrentItem[ctx.CurrentFieldSchema.Name] || &quot;&quot;;
        return String.format(wrapper, value);
    }
    
    function verySimpleNewAndEdit(ctx) {
        var wrapper = 'This field is fully controlled by jslink&lt;br&gt;&lt;input type=&quot;text&quot; id=&quot;{0}&quot; value&quot;{1}&quot;/&gt;';
        var id = 'tolle-' + new Date().getTime();
        var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);
 
        formCtx.registerGetValueCallback(formCtx.fieldName, function () {
            var input = document.getElementById(id);
            return input.value;
        });
        var value = ctx.CurrentItem[ctx.CurrentFieldSchema.Name] || &quot;&quot;;
        var html = String.format(wrapper, id, value);
        return html;
    }
    var overrideContext = {};
 
    overrideContext.Templates = overrideContext.Templates || {};
    overrideContext.Templates.Fields = {
        'VerySimpleColumn': {
            'View': verySimpleView,
            'DisplayForm': verySimpleView,
            'EditForm': verySimpleNewAndEdit,
            'NewForm': verySimpleNewAndEdit
        }
    };
 
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
})();

(function () {

function verySimpleView(ctx, field) {

var wrapper = 'This field is fully controlled by jslink<hr><span>{0}</span>';

var value = ctx.CurrentItem[ctx.CurrentFieldSchema.Name] || "";

return String.format(wrapper, value);

}

function verySimpleNewAndEdit(ctx) {

var wrapper = 'This field is fully controlled by jslink<br><input type="text" id="{0}" value"{1}"/>';

var id = 'tolle-' + new Date().getTime();

var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);

formCtx.registerGetValueCallback(formCtx.fieldName, function () {

var input = document.getElementById(id);

return input.value;

});

var value = ctx.CurrentItem[ctx.CurrentFieldSchema.Name] || "";

var html = String.format(wrapper, id, value);

return html;

}

var overrideContext = {};

overrideContext.Templates = overrideContext.Templates || {};

overrideContext.Templates.Fields = {

'VerySimpleColumn': {

'View': verySimpleView,

'DisplayForm': verySimpleView,

'EditForm': verySimpleNewAndEdit,

'NewForm': verySimpleNewAndEdit

}

};

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);

})();

This is how it looks like in the DispForm:

JSGrid. First Step: Disable the field in Quick Edit

Now we are ready to handle the Quick Edit. What we’ll do first is to disable editing our column. Why? Let’s say we have some complicated logic for rendering and editing of our field, we don’t the quick edit override it. So before we start implementing the QuickEdit part of the field, we want to disable it. Here, perhaps, ends the implementation of Quick Edit for some business cases.

To determine the Quick Edit we can use the propery of ther Render Context called inGridMode. The Quick Edit list uses the “View” template:

; title: ; notranslate ]
function handleGridMode(ctx, field) {
    field.AllowGridEditing = false;
}
function verySimpleView(ctx, field) {
    var wrapper = 'This field is fully controlled by jslink&lt;hr&gt;&lt;span&gt;{0}&lt;/span&gt;';
    var value = ctx.CurrentItem[ctx.CurrentFieldSchema.Name] || &quot;&quot;;
    if (ctx.inGridMode) {
        handleGridMode(ctx, field);
    }
    return String.format(wrapper, value);
}

; title: ; notranslate ]

function handleGridMode(ctx, field) {

field.AllowGridEditing = false;

}

function verySimpleView(ctx, field) {

var wrapper = 'This field is fully controlled by jslink<hr><span>{0}</span>';

var value = ctx.CurrentItem[ctx.CurrentFieldSchema.Name] || "";

if (ctx.inGridMode) {

handleGridMode(ctx, field);

}

return String.format(wrapper, value);

}

Wiring up a jsgrid EditControl

When our code works in all forms and the values are not “damaged” in the Quick Edit View, then the next step is to create an Edit Control that is used by the jsgrid “engine”. The very minimal Edit Control object is as follows. It contains a few event listeners and properties:

{
    SupportedWriteMode: SP.JsGrid.EditActorWriteType.LocalizedOnly,
    SupportedReadMode: SP.JsGrid.EditActorReadType.LocalizedOnly,
    BindToCell: function () { console.log(&quot;tolle BindToCell&quot;); },
    OnCellMove: function () { console.log(&quot;tolle OnCellMove&quot;); },
    Focus: function () { console.log(&quot;tolle Focus&quot;); },
    OnBeginEdit: function () { console.log(&quot;tolle OnBeginEdit&quot;); },
    OnEndEdit: function () { console.log(&quot;tolle OnEndEdit&quot;); },
    Unbind: function () { console.log(&quot;tolle Unbind&quot;); },
    Dispose: function () { console.log(&quot;tolle Dispose&quot;); }
}

{

SupportedWriteMode: SP.JsGrid.EditActorWriteType.LocalizedOnly,

SupportedReadMode: SP.JsGrid.EditActorReadType.LocalizedOnly,

BindToCell: function () { console.log("tolle BindToCell"); },

OnCellMove: function () { console.log("tolle OnCellMove"); },

Focus: function () { console.log("tolle Focus"); },

OnBeginEdit: function () { console.log("tolle OnBeginEdit"); },

OnEndEdit: function () { console.log("tolle OnEndEdit"); },

Unbind: function () { console.log("tolle Unbind"); },

Dispose: function () { console.log("tolle Dispose"); }

}

This edit control is created and returned in a function that is called: createVerySimpleColumnGridEditControl.

; title: ; notranslate ]
var createVerySimpleColumnGridEditControl = function (gridContext, cellControl) {
    return {
        SupportedWriteMode: SP.JsGrid.EditActorWriteType.LocalizedOnly,
        SupportedReadMode: SP.JsGrid.EditActorReadType.LocalizedOnly,
        BindToCell: function () { console.log(&quot;tolle BindToCell&quot;); },
        OnCellMove: function () { console.log(&quot;tolle OnCellMove&quot;); },
        Focus: function () { console.log(&quot;tolle Focus&quot;); },
        OnBeginEdit: function () { console.log(&quot;tolle OnBeginEdit&quot;); },
        OnEndEdit: function () { console.log(&quot;tolle OnEndEdit&quot;); },
        Unbind: function () { console.log(&quot;tolle Unbind&quot;); },
        Dispose: function () { console.log(&quot;tolle Dispose&quot;); }
    }
};

; title: ; notranslate ]

var createVerySimpleColumnGridEditControl = function (gridContext, cellControl) {

return {

SupportedWriteMode: SP.JsGrid.EditActorWriteType.LocalizedOnly,

SupportedReadMode: SP.JsGrid.EditActorReadType.LocalizedOnly,

BindToCell: function () { console.log("tolle BindToCell"); },

OnCellMove: function () { console.log("tolle OnCellMove"); },

Focus: function () { console.log("tolle Focus"); },

OnBeginEdit: function () { console.log("tolle OnBeginEdit"); },

OnEndEdit: function () { console.log("tolle OnEndEdit"); },

Unbind: function () { console.log("tolle Unbind"); },

Dispose: function () { console.log("tolle Dispose"); }

}

};

Now we have to register our Edit Control when jsgrid is ready. We have to write a callback function and invoke SP.GanttControl.WaitForGanttCreation. Inside the callback function we register our Edit Control for our field: SP.JsGrid.PropertyType.Utils.RegisterEditControl

; title: ; notranslate ]
function handleGridMode(ctx, field) {
    window.SP.SOD.executeOrDelayUntilScriptLoaded(function () {
        window.SP.GanttControl.WaitForGanttCreation(function (ganttChart) {
            var verySimpleColumn = null;
            var editId = &quot;EDIT_TOLLE_VERYSIMPLEFIELD&quot;;
            var columns = ganttChart.get_Columns();

            for (var i = 0; i &lt; columns.length; i++) {
                if (columns[i].columnKey == &quot;VerySimpleColumn&quot;) {
                    verySimpleColumn = columns[i];
                    break;
                }
            }
            if (verySimpleColumn) {
                verySimpleColumn.fnGetEditControlName = function (record, fieldKey) {
                    return editId;
                };

                window.SP.JsGrid.PropertyType.Utils.RegisterEditControl(editId, function (gridContext, cellControl) {
                    return createVerySimpleColumnGridEditControl(gridContext, cellControl);
                }, []);
            }

        });
    }, &quot;spgantt.js&quot;);
}

; title: ; notranslate ]

function handleGridMode(ctx, field) {

window.SP.SOD.executeOrDelayUntilScriptLoaded(function () {

window.SP.GanttControl.WaitForGanttCreation(function (ganttChart) {

var verySimpleColumn = null;

var editId = "EDIT_TOLLE_VERYSIMPLEFIELD";

var columns = ganttChart.get_Columns();

for (var i = 0; i < columns.length; i++) {

if (columns[i].columnKey == "VerySimpleColumn") {

verySimpleColumn = columns[i];

break;

}

if (verySimpleColumn) {

verySimpleColumn.fnGetEditControlName = function (record, fieldKey) {

return editId;

};

window.SP.JsGrid.PropertyType.Utils.RegisterEditControl(editId, function (gridContext, cellControl) {

return createVerySimpleColumnGridEditControl(gridContext, cellControl);

}, []);

}

});

}, "spgantt.js");

}

In our first version of the Edit Control we only log the event names to the web browser console. It works.

Implementing the actual editing

When working on this I did small changes to these events and tried it out in the web browser. I’d recommend it to you, too. Trying out is the best way of learning. Here comes the functions that we need to have to implement:

createVerySimpleColumnGridEditControl (“constructor”). Here we initialize the edit control
bindToCell. Here we get the cellContext that we save as a “private” variable on that Edit Control object. The cell context is needed to get and set the field value.
focus. Here we define what element should be focused. In this case we forward the focus event to the actual input
onBeginEdit. Here we show the Edit Control and make it editable.
onEndEdit. Here we save the field value and hide the edit control.

Some notes on the Edit Control and Events

The Edit Control has a “container” – a html element that contains the representation of the field in edit mode. The Edit Control Container is an overlay – an absolutely-positioned element that exists outside the actual listview. We must set the position and we are responsible for hiding it when the field is not edited:

container.style.cssText = 'visibility:hidden;position:absolute;top:0;left:0;background:#ffffff;';

1	container.style.cssText = 'visibility:hidden;position:absolute;top:0;left:0;background:#ffffff;';

We also need to set the dimensions of the edit control container. It is quite easy using the information from cellContext:

; title: ; notranslate ]
var bindToCell = function(ctx) {
    cellContext = ctx;
    //An input is put as an overlay. 
    //We have to set the width and height so that it takes the whole cell place
    container.style.minWidth = cellContext.cellWidth + 'px';
    container.style.width = cellContext.cellWidth + 'px';
    container.style.height = cellContext.cellHeight + 'px';
    console.log(&quot;tolle BindToCell&quot;);
};

; title: ; notranslate ]

var bindToCell = function(ctx) {

cellContext = ctx;

//An input is put as an overlay.

//We have to set the width and height so that it takes the whole cell place

container.style.minWidth = cellContext.cellWidth + 'px';

container.style.width = cellContext.cellWidth + 'px';

container.style.height = cellContext.cellHeight + 'px';

console.log("tolle BindToCell");

};

In OnBeginEdit we have to show the container, and in OnEndEdit we have to hide it

//OnBeginEdit
cellContext.Show(container);
//OnEndEdit
cellContext.Hide(container);

//OnBeginEdit

cellContext.Show(container);

//OnEndEdit

cellContext.Hide(container);

We have to save the value using the cellContext.

; title: ; notranslate ]
var value = input.value;
cellContext.SetCurrentValue({
    localized: value
});

; title: ; notranslate ]

var value = input.value;

cellContext.SetCurrentValue({

localized: value

});

Final code

(function () { var editWrapper = '<span>This field is fully controlled by jslink</span><br><input type="text" id="{0}" value"{1}"/>'; var createVerySimpleColumnGridEditControl = function (gridContext, gridTextInputElement) { var cellContext, inEdit, html, container, input, id; id = "tolle-" + new Date().getTime(); html = String.format(editWrapper, id, ""); container = document.createElement("div"); container.innerHTML = html; input = container.getElementsByTagName("input")[0]; container.style.cssText = 'visibility:hidden;position:absolute;top:0;left:0;background:#ffffff;'; gridContext.parentNode.appendChild(container); var bindToCell = function(ctx) { cellContext = ctx; //An input is put as an overlay. We have to set the width and height so that it takes the whole cell place container.style.minWidth = cellContext.cellWidth + 'px'; container.style.width = cellContext.cellWidth + 'px'; container.style.height = cellContext.cellHeight + 'px'; console.log("tolle BindToCell"); }; var onCellMove = function () { console.log("tolle OnCellMove"); }; var focus = function(eventInfo) { input.focus(); console.log("tolle Focus", eventInfo); }; var onBeginEdit = function (eventInfo) { inEdit = true; var currentValue = cellContext.originalValue.localized; if (currentValue) { input.value = currentValue; } cellContext.Show(container); console.log("tolle OnBeginEdit"); this.Focus(eventInfo); }; var onEndEdit = function() { cellContext.Hide(container); inEdit = false; var value = input.value; cellContext.SetCurrentValue({ localized: value }); console.log("tolle OnEndEdit"); }; var unbind = function() { console.log("tolle Unbind"); }; var dispose = function () { console.log("tolle Dispose"); } return { SupportedWriteMode: window.SP.JsGrid.EditActorWriteType.LocalizedOnly, SupportedReadMode: window.SP.JsGrid.EditActorReadType.LocalizedOnly, BindToCell: bindToCell, OnCellMove: onCellMove, Focus: focus, OnBeginEdit: onBeginEdit, OnEndEdit: onEndEdit, Unbind: unbind, Dispose: dispose } }; function handleGridMode(ctx, field) { window.SP.SOD.executeOrDelayUntilScriptLoaded(function () { window.SP.GanttControl.WaitForGanttCreation(function (ganttChart) { var verySimpleColumn = null; var editId = "EDIT_TOLLE_VERYSIMPLEFIELD"; var columns = ganttChart.get_Columns(); for (var i = 0; i < columns.length; i++) { if (columns[i].columnKey == "VerySimpleColumn") { verySimpleColumn = columns[i]; break; } } if (verySimpleColumn) { verySimpleColumn.fnGetEditControlName = function (record, fieldKey) { return editId; }; window.SP.JsGrid.PropertyType.Utils.RegisterEditControl(editId, function (gridContext, cellControl) { return createVerySimpleColumnGridEditControl(gridContext, cellControl); }, []); } }); }, "spgantt.js"); } function verySimpleView(ctx, field) { var wrapper = 'This field is fully controlled by jslink<hr><span>{0}</span>'; var value = ctx.CurrentItem[ctx.CurrentFieldSchema.Name] || ""; if (ctx.inGridMode) { handleGridMode(ctx, field); } return String.format(wrapper, value); } function verySimpleNewAndEdit(ctx) { var id = 'tolle-' + new Date().getTime(); var formCtx = window.SPClientTemplates.Utility.GetFormContextForCurrentField(ctx); formCtx.registerGetValueCallback(formCtx.fieldName, function () { var input = document.getElementById(id); return input.value; }); var value = ctx.CurrentItem[ctx.CurrentFieldSchema.Name] || ""; var html = String.format(editWrapper, id, value); return html; } var overrideContext = {}; overrideContext.Templates = overrideContext.Templates || {}; overrideContext.Templates.Fields = { 'VerySimpleColumn': { 'View': verySimpleView, 'DisplayForm': verySimpleView, 'EditForm': verySimpleNewAndEdit, 'NewForm': verySimpleNewAndEdit } }; window.SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext); })();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123

(function () {
    var editWrapper = '<span>This field is fully controlled by jslink</span><br><input type="text" id="{0}" value"{1}"/>';
    var createVerySimpleColumnGridEditControl = function (gridContext, gridTextInputElement) {
        var cellContext, inEdit, html, container, input, id;
        id = "tolle-" + new Date().getTime();
        html = String.format(editWrapper, id, "");
        container = document.createElement("div");
        container.innerHTML = html;
        input = container.getElementsByTagName("input")[0];
        container.style.cssText = 'visibility:hidden;position:absolute;top:0;left:0;background:#ffffff;';
        gridContext.parentNode.appendChild(container);
        var bindToCell = function(ctx) {
            cellContext = ctx;
            //An input is put as an overlay. We have to set the width and height so that it takes the whole cell place
            container.style.minWidth = cellContext.cellWidth + 'px';
            container.style.width = cellContext.cellWidth + 'px';
            container.style.height = cellContext.cellHeight + 'px';
            console.log("tolle BindToCell");
        };
        var onCellMove = function () { console.log("tolle OnCellMove"); };
        var focus = function(eventInfo) {
            input.focus();
            console.log("tolle Focus", eventInfo);
        };
        var onBeginEdit = function (eventInfo) {
            inEdit = true;
            var currentValue = cellContext.originalValue.localized;
            if (currentValue) {
                input.value = currentValue;
            }
            cellContext.Show(container);
            console.log("tolle OnBeginEdit");
            this.Focus(eventInfo);
        };
        var onEndEdit = function() {
            cellContext.Hide(container);
            inEdit = false;
            var value = input.value;
            cellContext.SetCurrentValue({
                localized: value
            });
            console.log("tolle OnEndEdit");
        };

        var unbind = function() { console.log("tolle Unbind"); };
        var dispose = function () { console.log("tolle Dispose"); }

        return {
            SupportedWriteMode: window.SP.JsGrid.EditActorWriteType.LocalizedOnly,
            SupportedReadMode: window.SP.JsGrid.EditActorReadType.LocalizedOnly,
            BindToCell: bindToCell,
            OnCellMove: onCellMove,
            Focus: focus,
            OnBeginEdit: onBeginEdit,
            OnEndEdit: onEndEdit,
            Unbind: unbind,
            Dispose: dispose
        }
    };

    function handleGridMode(ctx, field) {
        window.SP.SOD.executeOrDelayUntilScriptLoaded(function () {
            window.SP.GanttControl.WaitForGanttCreation(function (ganttChart) {
                var verySimpleColumn = null;
                var editId = "EDIT_TOLLE_VERYSIMPLEFIELD";
                var columns = ganttChart.get_Columns();

                for (var i = 0; i < columns.length; i++) {
                    if (columns[i].columnKey == "VerySimpleColumn") {
                        verySimpleColumn = columns[i];
                        break;
                    }
                }
                if (verySimpleColumn) {
                    verySimpleColumn.fnGetEditControlName = function (record, fieldKey) {
                        return editId;
                    };

                    window.SP.JsGrid.PropertyType.Utils.RegisterEditControl(editId, function (gridContext, cellControl) {
                        return createVerySimpleColumnGridEditControl(gridContext, cellControl);
                    }, []);
                }

            });
        }, "spgantt.js");
    }

    function verySimpleView(ctx, field) {
        var wrapper = 'This field is fully controlled by jslink<hr><span>{0}</span>';
        var value = ctx.CurrentItem[ctx.CurrentFieldSchema.Name] || "";
        if (ctx.inGridMode) {
            handleGridMode(ctx, field);
        }
        return String.format(wrapper, value);
    }

    function verySimpleNewAndEdit(ctx) {
        var id = 'tolle-' + new Date().getTime();
        var formCtx = window.SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);

        formCtx.registerGetValueCallback(formCtx.fieldName, function () {
            var input = document.getElementById(id);
            return input.value;
        });
        var value = ctx.CurrentItem[ctx.CurrentFieldSchema.Name] || "";
        var html = String.format(editWrapper, id, value);
        return html;
    }
    var overrideContext = {};

    overrideContext.Templates = overrideContext.Templates || {};
    overrideContext.Templates.Fields = {
        'VerySimpleColumn': {
            'View': verySimpleView,
            'DisplayForm': verySimpleView,
            'EditForm': verySimpleNewAndEdit,
            'NewForm': verySimpleNewAndEdit
        }
    };

    window.SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
})();

Summary

Well, jsgrid is quite complicated. I have tried to keep it as simple and minimalistic as possible. When we can these basics, we can move on and master advanced examples where we can deliver high value to business that loves Quick Edit :)

Sources

Source code of /_layouts/15/jsgrid.debug.js
Anton Avishnyakov‘s blog, spdevlab.com
- Custom Field Type for SharePoint 2013 – Custom “Quick Edit” mode rendering, Visa field example.
- Source code for custom fields for SharePoint 2013, including the support for Quick Edit (codeplex)
Andrey Markeev‘s blog posts
- Master-detail with JSGrid. An extremely advanced but pedagogically explained article with source code (Code Project)
- A whole series about JSGrid (in Russian, awesome content)

Interesting, Anton, Andrey and me are born in Sovyet and are interested in JSGrid. Coincidence? :)

Vi på Bool tror att om man delar med sig av sin kunskap, så blir världen ett lite trevligare ställe. Här delar vi med oss av det vi kan och tror på.