1

I want to display a contacts list in SharePoint 2013 as accordion. I tried to use the code from https://code.msdn.microsoft.com/office/Client-side-rendering-code-ccdb2a0e/view/Discussions/0?showDiscussionForm=True and modified it a little bit.

But now my problem is to show the picture. For this i have the URL stored in the app. Has anybody a solution to show the picture and next to the picture the contact details. Here's the code I used:

(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["Project_x0020_Role"];
    //var Picture = ctx.CurrentItem["Picture"];
    var FullName = ctx.CurrentItem["FullName"];
    var WorkPhone = ctx.CurrentItem["WorkPhone"];
    var Email = ctx.CurrentItem["Email"];

    // Return whole item html
    return "<h2>" + title + "</h2><p>" +  "Name: " + FullName + "<br /> " + "Phone: " + WorkPhone + "<br /> " + "Email: " + Email+ "</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 in advance.

========================

This is how the table should look like:

Table

2
  • What value you have in ctx.CurrentItem["Picture"]? Apr 13, 2015 at 13:52
  • Here's the Url to the mysite mThumb Picture stored. https://mysite.???.com/User Photos/Profile Pictures/mmayr_mThumb.jpg Apr 13, 2015 at 13:53

1 Answer 1

0

Try changing function accordionTemplate(ctx) as follows

return "<table border='0' cellspacing='0' cellpadding='0'><tr><td><img src='" + Picture + "' /></td><td><h2>" + title + "</h2><p>" +  "Name: " + FullName + "<br /> " + "Phone: " + WorkPhone + "<br /> " + "Email: " + Email+ "</p></td></tr></table>";

Update

return "<h2>" + title + "</h2><p><table border='0' cellspacing='0' cellpadding='0'><tr><td><img src='" + Picture + "' /></td><td>" +  "Name: " + FullName + "<br /> " + "Phone: " + WorkPhone + "<br /> " + "Email: " + Email+ "</p></td></tr></table></p>";
3
  • looks good. the only thing is that i want to group the view by title and the picture should also be shown when the title was clicked (like name, phone etc.) Apr 13, 2015 at 14:10
  • Try updated answer. Apr 13, 2015 at 14:13
  • Sorry it's not working correctly. I posted a Picture how it should be working. Now the picture and the data are not "connected" so when I click on the header it opens nothing and the Picture with the data is shown always but this data should be "hidden" behind the title. Apr 14, 2015 at 6:19

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.