Referred the below links:
1. Change Footer
-------------
SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
Templates: {
Footer: function (ctx) {
return String.format("Hello world from
{0}!", ctx.ListTitle);
}
}
});
//
******* Color coding based on status column- Colour complete row
**********
SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
OnPostRender: function (ctx) {
var rows = ctx.ListData.Row;
for (var i = 0; i
< rows.length; i++) {
var selectedVal = rows[i].Choice;
var color = (selectedVal == "Good") ? "#228B22" : (selectedVal == "Ok") ? "#FFE4B5" : "#DC143C";
var myIid = GenerateIIDForListItem(ctx, rows[i]);
var tr = document.getElementById(myIid);
tr.style.backgroundColor = color;
}
}
});
2. Color coding based on status column- Colour only status column
--------------------------------------------------------------
(function () {
var condFieldCtx = {};
// Define
template variable
condFieldCtx.Templates = {};
// Define your
required fields and functions to call in each case.
// In our case
the field is Progress
// Override
Function is PatientProgressViewTemplate
condFieldCtx.Templates.Fields = {
"ProjectStatus": { "View": PriorityFormat } // Choice is the field name
};
//conditional
formatting for a complete row comes here
condFieldCtx.OnPostRender =
[HighlightRowOverride];
// Register the
template override with SP2013
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(condFieldCtx);
})();
function PriorityFormat(ctx) {
var choiceValue = ctx.CurrentItem.ProjectStatus;
if (choiceValue == 'Open') {
return "<span><font
style='background-color:green;display:block;'>" + ctx.CurrentItem.ProjectStatus + "</font></span>";
}
else if (choiceValue
== 'InProgress') {
return "<span><font
style='background-color:yellow;display:block;'>" + ctx.CurrentItem.ProjectStatus + "</font></span>";
}
else
{
return "<span><font
style='background-color:red;display:block;'>" + ctx.CurrentItem.ProjectStatus + "</font></span>";
}
}
function HighlightRowOverride(ctx) {
var rows = ctx.ListData.Row;
for (var i = 0; i
< rows.length; i++) {
var myIid = GenerateIIDForListItem(ctx, rows[i]);
var tr = document.getElementById(myIid);
ctx.skipNextAnimation = true;
}
}
3. Show percentage bar in list
---------------------------
(function () {
var condFieldCtx = {};
// Define
template variable
condFieldCtx.Templates = {};
// Define your
required fields and functions to call in each case.
// In our case
the field is Progress
// Override
Function is PatientProgressViewTemplate
condFieldCtx.Templates.Fields = {
"Rating": { "View": PercentCompleteFormat } // Choice is the field name
};
//conditional
formatting for a complete row comes here
condFieldCtx.OnPostRender =
[HighlightRowOverride];
// Register the
template override with SP2013
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(condFieldCtx);
})();
function PercentCompleteFormat(ctx) {
var returnvalue = '<div
style="background: #BCBCBC; display:block; height: 20px; width:
100px;"><span style="color: #fff; position:absolute;
text-align: center; width: 100px;">'
+ ctx.CurrentItem.Rating + '</span><div style="background: #D2421F; height:
100%; width: '
+ ctx.CurrentItem.Rating.replace(" %", "") + '%"></div></div>';
return returnvalue;
}
function HighlightRowOverride(ctx) {
var rows = ctx.ListData.Row;
for (var i = 0; i
< rows.length; i++) {
var myIid = GenerateIIDForListItem(ctx, rows[i]);
var tr =
document.getElementById(myIid);
ctx.skipNextAnimation = true;
}
}
4. Colour only the text based on status
------------------------------------
(function () {
// Create
object that have the context information about the field that we want to change
it's output render
var priorityFiledContext = {};
priorityFiledContext.Templates = {};
priorityFiledContext.Templates.Fields = {
// Apply the new
rendering for Priority field on List View
"Priority": { "View": priorityFiledTemplate }
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(priorityFiledContext);
})();
// This
function provides the rendering logic for list view
function priorityFiledTemplate(ctx) {
var priority = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
// Return html
element with appropriate color based on priority value
switch (priority) {
case "(1) High":
return "<span style='color
:#f00'>" + priority + "</span>";
break;
case "(2) Normal":
return "<span style='color
:#ff6a00'>" + priority + "</span>";
break;
case "(3) Low":
return "<span style='color :#cab023'>" + priority + "</span>";
}
}
5. See multi line text content in tool tip in list
-----------------------------------------------
(function () {
// Create
object that have the context information about the field that we want to change
it's output render
var bodyFiledContext = {};
bodyFiledContext.Templates = {};
bodyFiledContext.Templates.Fields = {
// Apply the
new rendering for Body field on list view
"Body": { "View": bodyFiledTemplate }
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(bodyFiledContext);
})();
// This
function provides the rendering logic
function bodyFiledTemplate(ctx) {
var bodyValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
//This regex
expression use to delete html tags from the Body field
var regex = /(<([^>]+)>)/ig;
bodyValue = bodyValue.replace(regex, "");
var newBodyValue = bodyValue;
if (bodyValue &&
bodyValue.length >= 100)
{
newBodyValue = bodyValue.substring(0,
100) + " ...";
}
return "<span title='" + bodyValue + "'>" + newBodyValue + "</span>";
}
No comments:
Post a Comment