Custom script - how to modify activities after they load?

Tom_Hendricks

This is one I think I can figure out, but I'll bet we could all figure it out faster and better together.  I am attempting to add a class to the div that contains each activity item, based on its activity type (RA, MA, RB, SA, PA, etc.)  This is very easy to do manually in the browser console after the page loads, but I am noticing that the BoundReady event seems to happen before the activities are loaded.

Is the best way to do this with a mutation observer on $('div.activity-list-container') and check for the presence of children that match $('div.activity-item')? Or is there another, existing event I could bind an additional function to?  My hesitation at taking my own suggestion above is just that I already have a lot of mutation observers on any given page, and I am also unsure of what this might do to performance on tickets that do not have activities and therefore do not stop the observer from observing.

Here are two examples of my actual goal, which only works (long) after the page has loaded:

$('div.activity-item-header[data-activity-id^="RA"]').parent().addClass('reviewActivity');
$('div.activity-item-header[data-activity-id^="PA"]').parent().addClass('parallelActivity');

JQuery just doesn't find those elements if you run this within boundReady.

Confirmation and better suggestions are both welcome!

Jeff_Lang

you could try something like this to have the element updated as soon as it is added

app.custom.formTasks.add('ServiceRequest', null, function (formObj, viewModel) {	<br>	formObj.boundReady(function () {<br>		$('body').on('DOMNodeInserted', $('div.activity-item-header[data-activity-id^="PA"]'), function () {<br>			$('div.activity-item-header[data-activity-id^="PA"]').parent().addClass('parallelActivity');<br>		});<br>	});<br>});<br>

would just need to duplicate the .on for whichever activity type required.

Jeff_Lang

you could try something like this to have the element updated as soon as it is added

app.custom.formTasks.add('ServiceRequest', null, function (formObj, viewModel) {	<br>	formObj.boundReady(function () {<br>		$('body').on('DOMNodeInserted', $('div.activity-item-header[data-activity-id^="PA"]'), function () {<br>			$('div.activity-item-header[data-activity-id^="PA"]').parent().addClass('parallelActivity');<br>		});<br>	});<br>});<br>

would just need to duplicate the .on for whichever activity type required.

Tom_Hendricks

This answer looks very promising, but I have not had a chance to test it yet.