Adding JavaScript to a Content Editor Web Part to directly go to Add List Item

 

What a tricks to accomplish a custom development of web part or a page with out of the box Content Editor Web Part (CEWP), just needed to use JavaScript in a Content Editor Web Part. I have the code noted below entered in a web part to accomplish the functionality to reach the list item in edit more and add new item in the list directly.

The Content Editor Web Part (CEWP) allows you to add text, html, scripts or styles to a SharePoint page. Its versatility makes it a favourite among developers.

The CEWP has two edit options:
- Rich Text Editor: as it says, allows you to add formatted text.
- Source Editor: this is a more powerful option, allowing you to add html, scripts or styles.

Note that the CEWP is not the only Web Part to allow you to add html to your pages. In some cases you may also consider the Form Web Part or the Page Viewer Web Part.

Having said all these it's time for the actual work.......

First edit the page by clicking Site Action and the Edit Page

Then add a Content Editor Web Part at the same web part zone of the list view.

Now modify the web part and get to the source editor and the following JavaScript code.

<span><div><strong><font color="#ff8040" size="5"><font size="4">_______________________________________________________</font></font></strong></div></span><br /><div onkeydown="javascript:if (event.keyCode == 13)GoToPageRelative('/Lists/TestCEWP/NewForm.aspx');"><font color="#ff8040" size="4"><strong>Add&nbsp;New Item&nbsp;</strong></font>&nbsp;&nbsp;<input id="btnAddNew" onclick="javascript:GoToPageRelative('Lists/TestCEWP/NewForm.aspx');"value=" Add New" type="button"></div><span><div><strong><font color="#ff8040" size="5"><font size="4">_______________________________________________________</font></font></strong></div></span>

Save it and see the page...... Viola.... behaves like a custom built web part.

Press the button and it take you directly to the

If you break your Web page…

When playing with the CEWP, you run the risk of adding bad code that will break your page. SharePoint will then throw out an error message, without offering any way to undo your changes.
If this happens to you, here is a useful trick: append the “?contents=1” in query string to your URL. It will give you access to the maintenance page, where you’ll be able to get rid of the faulty Web part.

For example, if you inadvertently break this page:

http://ThisServer.com/sites/ThisSite/ThisLibrary/allitems.aspx

Then Enter

http://ThisServer.com/sites/ThisSite/ThisLibrary/allitems.aspx?contents=1

A trick to edit Web Part pages

On some pages, the edit option is not available or is greyed out. This is for example the case for the edit form of a list. The workaround here is to append the “?ToolPaneView=2” in query string to your URL, which will switch your page to edit mode. Note that it seems to be unsupported by Microsoft, though I haven’t read an official confirmation.

For example, if you want to edit:
http://ThisServer.com/sites/ThisSite/Lists/ThisList/editform.aspx
Enter:
http://ThisServer.com/sites/ThisSite/Lists/ThisList/editform.aspx?ToolPaneView=2

If you have a more elegant solution – please post a comment… I’ll be happy to hear.

Share this............

HaPpY CoDiNg... (Aurum)