Jaap Vossers' SharePoint Blog

Just another WordPress.com site

Reusable Content & HTML Snippets

with 3 comments

So your client wants to be able to insert more than just formatted text and images in his Publishing HTML field control? So he wants to insert those fancy looking boxes that your graphics designer made? Ah, but they are variable height and require several background images so we are talking about inserting a bit of “complex” html. How can we provide a user friendly interface with as little customisation as possible? I personally like the out-of-the-box Reusable Content functionality provided by MOSS 2007. I will demonstrate how it can be used to solve our problem.

Let’s take the following box for example:

rc-start

Because of the vertical scaling requirements, the box needs to be split into three logical sections: header, content, footer. The html for the box shown is as follows:

<div class="box">
    <div class="box-header">This is the header</div>
    <div class="box-content">Lorem ipsum ...</div>
    <div class="box-footer">&nbsp;</div>
</div>

The styling of the box, including the background images is done via CSS. The header and footer are fixed height, whereas the content area is variable height and has a background image that repeats in the vertical direction.

Back to SharePoint – when you create a site collection using the Publishing Site Site Definition, you should have a list called Reusable Content in your root web. You can navigate to it using Site Content and Structure. We will create an item in this list that will be a “template” for our box.

Insert a new item into the Reusable Content list. Ensure you have Automatic Update turned OFF. Use the Edit HTML Source on the html editor to paste in the following html:

<div class="box">
    <div class="box-header">[HEADER] </div>
    <div class="box-content">[CONTENT]<div>
    <div class="box-footer">&nbsp;</div>
</div>

The rest of the fields are for you to fill in. Save the item and then approve it (the Reusable Content list has content approval turned on by default).

Now that we have our box html template in place, let’s go to our page that needs to have an instance of the box appear on it. Go to edit mode and locate your Publishing Html Field Control. Click the toolbar button Open a new window to Insert Reusable Content.

rc-insertfromeditor

Select the item that we created earlier and press OK. If everything went well, an instance of the box with text placeholders has been inserted into your Publishing HTML Field control.

rc-inserted1

All there is left to do is to place the cursor in the text placeholders and replace it with the actual content.

rc-inserted2

On a final note, be aware of the risk involved when content editors play around with div elements. I have seen situations where content editors got “creative” and partially deleted boxes, leaving orphaned div opening tags and turning the layout of your page into scrambled eggs.

Written by jvossers

April 19, 2009 at 11:10 pm

3 Responses

Subscribe to comments with RSS.

  1. Hi Jaap, nifty stuff. Would the use of different browser cause it to display differently? I assume yes, as they all tend to be a bit of a pain. Your thoughts?

    Harish Mathanan

    September 21, 2009 at 9:24 am

  2. Any thoughts on how I could track all locations where I have referenced the reusable content?

    Rick

    January 14, 2010 at 4:21 pm

  3. JohnO

    March 29, 2011 at 9:36 pm


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

%d bloggers like this: