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

Type to search

Do you mean "" ?

Sorry, no results were found for your query.

Please check your spelling and try your search again.