The following may be a bit redundant as it has been part of many of my “JavaScript hacks” posts, but I’m asked so often I thought I would put it in a article by itself.
The Content Editor Web Part (CEWP)
SharePoint 2007 gave us a nice little web part to insert HTML, CSS, JavaScript, and even just some text, in any web part page. SharePoint 2010 “broke” this web part a bit by trying to “fix up” our code. Add a little JavaScript to a CEWP and you will get this message:
The message may mean that it did nothing to your code, reformatted your code (in strange ways), or completely removed your code!
Here’s a before and after of a “reformat”:
![clip_image002[4]](file:///C:\MikeSmith\Users\MAX\AppData\Local\Temp\WindowsLiveWriter1286139640\supfiles11B14749\image14.png "clip_image002[4]")
Link to your custom code, don’t add it directly to the CEWP
For both 2007 and 2010 the best practice is to link from the CEWP to a text file with your content. To avoid the problem with the random edits made by 2010 just upload a text file containing the code to a library. Then in the CEWP just click the Edit Web Part option in the dropdown and add the link to the code file. This has added benefit of using any HTML, CSS and JavaScript editor such as Visual Studio or SharePoint Designer to edit your code.
Steps:
- Create your HTML, CSS and/or JavaScript in a text file, Notepad will do, and save it with any file extension.
Tip: Name your file with a .HTM extension and then the SharePoint libraries will add a “Edit in SharePoint Designer” link in the file’s dropdown menu!
Notes: Your JavaScript should be enclosed in <script> tags and your CSS should be enclosed in <style> tags.
- After uploading to a library, right-click the file’s name and copy the shortcut
- Go go your SharePoint and insert a Content Editor Web Part
(2010 on the left, 2007 on the right)
![clip_image002[9]](http://lh4.ggpht.com/-Za23KL3w5lQ/TzNTC3txAEI/AAAAAAAABHU/Js9tI-KZxb8/clip_image002%25255B9%25255D_thumb.jpg?imgmax=800 "clip_image002[9]")
- Click the web part’s dropdown menu and click Edit
- Paste the URL to the Notepad file in the Content Link box
- Save your changes and test
And if you have any errors, just open the HTM file in SharePoint Designer, make your changes and save, and then go back to the browser and click refresh! Much faster than constantly editing and save the web part.
![clip_image002[9]](http://lh5.ggpht.com/-6tMdQMIjsZs/TzNTCh3PsoI/AAAAAAAABHM/27VDHCB77bc/s1600-h/clip_image002%25255B9%25255D%25255B2%25255D.jpg "clip_image002[9]")
Hide the title area
If the CEWP only contains HTML, CSS and/or JavaScript then you may want to hide the web part’s title bar. In the properties editor, expand Appearance, click the Chrome Type dropdown and select None.
![clip_image002[5]](http://lh5.ggpht.com/-qHSqqMtvNr0/TzNTD0Z2yjI/AAAAAAAABH8/7ea5zxRhHzo/s1600-h/clip_image002%25255B5%25255D%25255B2%25255D.jpg "clip_image002[5]")
Tip: Don’t “hide” the web part. Just turn off its title bar.
.
14 comments:
Hi Mike
I'm having a problem in that some javascript I've added to an edit for in a CEWP to change the background color of an item title only works when the page is is 'edit mode'. Here is the code:
_spBodyOnLoadFunctionNames.push("changeElement");
function changeElement() {
var control;
control = findacontrol("Hiring Manager");
//control.parentNode.parentNode.style.display="none";
control.parentNode.parentNode.style.background="#fffbc6";
I've never run into this before! Any ideas?
- Tracey
Tracey,
Do you have the CEWP Hidden property enabled?
Mike
I also have this issue. I get "Object Expected" in normal mode. What can cause this?
my code:
$(document).ready(function() {
updateListItem();
});
function updateListItem() {
var siteUrl = '/sites2/sppwgrqy/DashboardTest/';
var clientContext = new SP.ClientContext(siteUrl );
var oList = clientContext.get_web().get_lists().getByTitle('ReleaseSelected');
var Release = document.getElementById('ReleaseID').value;
this.oListItem = oList.getItemById(2);
//this.oListItem.set_item('Title', 'ReleaseID');
this.oListItem.set_item('ReleaseValue', Release );
this.oListItem.update();
//alert('updated' );
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded() {
alert('Code Succeeded!');
}
function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
Hank,
$(document).ready is not "SharePoint aware" and only knows that any events on the <body> onload have fired. A better choice is to add your function to an array of things to be called after SharePoint finished loading all page content.
_spBodyOnLoadFunctionNames.push("updateListItem");
Note that you only add the function name, not parans or parameters.
Another thing to consider is that SharePoint 2010 can load some content asyncronously. The calendar is a prime example, as is any list web part where you have turned on the AJAX features. These will require some custom JavaScript to intercept the SP JavaScript async calls.
Mike
Mike,
I have used the below script on a 2007 list and it worked fine but when I use your steps above to upload the script to a library and then link to it on a similar SP 2010 list I cannot get it to work. No errors but no row colors. Do you see anything about this script that would not work in 2010?
Note that I removed the script tags so it would post ok:
var colDueDate = 6;
var i=0;
d=new Date() //current date/time
var x = document.getElementsByTagName("TD") // find all of the TDs
for (i=0;i= Date.parse(x[i].parentNode.childNodes[colDueDate].childNodes[0].innerHTML) )
{
x[i].parentNode.style.backgroundColor='red'; // set the color
}
else if ((d.getTime()+2592000000) >= Date.parse(x[i].parentNode.childNodes[colDueDate].childNodes[0].innerHTML) )
{
x[i].parentNode.style.backgroundColor='yellow'; // set the color
}
}
}
}
Thanks.. Mike
Mike,
For lists the code should work. Are you using this with a library? If so, are you using the AJAX async options?
What's the error message? You may want to add a TRY...CATCH block around the date related code. Blank date files would be a problem. Also, display the page, view the source and check to see if there is any HTML around the date.
And the standard point... make sure the Content Editor Web Part is placed below the list you want to change.
Mike
I am using this on a list. The script was uploaded to a library and then linked to in the CEWP. I tried removing the current if/else statements that compare dates and replaced it with a simple check to look for basic text:
if ((x[i].innerHTML)=="Test")
and this worked fine.
But when I edited it to look for that same text in a specific column:
var colText = 6;
if ((x[i].parentNode.childNodes[colText].innerHTML)=="Test")
This did not work. I tried changing the Var statement to other column numbers just to make sure I was stating the correct column number but no luck. I looked at the source but did not see any extra html around this script. The CEWP is below the list. Anything else I might be missing?
> I looked at the source but did not see any extra html around this script
Sorry... was there any HTML around the date?
Mike
I think I found the problem but not sure why this happens. I had the style of the view set to Newspaper. When I changed the style to Default, everything works fine. Weird. I tested it several times changing the style and it only would work with the Default style. I like having the style set to Newspaper since it adds divider lines between each row. Do you know a way for this script to work using the Newspaper style?
Newsletter and the other Styles change the HTML and CSS to add the lines or the "green bar" effect.
You may find that you need to add or remove a level from the .childNodes[...].childNodes[...] pattern to deal with the changes.
Also try setting the color one level deeper in the HTML:
x[i].parentNode.childNodes[0].style.backgroundColor='red';
Mike
I tried adding the addtl level to the color statement:
x[i].parentNode.childnodes[0].style.backgroundColor='red';
but that didn't work.
I am not familiar with how the childnodes[] works to understand your first part though. If I am going to add another level to this statement:
if (d.getTime() >= Date.parse(x[i].parentNode.childNodes[colDueDate].childNodes[0].innerHTML))
Would it be something like this:
if (d.getTime() >= Date.parse(x[i].parentNode.childNodes[colDueDate].childNodes[0].childNodes[1].childNodes[2].innerHTML))
Do you just keep increasing the # inside the [] after each new childnodes? Is there any easy way to find out what level a given element is?
> Do you just keep increasing the # inside the [] after each new childnodes?
No. The [0] means "first child at that level".
I'll see if I can put together and example. It may be a day or two.
Is your date field a normal date picker, a calculated field or a single line of text?
Hello Mike
Nice post, pointing me in the direction. I ordered your book also.
I have workflows that are hanging up and I was looking to add some code to restart the work flow. I found a script that does just that but I am not sure where is the best place to put the code. here is a short clip of the code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Microsoft.SharePoint;
using Microsoft.SharePoint.Workflow;
using Microsoft.SharePoint.Administration;
namespace WFRestart
{
public class WFRestart : SPJobDefinition
{
public WFRestart()
: base()
any recommendations? Thanks
Jeff
Jeff,
That is C# code and would need to be run from a Console application, a Windows application, a custom web part or other code app running on the SharePoint web servers. You won't be able to run that from JavaScript.
Mike
Post a Comment