I have a contacts list in SharePoint. In that list there are a few columns like Firstname, Surname, email etc. There is also an image URL.

I would like to bring all of the information in a Contact item together into a profile block and display each contact in a flexible 10 x 10 grid where the image is centered and the firstname, surname, email are underneath the image then the next profile appears to the right of that profile and so on until 10 across. Then it goes to the next line and shows another 10 across.

Looking at SPServices is a possibility to pull the data out but how would I create the profile contact item and the grid?

I have also looked into backbone.js and angular.js to see if it might be possible to easily create this grid.


Before trying to go for the most "exotic" i would suggest you use already the awesome capabilities you already have in SharePoint - that is rely on either ListView or Content-Query web parts (as in http://blogs.msdn.com/b/sharepointdev/archive/2011/06/30/using-jquery-templates-with-sharepoint-list-data.aspx or https://www.nothingbutsharepoint.com/sites/eusp/pages/jquery-slideshow-carousel-in-sharepoint-2010.aspx) which already generate grids, etc. - yes, indeed the actual work just starts, as you need to either manipulate XSLT or (under 2013) rely on Client-Side rendering techniques (e.g. use JSLink) to override the way fields are rendering in a View.

This being said, there is always the alternative of using Client-Side OM with ListData.svc (other than SPServices - http://www.codeproject.com/Articles/544663/Image-Carousel-Slider-in-SharePoint-2010) to retrieve data and combine with jQUery library for the look&feel expected, which can be loaded via CEWP (as in http://junestime.wordpress.com/2012/05/23/adding-a-javascript-image-carousel-to-sharepoint-2010-using-content-editor-web-part/).

All these examples enable transforming results generated from out-of-the-box web parts - which alleviate the need to handle server-side data retrieval.

  • thanks for replying. I would describe that first link as a list. But I will try adapt it to my needs. The grid is key to how I want to display the information because the second part of what I want to do is to add filter-as-you-type functionality so that when the user types into a filter field the grid items disappear if they do not match the filter term input by the user. – motionpotion Jan 11 '14 at 19:30
  • I would also like to wrap this up as a feature so that it can be turned on on other sites within SharePoint. – motionpotion Jan 11 '14 at 19:35

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.