Collaboration-2-Go


Lösungen und Software-Entwicklung im Collaboration Umfeld, insbesondere Microsoft SharePoint, Microsoft Exchange und Microsoft Office.

Support


Mobil: +49 (152) 53 97 78 79
Mail: service@collaboration-2-go.de
Weitere Kontaktmöglichkeiten: Kontaktseite
Dekoration: Köln

Categories: Collaboration-2-Go; Exchange; Exchange Development; InfoPlayer; JavaScript; Nintex; Outlook Development; PowerShell; SharePoint 2007; SharePoint 2010; SharePoint 2013; SharePoint 2016; SharePoint 2019; SharePoint Development; SharePoint Online/Office365; SQL Server; Visual Studio; Website; Windows; Windows Phone


SharePoint Lists and Coloured Rows
Created: 26.08.2014
Categories: SharePoint 2013; SharePoint Development

If you want to use coloured rows in SharePoint lists,

  • copy code to a file called 'HighlightRows.js'

  • Remove spaces in RenderColour between '< and a' and '< and img'
    • (stupid blog software)

  • upload file to a site collection and remember the path

  • add calculated column called 'Colour' to your list

  • Provide colour in this field, e.g. =IF(Priority="High";"rgba(255, 0,0,0.5)";IF(Priority ="medium";"rgba(255, 255,0,0.5)";"#ffffff"))

  • Include colour field in all views

  • Bind all views to JS in the ListView webpart settings, e.g. to ~sitecollection/style%20library/HighlightRows.js



Coloured SharePoint list

HighlightRows.js:

(function () {
  var overrideCtx = {};
  overrideCtx.Templates = {};
  overrideCtx.OnPostRender = [ HighlightRowOverride ];
  overrideCtx.Templates.Fields={ "Colour":{"View":RenderColour}}
  SPClientTemplates.TemplateManager.RegisterTemplateOverrides
   (overrideCtx);
})();

function RenderColour(ctx) {
  var link = ctx.displayFormUrl +
    "&ID=" + ctx.CurrentItem.ID +
    "&source=" +
    encodeURIComponent(window.location.href);
  var text = "< a class='ms-core-suiteLink-a' href='" +
    link +
    "'>< img src='/_layouts/15/images/icgen.gif'>";
  return text;
}

function HighlightRowOverride(inCtx) {
  for (var i = 0; i < inCtx.ListData.Row.length; ++i) {
    var listItem = inCtx.ListData.Row[i];
    var iid = GenerateIIDForListItem(inCtx, listItem);
    var row = document.getElementById(iid);
    if (row != null) {
      row.style.backgroundColor = listItem.Colour;
    }
  }
  inCtx.skipNextAnimation = true;
}

    
Send us a Comment!