none
JS Link Property to work for overriding in SharePoint 2013

    Question

  • Hi All,

    I have tried to use JS Link Property of Webpart to override the value of field item by:

    RegisterModuleInit("/sites/demo/_catalogs/masterpage/DevelopmentSite/Test.js", RegisterViewLocation); // CSR-override for MDS enabled site
    RegisterViewLocation(); //CSR-override for MDS disabled site (because we need to call the entry point function in this case whereas it is not needed for anonymous functions)
    function RegisterViewLocation() {
    
    
    	var overrideCtx = {};
    	overrideCtx.Templates = {};
    	
    	alert("Override call worked");
    
    	overrideCtx.Templates.Fields = {
    	'Location': { 'View' : 'XYZ' }
      };	SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
    }

    MDS is enabled. Deactivated "SharePoint Server Publishing" of subsite. JS file is uploaded on "http://<servername>/sites/demo/_catalogs/masterpage/DevelopmentSite/Test.js" and link added in JS Link property is "/sites/demo/_catalogs/masterpage/DevelopmentSite/Test.js". I did not get any effect on Page Load of that webpart.

    I am unable to see any effect of JS Link property of webpart. Please help.

    Thanks in advance.


    Wednesday, September 18, 2013 7:00 AM

Answers

  • Hi,

    Oh, sorry, I see it above. 

    Since the javascript is at the top level and you are trying to reference it from a subsite, you need to put in this:

    ~sitecollection/_catalogs/masterpage/DevelopmentSite/Test.js

    You do not need the path to the site collection because that is included in the ~sitecollection term.

    -mfharvey


    • Edited by mfharvey Wednesday, September 18, 2013 3:16 PM Removed extra quote
    • Marked as answer by Rashi_C Wednesday, September 18, 2013 3:27 PM
    Wednesday, September 18, 2013 3:13 PM

All replies

  • Hi

    The following is working for us

    (function () {
        /*
         * Initialize the variable that store the overrides objects.
         */
     var overrideCtx = {};
     overrideCtx.Templates = {};
     
    // Assign functions or plain html strings to the templateset objects:
    // header, footer and item.
     overrideCtx.Templates.Header = "<B><#=ctx.ListTitle#></B><hr><ul>";
     overrideCtx.Templates.Footer = "</ul>";

    //  This template is assigned to the CustomItem function.
     overrideCtx.Templates.Item = CustomItem;
     overrideCtx.BaseViewID = 1;
     overrideCtx.ListTemplateType = 100;
     
    //     Register the template overrides.

     SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

    })();

    /*
     * This function builds the output for the item template.
     * Uses the Context object to access announcement data.
     */
    function CustomItem(ctx) {
        // Build a listitem entry for every announcement in the list.
     var ret = "<li>This is a " + ctx.CurrentItem.MoreText + "</li>";
     return ret;
    }

    Thanks


    Girish

    Wednesday, September 18, 2013 8:43 AM
  • Below code also not worked for me.

    (function () {
    	var overrideCtx = {};
    	overrideCtx.Templates = {};	
    	alert("Override call worked");
    	overrideCtx.Templates.Fields = {
    	'Location': { 'View' : 'XYZ' }
      };	SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
    })();


    • Edited by Rashi_C Wednesday, September 18, 2013 10:22 AM Code Change
    Wednesday, September 18, 2013 10:21 AM
  • Please help, I have spend more than two days for it but still unable to find the solution. I am unable to find exactly where is the problem.
    Wednesday, September 18, 2013 12:30 PM
  • Hi,

    You need to use a site relative URL for the JS Link:

    "~site/_catalogs/masterpage/DevelopmentSite/Test.js"

    or

    "~sitecollection/_catalogs/masterpage/DevelopmentSite/Test.js"

    Then use a browser debugger to make sure your javascript is being loaded into the page.

    Cheers,

    -mfharvey

    Wednesday, September 18, 2013 12:52 PM
  • Hi again,

    One more thing to check.  If your javascript is being included in the page, make sure there are no syntax errors in it.  The javascript will not be run if it has syntax errors.

    cheers,

    -mfharvey

    Wednesday, September 18, 2013 12:59 PM
  • Hi,

    I am using webpart in subsite of other site collection.
    My Site Collection : http://<servername>/sites/demo
    My Subsite : http://<servername>/sites/demo/dev

    So i have tried JS link with "~sites/demo/_catalogs/masterpage/DevelopmentSite/Test.js" but didn't work.
    Wednesday, September 18, 2013 1:04 PM
  • I have used the javascript code which is posted above. And I am unable to find out that whether my Javascript file is added to my webpart page or not? How can I know that?

    I have checked in Chrome Browser. I am uable to find my javascript file in Resources Tab.

    Wednesday, September 18, 2013 1:09 PM
  • Hi,

    Two places you can check. If you go to the HTML tab, you can right click and copy the HTML into a text editor and search for your javascript, Test.js, to see if it is there.  Otherwise, you can go to the Source tab,  type Ctrl+O and see if it is listed in the javascript sources to be opened.

    Finally, check the Console tab for any syntax errors in the page - especially in your file.

    regards,

    -mfharvey

    Wednesday, September 18, 2013 1:57 PM
  • Hi, i checked in HTML tab and also in Source tab, unable to find Test.js. Also no error in Console tab. Now what should I do?? I don't know why its not showing my Test.js file anywhere.
    Wednesday, September 18, 2013 3:01 PM
  • Hi,

    What is the JS Link property that you have now in your webpart?

    -mfharvey

    Wednesday, September 18, 2013 3:12 PM
  • Hi,

    Oh, sorry, I see it above. 

    Since the javascript is at the top level and you are trying to reference it from a subsite, you need to put in this:

    ~sitecollection/_catalogs/masterpage/DevelopmentSite/Test.js

    You do not need the path to the site collection because that is included in the ~sitecollection term.

    -mfharvey


    • Edited by mfharvey Wednesday, September 18, 2013 3:16 PM Removed extra quote
    • Marked as answer by Rashi_C Wednesday, September 18, 2013 3:27 PM
    Wednesday, September 18, 2013 3:13 PM
  • thanks.. it worked fine now.
    Wednesday, September 18, 2013 3:26 PM