3


I need to render some fields client-side,
I followed this guide: Client-side rendering but this code is not working:

(function () { 

    // Create object that have the context information about the field that we want to change it's output render  
    var priorityFiledContext = {}; 
    priorityFiledContext.Templates = {}; 
    priorityFiledContext.Templates.Fields = { 
        // Apply the new rendering for Priority field on List View 
        "Title": { "View": priorityFiledTemplate } 
    }; 

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(priorityFiledContext); 

})(); 

// This function provides the rendering logic for list view 
function priorityFiledTemplate(ctx) { 
   alert("in");
   return "New Title";
} 

I binded the script in the JSLink section of the webpart. (the script is in the Layout filder)

2 Answers 2

3

I think this should work

RegisterModuleInit('/<yourSiteName>/SiteAssets/<yourJSfilename>.js', updateTitle);
updateTitle();

function updateTitle() {
    var priorityFiledContext  = {};
    priorityFiledContext.Templates = {};    
    priorityFiledContext.Templates.Fields = {
        "Title": {
            "View": priorityFiledTemplate
        }
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(priorityFiledContext);
}

function priorityFiledTemplate(ctx) {
    return "New Title";
}

Also i suggest uploading the .js file in your Site Assets Library and linking it to the Webpart (edit > misc > JSLink) with:

~site/SiteAssets/<yourJSfilename>.js

remember to Change and Also I suggest to use JSBin to check your future code for Syntax Errors and also use the browser console (press F12) to debug. Make sure you select script in the console and refresh after you upload your script, to see where any Problems were encountered (if any).

10
  • No luck, the function priorityFiledTemplate is not called
    – Nk SP
    Nov 24, 2014 at 12:18
  • Hmm, that's strange. Could you provide any more Information? What does the console say exactly when you refresh the page? Nov 24, 2014 at 12:20
  • No exception, the main function (updateTitle in your example) is executed but the other function is not. In the page I have other list views does it matter?
    – Nk SP
    Nov 24, 2014 at 12:22
  • Edited the script above (found a minor Syntax error) should work now, hopefully. Try to copy it again. Nov 24, 2014 at 12:28
  • Not working yet. Do I need to import some SP libraries?
    – Nk SP
    Nov 24, 2014 at 12:33
0
(function () {
    // Intialize the variables for overrides objects
    (window.jQuery || document.write('<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.0.min.js"><\/script>'));
    var overrideCtx = {};
    overrideCtx.Templates = {};
    overrideCtx.Templates.Fields = {
        'Color': 
        {
        'NewForm': ingredientsNewAndEdit
        }
    };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})(); 


function ingredientsNewAndEdit(Ctx) {       
    alert("Test");      
    var formCtx =SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);      
    var FieldHtml = "<div><input type='Text' Id='txtColor' FieldInternalName='Color'FieldType='SPFieldText'/></div>";       
    return FieldHtml;
}

this Code is perfectly render the control .

Just check it out your path of the js link . your webpart is at sitecollection level or web level ? if sitecollection level than

Path : ~Sitecollection/(Your Jslink file path) (Sitecollection)

Path : ~Site/(your jslink file path)(Web level)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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