Customize SharePoint list personal view with Content Editor Web Part

Question

I have several SharePoint (2007) lists, for which I have customized the default AllItems display with jQuery/JavaScript in CEWP, enabled features/functions like freeze pane, differentiate row color per "status" column (e.g. "delayed": red, "completed": green and etc).

Is there any way that I can enable such features/functions with various personal views?

The "AllItems" view, for example, shows about 50 columns, which are of regular data types like,

single line of text
multiple lines of text
Yes/No
date and time
person or group 
choice
lookup
number
calculated

I tried to add CEWP in one of my personal views, but it didn't work out. Also confirmed that CEWP won't work for personal view with information with this link and this link.

The ICC trick didn't work out for me. Here is the field definition, and the list view,

Any suggestions on how to customize a personal view?

Answer 1

A little know "feature" of SharePoint is that calculated columns can be used to execute arbitrary javascript snippets. I don't know who discovered this technique, so I will give attribution to the original blog I read this at.

Link: ICC – HTML in a Calculated Column / Field of a SharePoint View

The basic idea is that formula can include html snippets in them. Consider the following sample (taken from the blog above):

="<DIV style='background-color:LimeGreen;align:left;'>"
 &"<DIV style='color:white;background-color:red; width:"
 &100-[% Complete]*100
 &"%;'>"
 &[% Complete]*100
 &"</DIV></DIV>"

This will output a column that displays the "% Complete" column value as a progress bar. The script is "rendered/executed" every time the column is displayed, so personal view won't be a problem.

Formulas can also be used to include scripts:

=[Cost]
&"<SPAN><HR>total: <span style='color:green; font-weight:bold'>TOTALGOESHERE</span></SPAN>"
&"<img src='/_layouts/images/blank.gif' onload=""{"
    &"var T=this.parentNode.parentNode.parentNode.parentNode /* points to the TABLE node*/"
    &",total="&[Cost]
        &"+((T.getAttribute('data-icctotal')==null) /* shorthand JS to only add existing totals*/"
            &"?0"
            &":parseFloat(T.getAttribute('data-icctotal'))"
        &");"
    &"T.setAttribute('data-icctotal',total);"
    &"this.previousSibling.lastChild.textContent=total;"
    &"if(typeof window.ICCprev!='undefined'){window.ICCprev.parentNode.removeChild(window.ICCprev)}"
    &"window.ICCprev=this.previousSibling; /* delete the ICCtotal SPAN from previous Row*/"
&"}"">"

Notice that the above does NOT include a tag, instead a tag is used. The linked blog goes more in detail, but know that this is a workaround needed on SP2013 since tags included this way would end up in a cdata block (on sp 2010 you are free to use script tags).

Also notice that should you decide to go this way, please evaluate the risk of exposing your site to javascript injection.