Insert JavaScript into a Content Editor Web Part (CEWP)

08/31/2010

SharePoint 2010

In the 2007 version of SharePoint, we had the Source Editor included in the Content Editor Web Part (CEWP) as our way of inputting JavaScript directly onto a page. The process on how to do this has changed a little bit in the new 2010 version. Follow below on how to successfully perform the same task.

Instead of having a Source Editor to directly paste in our code, we need to first create a simple text file and save our code there. Once saved, upload that file to SharePoint. I am using the Site Assets library for this demo and a JavaScript that displays today’s date. After you have uploaded the file, right click on the file and select Copy Shortcut.

Now, go to your desired page and put the page in edit mode. Add in the Content Editor Web Part located under the Media and Content category. Once added select the web part and use the ribbon UI to navigate to the Web Part Properties screen.

On the web part properties screen, paste in the URL link to your uploaded JavaScript file. Click OK on the properties screen and, if your JavaScript is valid, it should display the desired results! Simple and easy!

_____________________

Sponsors *Trusted SharePoint Ads Only!*

Packaged Enterprise Search
for SharePoint.View a quick online demo here! Surfray.com/Ontolica

Free Outlook Sidebar!
Access SharePoint from Outlook w/ harmon.ie Sidebar. Download Now!

SharePoint Migration Tools
Sharegate: No-Brainer Migration Tools for SharePoint. $375.

SharePoint Usage Reports
Usage reports, collaboration and audit for SharePoint.

About these ads

Subscribe

Subscribe to our RSS feed and social profiles to receive updates.

