In this blog, I have explained how to change the SharePoint List View to Horizontal display of items using JSLink.

Navigate to SharePoint site.

Create a custom list and add some information into it.

My sample list looks like below.

Open SharePoint Designer.

Navigate to SiteAssets.

Create a JavaScript file.

Upload the required jQuery files and CSS files into Site Assets folder.

CSS Files

  • ticker.css

jQuery Files

  • Jquery-min.js
  • ticker.js

Now, I am going to include the scripts and stylesheets into my “NewsTicker.js”.

Code

  1. //Declare the style inside a javascript file
  2. //Declare my custom css for design HTML
  3. var cssId = 'myCss';
  4. if (!document.getElementById(cssId)) {
  5. var head = document.getElementsByTagName('head')[0];
  6. var link = document.createElement('link');
  7. link.id = cssId;
  8. link.rel = 'stylesheet';
  9. link.type = 'text/css';
  10. link.href = ' https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/NewsTicker/css/ticker.css’;
  11. link.media = 'all';
  12. head.appendChild(link);
  13. }

Create a function to override the list template

Inside the function, call all the jQuery references.

  1. (function() {
  2. (window.jQuery || document.write('<script src=" https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/NewsTicker/js/jquery.min.js"><\/script>'));
  3. (window.jQuery || document.write('<script src=" https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/NewsTicker/js/ticker.js"><\/script>'));
  4. }();

Create a variable Overridectx

  1. var overrideCtx = {};
  2. //Get the template of the list using variable
  3. overrideCtx.Templates = {}
  4. //Get the list Header
  5. overrideCtx.Templates.Header = ” < div class = ’ticker - container’ > < div class = ’ticker - caption’ > < p > Breaking News < /p> < /div>";
  6. //Get the item template from the function NewsTemplate (ctx)
  7. overrideCtx.Templates.Item = NewsTemplate;
  8. //Get the list footer
  9. overrideCtx.Templates.Footer = “ < /div>”;

As of now, you get -

  1. (function() {
  2. (window.jQuery || document.write('<script src="https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/NewsTicker/js/jquery.min.js"><\/script>'));
  3. (window.jQuery || document.write('<script src="https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/NewsTicker/js/ticker.js"><\/script>'));
  4. var overrideCtx = {};
  5. overrideCtx.Templates = {}
  6. overrideCtx.Templates.Header = "<div class='ticker-container'><div class='ticker-caption'><p>Breaking News</p></div><ul>";
  7. overrideCtx.Templates.Item = newsTemplate;
  8. overrideCtx.Templates.Footer = "</ul></div>";
  9. // This line of code tell TemplateManager that we want to change all HTML for item row render
  10. SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
  11. })();

Now, implement the function News template

  1. // This function provides the rendering logic
  2. function newsTemplate(ctx) {
  3. // Return whole item html
  4. return "<div><li><span>" + ctx.CurrentItem.Title + " <span></span><a href='#'>" + ctx.CurrentItem.Descriprion + "</a></span></li></div>";
  5. }

Full Code

  1. //Declare my custom css for design HTML
  2. var cssId = 'myCss';
  3. if (!document.getElementById(cssId)) {
  4. var head = document.getElementsByTagName('head')[0];
  5. var link = document.createElement('link');
  6. link.id = cssId;
  7. link.rel = 'stylesheet';
  8. link.type = 'text/css';
  9. link.href = 'https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/NewsTicker/css/ticker.css';
  10. link.media = 'all';
  11. head.appendChild(link);
  12. }
  13. (function() {
  14. (window.jQuery || document.write('<script src="https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/NewsTicker/js/jquery.min.js"><\/script>'));
  15. (window.jQuery || document.write('<script src="https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/NewsTicker/js/ticker.js"><\/script>'));
  16. var overrideCtx = {};
  17. overrideCtx.Templates = {}
  18. overrideCtx.Templates.Header = "<div class='ticker-container'><div class='ticker-caption'><p>Breaking News</p></div><ul>";
  19. overrideCtx.Templates.Item = newsTemplate;
  20. overrideCtx.Templates.Footer = "</ul></div>";
  21. // This line of code tell TemplateManager that we want to change all HTML for item row render
  22. SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
  23. })();
  24. // This function provides the rendering logic
  25. function newsTemplate(ctx) {
  26. // Return whole item html
  27. return "<div><li><span>" + ctx.CurrentItem.Title + " <span></span><a href='#'>" + ctx.CurrentItem.Descriprion + "</a></span></li></div>";
  28. }

Let’s include the JS file into List View webpart.

Go to the page -> Edit page-> Click Edit webpart.

Under miscellaneous -> link the JS file.

Click OK.

Conclusion

You are now able to render any kind of HTML design using JSLink Client side rendering into SharePoint list and libraries.