I understand SharePoint lists are like excel, so I was wondering if it was possible to conditionally highlight whole rows/ cells based on the text value of a field.
I have a column in a list called "Status" with 4 options (initial, in progress, completed, awaiting developer resource). I would like to highlight these rows (or even just the status field) a different colour, depending on the value of the status.
Is this possible? Cant find anything relating to this for SP 2016
Cheers
Please use JavaScript to highlight the row based on the Status field:
<script type="text/javascript">
SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {
SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
OnPostRender: function(ctx) {
var statusColors = {
'initial' : '#FFF1AD',
'in progress' : '#FFD800',
'completed' : '#01DF3A',
'awaiting developer resource':'#ff0000'
};
var rows = ctx.ListData.Row;
for (var i=0;i<rows.length;i++)
{
var status = rows[i]["Status"];
var rowId = GenerateIIDForListItem(ctx, rows[i]);
var row = document.getElementById(rowId);
row.style.backgroundColor = statusColors[status];
}
}
});
});
</script>
And place the code above in a Content Editor Web Part in the list view page, so the list row will render different color based on status:
Related
I am using a script editor web part (with code inserted) to color code items in rows that are grouped for a sharepoint list. I'm extremely confused as to why the the color applies only when I'm in edit mode. The code I'm using in the script editor is below..
SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {
SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
OnPostRender: function(ctx) {
var statusColors = {
'Wacht' : '#FF0000',
'In analyse' : '#FCF600'
};
var rows = ctx.ListData.Row;
for (var i=0;i
I have a "Priority Indicator" column in my SharePoint page which shows a bullet point of either green, yellow or red. I cannot seem to find anywhere any help on how I can code this to link with "Due Date" column.
At the moment my status indicators only show if high, normal or low on "Priority" are selected.
For the "Priority Indicators" the code I have is;
Priority Indicator
For my JavaScript code see below;
JavaScript Code
I want the Priority Indicators to show;
Red indicator shows if due date within a week
Yellow indicator shows if due date within 2 weeks
Green indicator shows if due date within 3+ weeks.
Lookup column won't refresh automatically so I suggest you use CSR for this requirement.
Insert script editor webpart into your list view webpart page and insert below script into script editor webpart.
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
(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_x0020_Indicators": { "View": priorityFiledTemplate }
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(priorityFiledContext);
})();
// This function provides the rendering logic for list view
function priorityFiledTemplate(ctx) {
// get today's date
var today = new Date();
// zero out the time portion so we will only compare days
today.setHours(0, 0, 0, 0);
// get the date set in your date YourDateField
var itemDate = new Date(ctx.CurrentItem["Due_x0020_Date"]);
// zero out the time portion so we only compare days
itemDate.setHours(0, 0, 0, 0);
// Return html element with appropriate color based on priority value
var oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
var diffDays = Math.round(Math.abs((itemDate.getTime() - today.getTime()) / (oneDay)));
if (diffDays < 7) {
return "<span style='color:red'>•</span>";
} else if (diffDays < 14) {
return "<span style='color:yellow'>•</span>";
} else {
return "<span style='color:green'>•</span>";
}
}
</script>
Check field static name by developer tool(in list new/edit form).
I have a custom list that is used as a matrix option of Inventory item. Its 'Color'. This custom list has an abbreviation column. I am creating a saved search on item and using Color field(join) and trying to access 'Abbreviation' field of color.
Abbreviation on custom list is available on when 'Matrix Option List' is checked.
Can someone please help me achieve this? I tried to do this through script and it seems like we cannot access 'Abbreviation' column through script. I also tried to use script to write a search directly on 'Color' - custom list and get the 'abbreviation' through search columns. It did not work. Is there a way to access 'Abbreviation' from custom lists?
Thanks in Advance
You can access it via suitescript by using the record type "customlist" and the internal id of the list like so:
var rec = nlapiLoadRecord('customlist', 5);
var abbreviation = rec.getLineItemValue('customvalue', 'abbreviation', 1);
nlapiLogExecution('DEBUG', 'abbreviation', abbreviation);
Keep in mind that the third argument of getLineItemValue is the line number, not the internal ID of the item in the list. If you want to find a specifc line item, you may want to use rec.findLineItemValue(group, fldnam, value).
Unfortunately, it doesn't look like this translates to saved searches. The suiteanswer at https://netsuite.custhelp.com/app/answers/detail/a_id/10653 has the following code:
var col = new Array();
col[0] = new nlobjSearchColumn('name');
col[1] = new nlobjSearchColumn('internalid');
var results = nlapiSearchRecord('customlist25', null, null, col);
for ( var i = 0; results != null && i < results.length; i++ )
{
var res = results[i];
var listValue = (res.getValue('name'));
var listID = (res.getValue('internalid'));
nlapiLogExecution('DEBUG', (listValue + ", " + listID));
}
However, whatever part of the application layer translates this into a query doesn't handle the abbreviation field. One thing to keep in mind is that the 'custom list' record is basically a header record, and each individual entry is it's own record that ties to it. You can see some of the underlying structure here, but the takeaway is that you'd need some way to drill-down into the list entries, and the saved search interface doesn't really support it.
I could be wrong, but I don't think there's any way to get it to execute in a saved search as-is. I thought the first part of my answer might help you find a workaround though.
Here is a NetSuite SuiteScript 2.0 search I use to find the internalId for a given abbreviation in a custom list.
/**
* look up the internal id value for an abbreviation in a custom list
* #param string custom_list_name
* #param string abbreviation
* #return int
* */
function lookupNetsuiteCustomListInternalId( custom_list_name, abbreviation ){
var internal_id = -1;
var custom_list_search = search.create({
type: custom_list_name,
columns: [ { name:'internalId' }, { name:'abbreviation' } ]
});
var filters = [];
filters.push(
search.createFilter({
name: 'formulatext',
formula: "{abbreviation}",
operator: search.Operator.IS,
values: abbreviation
})
);
custom_list_search.filters = filters;
var result_set = custom_list_search.run();
var results = result_set.getRange( { start:0, end:1 } );
for( var i in results ){
log.debug( 'found custom list record', results[i] );
internal_id = results[i].getValue( { name:'internalId' } );
}
return internal_id;
}
Currently NetSuite does not allows using join on matrix option field. But as you mentioned, you can use an extra search to get the result, you could first fetch color id from item and then use search.lookupFields as follows
search.lookupFields({ type: MATRIX_COLOR_LIST_ID, id: COLOR_ID, columns: ['abbreviation'] });
Note: Once you have internalid of the color its better to use search.lookupFields rather than creating a new search with search.create.
I have 2 lists which are Room and Equipment.
In the Equipment list there is a lookup Field to the Room list .
I want to display all related Equipment in Room simple tabular Display Form.
How should I achieve this?
A general solution would be as follow
Check you can work with the REST API in JavaScript like below. (in this step you can just make sure the URL is returning XML data you requested)
http://portal/_api/web/lists/getByTitle('Equipments')/items/?$select=Title,ID&$filter=Room eq 'room1'
create a new custom DisplayForm with SharePoint Designer and add the following jQuery Script to read and generate the previous fetched data at the end of
<script src="/_layouts/15/CDN/Js/jquery-1.11.1.min.js" type="text/javascript" > </script>
<script type="text/javascript" >
function LoadEquipments(roomValue) {
$.ajax({
url : _spPageContextInfo.webServerRelativeUrl + "/_api/web/lists/getByTitle('Equipments')/items/" +
"?$select=Title,ID" +
"&$filter=Room eq '" + roomValue + "'",
type : "GET",
headers : {
"accept" : "application/json;odata=verbose",
},
success : function (data) {
var equipments = [];
var results = data.d.results;
for (var i = 0; i < results.length; i++) {
if (equipments.indexOf(results[i].Title) < 0)
equipments.push(results[i].Title);
}
var ullist = $('<ul/>');
for (var i = 0; i < equipments.length; i++)
$('<li/>').val(equipments[i]).html(equipments[i]).appendTo(ullist);
ullist.appendTo('#divEquipements');
$("#divEquipements ul li").css("font-size", "16px").css("color", "salmon");
},
error : function (err) {
alert(JSON.stringify(err));
}
});
}
$(document).ready(function () {
var roomVal = $("#TitleValue").text();
LoadEquipments(roomVal);
});
for previous code to work as you might guess you would better add id for new td to enclose the new requirements(for example a new tr as the last row which contains aa div with id='divEquipements' ) data and also just add id='TitleValue' to the td containing the room title (usually the first row)
OK there are a lot of possibilities for achieving this. Some possible and good looking solution can be:
Overload the click of the market value in the list(can be done using JSLink) to open a Modal dialog page where all the equipments are listed(fetched using REST query)
Overload the click of the market value in the list(can be done using JSLink) and redirect to the same page but with filters to the same view.
If the number of markets are not many, views can also be created per market(Not so good, but will reduce coding effort)
If its something else you are looking for, please let know. Hope this helps!
Here is my issue. On my page I am using several webgrids pulling from various tables in the database. I am having an issue get the column with the data to display. If I comment out that column, the grid will display and have to correct amount of pages for the amount of data in that table. If I put that column back in, I get the name of that column does not exist. This is happening for all the grids. So here is the setup of the code:
On the Controller page:
var cdb = new CommonModel();
IEnumerable<SelectListItem> _for = cdb.Formats
.OrderBy(f => f.FormatName)
.Select(f => new SelectListItem { Value = f.FormatID.ToString(), Text = f.FormatName });
ViewBag.Forma = _for;
On the view page:
#model HomeInventory.Web.Areas.Classes.Video
#{
ViewBag.Title = "Add Movies / Television Shows";
Layout = "~/Views/Shared/_MovieLayout.cshtml";
}
#{
var fgrid = new WebGrid(source: ViewBag.Forma,
defaultSort: "FormatName",
rowsPerPage: 3, canSort: false,
pageFieldName: "pg");
}
#fgrid.GetHtml(tableStyle: "grid", columns: fgrid.Columns(fgrid.Column(format: (Formats) => Html.CheckBox("FormatID")), fgrid.Column("FormatName")))
#Html.ValidationMessageFor(model => model.Formats, "", new { #class = "text-danger" })
If I run the page, I get the following error:
Column "FormatName" does not exist. The table has it listed as FormatName, but I have also tried Format, Formats, and Name with the same result that the column does not exist. It is quite possible I do not have something set up correctly, causing this issue. Does anyone see what I may have missed?
You've used LINQ to select your rows into a collection of SelectListItem objects, so no, there would not be a FormatName column. Your choices would be (from https://msdn.microsoft.com/en-us/library/system.web.mvc.selectlistitem_properties%28v=vs.118%29.aspx):
Disabled
Group
Selected
Text
Value
If you want to use the columns from your table, don't use SelectListItem.