4

I have a page with 2 web parts. the 2 web parts are the same list just imported in different views. i have added a JS link file to 1 of the web parts using the edit web part properties miscellaneous field.

The problem is the js link file affects both web parts. where i only want it to affect 1 webpart. I know i can tick the server render option in the web part properties of the web part i don't want to be affected by the js link file, but i would like to be able to include this in my code instead. i have tried using the web part id in an if statement but i'm not sure where to put it. the web part id that i want to run the js link file is " DCE7572D-9439-479D-8DBA-F5AFCC3C67B9 ". can i do something like:

if (ctx.view == '{DCE7572D-9439-479D-8DBA-F5AFCC3C67B9}') {

            //---Run JS Link file on this web part---
}

For my jslink code i am running a template for an accordion list view. see code below.

function () { 

// jQuery library is required in this sample 
// Fallback to loading jQuery from a CDN path if the local is unavailable 
(window.jQuery || document.write('<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.0.min.js"><\/script>'));   

// Create object that have the context information about the field that we want to change it's output render  
var accordionContext = {}; 
accordionContext.Templates = {}; 

// Be careful when add the header for the template, because it's will break the default list view render 
accordionContext.Templates.Header = "<div class='accordion'>"; 
accordionContext.Templates.Footer = "</div>"; 

// Add OnPostRender event handler to add accordion click events and style 
accordionContext.OnPostRender = accordionOnPostRender; 

// This line of code tell TemplateManager that we want to change all HTML for item row render 
accordionContext.Templates.Item = accordionTemplate; 

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


// This function provides the rendering logic
function accordionTemplate(ctx) 
{
var description = ctx.CurrentItem["Phone_Number"];
var viewID = ctx.view;

// Return whole item html 
return "<h2>" + "phone number" + "</h2><p>" + description + viewID + "</p><br/>";   } 

function accordionOnPostRender() { 

// Register event to collapse and uncollapse when click on accordion header 
$('.accordion h2').click(function () { 
    $(this).next().slideToggle(); 
}).next().hide(); 

$('.accordion h2').css('cursor', 'pointer');    
}
2

This is where CSR flaws
and most likely a reason why it is no longer available in modern SharePoint developments.

CSR is bound to internal fieldnames, not scoped,
so if anyone adds that field to a page it gets processed by CSR.
(this also has a benefit... you do not have to use JSLink, can define CSR transformations in one global UserCustomAction ScriptLink)

You have to do the hardcoded ViewID check inside every function and code the default return (for other Views you want that OOTB rendering) as well

  • Hi Danny, ok thanks for the reply i may just be quicker to turn on server render option for the other web parts. also by modern sharepoint developments do you mean sharepoint 2016 ? – derek Feb 11 '17 at 16:18
  • Modern: Modern Experiences / SharePoint Framework in SPOnline which Microsoft will also release to 2016 sometime – Danny '365CSI' Engelman Feb 12 '17 at 9:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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