none
SharePoint 2013 JavaScript CSOM Undefined Error RRS feed

  • Question

  • Hi,

    When using the below code I receive "Undefined" for my list item "Description" value? The "Title" value returns but not the "Description" value?

    (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 title = ctx.CurrentItem["Title"]; var description = ctx.CurrentItem["Description"]; // Return whole item html return "<h2>" + title + "</h2><p>" + description + "</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');

    }

    Thanks.


    Wednesday, April 19, 2017 12:46 PM

All replies

  • Hi,

    Does your list has Description column?

    I tested your code and it works.

    My custom list:

    JS link custom view:

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Thursday, April 20, 2017 5:27 AM
  • Ah, so the code only works on the original list, not if you add the list as an app part on a custom page. But why does the "Title" work and the "Description" show as "undefined"?

    Thanks.

    Thursday, April 20, 2017 9:23 AM
  • Hi,

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides used to custom list view usually.

    Here are some samples/links which would help you understand the scenario for your reference.

    https://code.msdn.microsoft.com/office/Client-side-rendering-JS-2ed3538a

    https://www.codeproject.com/Articles/620110/SharePoint-Client-Side-Rendering-List-Views

    You could add the JSLink to the list view which supports JSLink either in original list forms pages or custom page(which you add the list view to it).

    I’m not sure how you use it currently, so, if my reply doesn’t help. Could you provide more details for your case?

     

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Thursday, April 20, 2017 10:26 AM
  • My bad, I hadn't included the "Description" column within the default view. All working now.

    Thanks.

    Friday, April 21, 2017 10:27 AM
  • Hi,

    You could mark the helpful post as answer, so it may help other community members find the helpful information quickly.

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Friday, April 21, 2017 12:08 PM
  • Hi,

    One correction in the above code, instead of document.write to add reference of JQuery, you need to add element in the head section, because document.write clear all the page out:

        var JQuery_URL = '//ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.0.min.js';
            // check if jQuery is available, otherwise reload it
        if (!window.jQuery) {
            var jq = document.createElement('script'); jq.type = 'text/javascript';
            jq.src = JQuery_URL;
            document.getElementsByTagName('head')[0].appendChild(jq);
        }
    

    As per below, thread, it seems that "Description" field is displaying.


    Thanks, Amit Kumar, LinkedIn Profile ** My Blog
    Please click "Mark As Answer" if this post solves your problem or "Vote As Helpful" if it was useful

    Friday, April 21, 2017 12:28 PM