Adding JSLink through JavaScript

Question

I have a .js file which I want to add as a JSLink to the web part properties in a List View. For further clarification, I'm talking about the property, they're manually adding a JSLink to in this article.

Is it possible to to do this with JavaScript? If so, how do I go about doing this? The reason I want to do this with JavaScript, is because I have a .js file with a function that performs certain actions on the view, depending on what kind of list it is.

Any hints greatly appreciated.

Answer 1

Here's a example to add jsLink to a particular field. If you want to change the property in the ListViewWebpart the second snippet shows how to alter a different property but you should be able to modify it to your needings.

Add jsLink to a field

var listName = 'YourListName';
var fieldName = 'YourColumnName';
var jsLinkPath = '~site/_catalogs/masterpage/callItWhateverYouWant.jslink.js';

var clientContext = new SP.ClientContext.get_current();
var web = clientContext.get_web();
var list = web.get_lists().getByTitle(listName);
var listFields = list.get_fields();

var field = listFields.getByTitle(fieldName);
field.set_jsLink(jsLinkPath);
field.update();

clientContext.load(field);
clientContext.executeQueryAsync(
       function () {
           console.log('jslink set to : ' + field.get_jsLink());
       }, function (err, args) {
           console.log('Error.');
           console.log(args);
       });

Change WebPart Property

With this code you can modify the PartStorage property of a WebPart. It should work for other properties as well.

var saveConfigurationForWebPartId = function (webPartId, settings, cb, errorCb) {
    var ctx = new SP.ClientContext.get_current();
    var page = ctx.get_web().getFileByServerRelativeUrl(_spPageContextInfo.serverRequestPath);

    var limitedWebPartManager = page.getLimitedWebPartManager(SP.WebParts.PersonalizationScope.shared);
    var webParts = limitedWebPartManager.get_webParts();

    ctx.load(webParts, 'Include(WebPart.Properties, Id)');
    ctx.executeQueryAsync(Function.createDelegate(this, function () {
        for (var i = 0; i < webParts.get_count() ; i++) {
            var temp = webParts.get_item(i);
            var webPartProperties = temp.get_webPart().get_properties();

            if (temp.get_id().toString() === webPartId) {
                webPartProperties.set_item('PartStorage', JSON.stringify(settings));
                temp.saveWebPartChanges();
            }
        }

        ctx.executeQueryAsync(function () {
            caching.set(webPartId, settings, options.TTL, '1');
            cb();
        }, errorCb);
    }), errorCb);
};

Answer 2

JS link is nothing but a way to refer your javascript for a particular view or for the particular list. If you want to manually add scripts on the view page. You have to do some modification on the existing js scripts and add them directly in a content editor web part in that particular View page. hope this is what you are looking for.