Posts Tagged 'sharepoint content editor'

Simple User Interface Enhancement With the Content Editor


Sometimes we need to develop custom solutions or customize SharePoint sites using SharePoint designer. Examples might be when creating detailed user interface elements such as interfaces to complex business system via web parts or changing the styling or branding of a complete site by modifying master pages. At other times we just need to enhance the user experience by adding a small piece of functionality.

One great example of this is to be found in the document centre.

A large upload button is provided to make it easier for our users to start the upload process.

This is implemented by using the content editor web part and some simple HTML/ JavaScript.

  1. Open up a document center site
  2. Switch the page into edit mode
  3. Investigate the HTML source for the content editor web part
  4. Create your own version to use against other libraries
5. This assumes you have SharePoint server standard or Enterprise installed and that you can create or access a new site that is based on the document centre template

6. The site will look something like this – note the button on the right

7. Use Page | Edit page to switch the page into editing mode


8. Click on the big grey button (Content Editor Web Part) then click on the HTML Source ribbon item

9. The source for the web part is now editable and will be similar to the following which has been slightly reformatted for easier reading

The key part is highlighted in blue. A call to a JavaScript routine provided by SharePoint that opens the upload document dialog.

Using a different address such as DavesDocuments/Forms/Upload.aspx allows me to either modify the existing button or create a set of buttons each opening their own library dialogs.The button itself is an image file (uploaddoc.png) above which can also be replaced.

The result is an enhancement that is simple to do if you know some basic html and JavaScript. Combine this with some css and even more useful effects can be achieved.

In summary, if you haven’t used it yet, the content editor web part is well worth a look as it is easy to use and gives a lot of potential for enhancing pages without needing the heavier duty development or customization tools.

Dave Severn


Learning Tree logo

SharePoint Training

Learning Tree offers over 210 IT training and Management courses, including SharePoint training.

Enter your email address to subscribe to this blog and receive notifications of new posts by e-mail.

Join 30 other followers

Follow Learning Tree on Twitter

Do you need a customized SharePoint training solution delivered at your facility?

Last year Learning Tree held nearly 2,500 on-site training events worldwide. To find out more about hosting one at your location, click here for a free consultation.
Live, online training

%d bloggers like this: