By EricHarlan
Published: May 11, 2008
Updated: May 11, 2008

There are MANY ways to accomplish this task; however each has their pros and cons. Based on requirements we had in this instance flash web parts, ad rotators etc would not work. However this is most certainly probably not the only way to do this which seems to usually ring true with most MOSS solutions.

In this case we needed a specific design element to ring true and keep with the branding of our MOSS site. The requirements were as follows:

<!---News teaser had to have a primary Title

<!---News teaser had to have a secondary title

<!--- News teaser had to have a teaser content text area

<!--- News teaser had to have a link to the actually news story that lived in the news publishing site

<!--- News teaser had to have a picture that went along with the story.

Our first attempt at this was to place some DHTML/Javascript into a CEWP (content editor web part), and place a css file, a “loading” image, and a javascript file into a document library folder that the CEWP would reference. This method was written about by Chris Rivera wrote about HERE. This was our result. (Note the outlined portion in red)

This gave us exactly what we needed, however it had one major drawback. The Power user that needed to update the content on a daily basis had no coding skills. To update the content the user had to go into the CEWP and edit some very simple lines of code to get the teaser to show up.

There were a few options we looked into to solve this problem. The first one was creating a flash file that pulled xml into it and displayed content accordingly. The next was to use a flash rotator, but this would require the user to create image files, same for an ad rotator. The only other option we could think of on such short notice (a week), was to create an InfoPath form that would harvest the news teaser information and image and then send off a workflow to get pulled into a list etc.

A fellow Sogetian Dave Wollerman, suggested creating a custom list in SharePoint, and adding the list as a web part on a temporary page you create to get this working. Then open the page up in SharePoint Designer, and convert the list to a XSLT view. You would then save the page, customizing it and returning the page on the browser. You would then write your xsl to match the columns you created in your custom list. Lastly, exporting the new web part and importing it on the home page where you don’t have to break the dependency on the site definition (or you don’t have to customize your home page).

Here’s how we did it.

First a few preliminary things that we created to support this method, you should have a working understanding of XSLT, you need to have console rights to all web front end (wfe) SharePoint servers. And you need to have admin rights on the SharePoint install.

Now, the step by step (with pictures no less).

<!--  1. First thing we need to do is copy the three slider files to the WFE servers.

- Navigate to the following directory on your WFE(s) C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS

- Create a folder Called “Client” then a folder inside of that called “Slider”

- So now you should have a path that looks like this C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\Client\Slider

- Now copy in to the slider folder“contentslider.js”, “contentslider.css” and “loading.gif”

Note, these are the files I used so they have been coded to our needs you may have to change the css to get it to look the way you like.

<!-- 2. Next, lets create our custom list.

- Go to the root site that your news slider will eventually live.

- Go to site actions > Create

- Select Custom list

- Name it “newsslider”

- Hit ok

**Follow steps F-J only if you will use the same column names we have used. If you do not intend to or you want to add additional columns you will need to make your own adjustments to the xsl.

Create the following columns, case sensitive.

- Title – is already there no worries

- secondarytitle – single line of text

- contenttext – multiple lines of text, plain text only

- morelink – hyperlink

- picurl – picture

- Enter in some dummy content for now (two items should be good enough do not attach a image file to the list item, link to one in a news portal *read notes below*)

 

 

 

 

 

<!-- 3. Next step is to add your list to your “staging” sub site.

a. Go to your subsite

b. Site actions > edit page

c. Add the “newsslider” list as a web part

d. Exit Edit mode

<!-- 4. Now we need to convert the web part to XSLT view

a. Open up SharePoint Designer

b. Open Site

c.Navigate to the site where your list is now a web part on the page

d. Highlight the now on the page list web part

e. Right click and select “Convert to XSLT Data View”

f. Save the page (yes save)

Saving the page, will prompt an alert asking if you want to customize the page away from the site definition. We’ll address this later. If for some reason things go wacky you can go to File > Reset to site definition to revert your changes.

<!-- 5. Adding the XSL to your web part.

a. Modify the shared web part

b. You will now have an XSL Editor button, click it and paste the following:

CLICK HERE TO GET THE XML CODE YOU'LL NEED, PASTING IT KEPT SCREWING UP THE PAGE.

c. Click OK

<!-- 6. Everything should be working at this point. The first thing to do if things aren’t working correctly the first thing you should do is make sure the column names match up. Remember, if you created the columns prior and named them incorrectly, renaming them will not work. You must delete the column first then read it.

Here’s what your finished product should look like:

 

 

Notes:

If you want to get this to work without customizing your page, export the web part and import that into your SharePoint web part gallery so you can just add it to your main page, or wherever you need to add it to. Just take into account that you will need to make sure your custom list is in the same root site as the web part.

Also, the “morelink” is best used when pointing to an existing news publishing page. What we did in our case was to setup a news publishing site, had the user post up her news and publish the file, essentially creating a new, news page. Once that was done she could then create the list item that feeds your news teaser with a location for the MORE link. This also gives an image for the teaser list if the news article was setup with an image prior.

 

Here are all the files needed to reproduce the above article HERE.