26 Comments on “Insert JavaScript into a Content Editor Web Part (CEWP)”

  1. Ashok Says:

    Hi,

    As you said,I tried to hide context menu for a list in sharepoint 2010, but it’s not working.

    Java script is:

    function CAMOpt(p,wzText,wzAct,wzISrc,wzIAlt,wzISeq,wzDesc)
    {
    var mo=CMOpt(wzText,wzAct,wzISrc,wzIAlt,wzISeq,wzDesc);
    if(!mo)return null;
    if(wzText != “View Item”)
    if(wzText != “Edit Item”)
    if(wzText != “Compliance Details”)

    if(wzText != “Manage Permissions”)
    if(wzText != “Delete Item”)
    AChld(p,mo);
    return mo;
    }

    Reply

  2. Richard Goldade Says:

    Anyone know how to modify this idea “Collapse text in list view” (http://www.endusersharepoint.com/2009/02/20/jquery-for-everyone-collapse-text-in-list-view/)to work in SP2010?

    Reply

  3. Anneela Says:

    Hi, the solution above works great. However it does not work at all for the javascript that I am using that rotates images. Do I need to fix the code or can you assist?

    <!–
    function adArray() {
    for (i=0; i*2<adArray.arguments.length; i++) {
    this[i] = new Object();
    this[i].src = adArray.arguments[i*2];
    this[i].href = adArray.arguments[i*2+1];
    }
    this.length = i;
    }
    function getAdNum() {
    dat = new Date();
    dat = (dat.getTime()+"").charAt(8);
    if (dat.length == 1)
    ad_num = dat%ads.length;
    else
    ad_num = 0;
    return ad_num;
    }
    var ads = new adArray(
    "/SiteAssets/welcome_img01.png","http://pos-shp-11&quot;,
    "/SiteAssets/welcome_img02.png","http://pos-shp-11&quot;,
    "/SiteAssets/welcome_img03.png","http://pos-shp-11&quot ;);
    var ad_num = getAdNum();
    document.write('‘);
    link_num = document.links.length-1;
    function rotateSponsor() {
    if (document.images) {
    ad_num = (ad_num+1)%ads.length;
    document.js_ad.src = ads[ad_num].src;
    document.links[link_num].href = ads[ad_num].href;
    setTimeout(“rotateSponsor()”,4000);
    }
    }
    setTimeout(“rotateSponsor()”,4000);
    // –>

    Reply

    • sptwentyten Says:

      I am by NO means a developer. :) However, perhaps someone will see this and provide assistance. Also, there is a Slideshow Web Part OOTB in 2010 now…have you tried just using that?

      Reply

  4. jamiep77 Says:

    I am trying to use a twitter widget and have followed the instructions above, pasting the following Javascript into a text file and then calling it from the Content Editor web part:

    new TWTR.Widget({
    version: 2,
    type: 'profile',
    rpp: 4,
    interval: 6000,
    width: 250,
    height: 300,
    theme: {
    shell: {
    background: '#6795db',
    color: '#ffffff'
    },
    tweets: {
    background: '#d9e5f7',
    color: '#000000',
    links: '#0982d9'
    }
    },
    features: {
    scrollbar: true,
    loop: false,
    live: true,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
    }
    }).render().setUser('jamiep77').start();


    When I do this, the widget shell appears, but no dynamic content will work. Am I doing something wrong?

    Reply

  5. Richard Says:

    I have a question, I am lookin for any tutorial how to use javascripts in CEWP directly. For example I have table with buttons. Every button have to call different function after click on it. So onclick will show up some div, or hide. Javascript source is loaded on master page. So It should be workin. I just need to add that function for my buttons. Pciture, or div or any aprt I want. Can anybody help me how to make it? If I try to add function directly in “Edit HTML source” it doesn’t work. So my div looks like ” BOOK and I need to be like this BOOK PLEASE HELP

    Reply

  6. Bil Simser Says:

    Just a reminder which may fix some of the peoples problems here. When you use a content link it’s effectively bringing in the file contents and dropping them on the page. So if you’re linking to javascript you have to include the [script] tags surrounding your code.

    Reply

  7. S D Says:

    How do you get it to keep from putting the tags around your code? It’s messing up my page :(

    Reply

  8. hrhenrikandersen Says:

    Thank you for posting this. It helped removing the bug “The HTML has been modified” meaning all the javascript had been removed.

    I had another problem using the SharePoint client API that appeared on some websites. Some times the SP. ClientContext was null.
    In order to fixed this error I used this code.

    var clientContext;

    ExecuteOrDelayUntilScriptLoaded(initialize,”SP.js”);

    function initialize() {

    this.clientContext = SP.ClientContext.get_current();
    }

    Reply

  9. ds Says:

    It worked for me, thanks.

    Reply

  10. Cliff Says:

    Thank you Adam for this post. I tried this and works great!
    I used it to How To: Create Hyperlink to Modal Pop-Up Form

    Here is the link for those interested -:

    http://erikswenson.blogspot.co.uk/2010/09/how-to-create-hyperlink-to-modal-pop-up.html

    Reply

  11. Mike Says:

    Why is SharePoint 2010 using such a brain-dead mechanism to insert simple script?

    Reply

    • BobC Says:

      @Mike Regarding “…Why is SharePoint 2010 using such a brain-dead mechanism to insert simple script?”

      A. This is not the only way, but is useful for ad-hoc changes to pages without having to modify the page source.

      Reply

  12. Johan Says:

    Cross-domain scenario?

    Hi and thanks – your post confirmed that “we’re doing it the right way” (and it used to work on SP 2007 for us)

    However, on SP 2010 it doesn’t work, and I just realized that it’s because the .txt file is stored on another domain (not on the SP installation domain) – when we try it with the file on the same domain it seems to work.

    Now, for a number of reasons we’d like to keep the script .txt on the other domain, hence two questions:

    * Are there some additional cross-domain security checks added to SP 2010?
    * Do you know of any way to solve this? Eg can the cross-domain security checks be disabled or over-ridden?

    Reply

    • Adam Preston Says:

      You could embed the code directly into the web part instead of sourcing it with a text file. Add the web part and do “Click here to insert content”. Use the ribbon and I believe Format tab to find the HTML button, use that drop down to select Edit HTML and paste in the javascript code. Give that a try.

      Reply

      • Johan Says:

        Thanks, however this is not an option for us…

        The reason we originally put the script in a txt file was to be able to “batch update” the script if needed.
        We could perhaps move the txt file to the SP domain, but that would put us in a situation where we need to update the reference to the txt file in CEWPs on every page…
        In order to avoid that I’m looking for a way to overcome this cross-domain issue.

Trackbacks/Pingbacks

  1. Insert JavaScript into a Content Editor Web Part (CEWP) « Rana Omer Hussain's RegEdit - 01/03/2012

    […] : Insert JavaScript into a Content Editor Web Part By sptwentyten LD_AddCustomAttr("AdOpt", "1"); LD_AddCustomAttr("Origin", "other"); […]

  2. Insert JavaScript into a Content Editor Web Part (CEWP) « Rana Omer Hussain's RegEdit - 01/03/2012

    […] : Insert JavaScript into a Content Editor Web Part By sptwentyten LD_AddCustomAttr("AdOpt", "1"); LD_AddCustomAttr("Origin", "other"); […]

  3. Journal 06/05/2012 (a.m.) | Journal - 06/05/2012

    […] Insert JavaScript into a Content Editor Web Part (CEWP) | SharePoint Adam […]

  4. markwilson.it » Creating a dashboard using a SharePoint list (part 1): colour coded status indicators - 06/12/2012

    […] source for the webpart but, for SharePoint 2010, it’s necessary to link to a separate file (Adam Preston explains how to do this in his post on inserting JavaScript into a Content editor Web P…) in the This time, the formula is: ="<DIV style='font-family:Wingdings; […]

  5. Content Editor Web Part (CEWP) & JavaScript duplicating entries in SharePoint 2010 « Step Bi Step - 06/19/2012

    […] spending few minutes I have found the solution in this post, actually SharePoint 2010 does not support the JavaScript directly into the source editor. So we […]

  6. How to use html and JavaScript in Content Editor web part in SharePoint2010 « YBBEST SharePoint Pie - 01/15/2013

    […] http://sharepointadam.com/2010/08/31/insert-javascript-into-a-content-editor-web-part-cewp/ […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 43 other followers

%d bloggers like this: