3

I have added a 'Task List' app to my site.

Out the box, when you click on the '...' menu option, you see a pop-up with a whole bunch of useful task list related details.

enter image description here

However, I have also created a custom JS Link file which I have added to the list to do some custom highlighting/logic, etc.

I noticed though that when I add the JS Link file to the list, I now lose those menu details..

enter image description here

Any idea why, and/or how I can get them back while still using my JS Link file?

Thanks!

I added the JSLink via the 'web part' properties..

enter image description here

Edit:

Mu custom JS Link file is the following.. (The idea is for it to give each alternating row a different background color, and then to highlight in green the next upcoming due task/project)

(function($) { var statusFieldCtx = {}; statusFieldCtx.Templates = {}; statusFieldCtx.Templates.Fields = { "MSStatus": {"View": StatusMilestoneViewTemplate}}; statusFieldCtx.OnPostRender = [ rowStyle ]; SPClientTemplates.TemplateManager.RegisterTemplateOverrides(statusFieldCtx); })(); function rowStyle(ctx){ $(".ms-itmHoverEnabled.ms-itmhover:nth-child(even)").addClass('alternateListRow'); HighlightNextDue(ctx); } function StatusMilestoneViewTemplate(ctx) { var _itemMissed = "Missed" var _itemComplete = "Completed"; var _itemOther = "Missed - Not Complete"; var _itemValid = "Not Completed"; var _statusValue = ctx.CurrentItem.MSStatus; var _dueDate = new Date(ctx.CurrentItem.DueDate); var _completeDate = new Date(ctx.CurrentItem.CompletedDate); var _today = new Date(); var _title = ctx.CurrentItem.Title; var _todayDt = new Date(_today.getFullYear(),_today.getMonth(),_today.getDate()); var _dueDateDt = new Date(_dueDate.getFullYear(),_dueDate.getMonth(),_dueDate.getDate()); var _completeDateDt = new Date(_completeDate.getFullYear(),_completeDate.getMonth(),_completeDate.getDate()); if (_completeDateDt > _dueDateDt) { return _itemMissed; }else if (_completeDateDt <= _dueDateDt) { return _itemComplete; }else if (_dueDateDt >= _todayDt) { return _itemValid; }else { return _itemOther; } } function HighlightNextDue(ctx){ var AllDates = new Array(); var AllTitles = new Array(); for (var i = 0; i < ctx.ListData.Row.length; ++i) { var listItem = ctx.ListData.Row[i]; var today = new Date(); var today = today.getFullYear() + "-" + ("0" + (today.getMonth()+1)).slice(-2) + "-" + ("0" + today.getDate()).slice(-2); var _dueDateDt = listItem.RevisedDueDate; var _title = listItem.Title; var iid = GenerateIIDForListItem(ctx, listItem); var row = document.getElementById(iid); if(_dueDateDt >= today){ if (row != null){ AllDates.push(_dueDateDt); AllTitles.push(_title); } } } if(AllTitles.length > 0){ var listLinks = document.getElementsByClassName('ms-listlink') var TitlesAll = AllTitles[0];//AllTitles.reduce(function (a, b) { return a < b ? a : b; }); var titleReplaced = TitlesAll.split(' ').join('-'); for (var i = 0; i < listLinks.length; i++) { if (listLinks[i].innerHTML == TitlesAll) { var ele = listLinks[i]; $(ele).closest('tr').attr('id', "Highlight-" + titleReplaced); $("tr#Highlight-" + titleReplaced).css('background-color','#F1F8C8'); } } }
Improve this question
9
  • I may have an idea. Could you please specify how you changed the JS link? Commented Aug 5, 2015 at 9:12
  • @SPArchaeologist, Added my JS code to post. :) Commented Aug 5, 2015 at 9:21
  • Sorry, my bad, I meant how you added the JS Link to the "page". Did you set the list view property? the web part one? Commented Aug 5, 2015 at 9:30
  • haha, yes. Did so via the 'Edit Web Part' options, on the list view (added screenshot) Commented Aug 5, 2015 at 9:34
  • Can you try to change the web part JS Link property so that it look like 'clienttemplates.js|yourOriginalScript' ? as far as I know, task list already include a jsLink to clienttemplates.js and probably now you are overriding it. By using the undocumented pipe joiner, you can define multiple jslink file to be used.... so try to include the other script to. Commented Aug 5, 2015 at 9:43

1 Answer 1

Reset to default
2

Finally figured it out. :)

I noticed that when I clicked on the '...' I wouldn't get my contextual Task List options, HOWEVER if I clicked on the task in the timeline view, those options were there. Also, once I saw them in the Time Line menu, they then began appearing in my list menu!

So I kept an eye on my js files that were being loaded on my page, and I noticed that a file which appeared after selecting the timeline item was the js file - hierarchytaskslist.js ! That was the missing required js file which my custom JS Link file was overriding for my list view.

Did a quick google to find out how to force this file to load, and found two options..

Solution 1 - Register/load 'hierarchytaskslist.js' in your custom JS Link file

In my function, I called this.. Which loaded the file when my JS Link file loaded. So my file now starts like this..

(function($) { RegisterSod('hierarchytaskslist.js', '/_layouts/15/hierarchytaskslist.js'); LoadSodByKey('hierarchytaskslist.js', null); var statusFieldCtx = {}; statusFieldCtx.Templates = {}; statusFieldCtx.Templates.Fields = { "MSStatus": {"View": StatusMilestoneViewTemplate}}; statusFieldCtx.OnPostRender = [ rowStyle ]; SPClientTemplates.TemplateManager.RegisterTemplateOverrides(statusFieldCtx); })();

Solution 2 - Add it in your list view JS Link field

Another way to load this file is to add the path alongside your custom JS file in the JS Link field.

~sitecollection/_layouts/15/hierarchytaskslist.js|~sitecollection/CustomScripts/CustomScript.js

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.