30 03 2010
Sharepoint Designer – DataView Web Parts – streamlining the Newsletter Layout
On our Sharepoint intranet homepage, we have use an out-the-box discussion list to allow users to post news items of interest to the rest of the company, and to offer others the chance to leave comments. Each thread’s original post is displayed much in the same way the Announcements list view is displayed by default, the advantage of threaded discussions introduced using the Discussion List type.
The problem is that the Rich Text control used to allow people to make posts in this list extracts formatting information from where ever they have copied content from. This is a useful feature of the Rich Text Editor but when it comes to displaying a view of the list on a Web Part Page, the formatting can make the page look messy and inconsistent, with different font sizes and typefaces and colours cluttering the look of the page.
There are solutions I’m aware of which strips formatting when pasting text into the Rich Text Editor, but from what I’m aware of, these require administrator intervention on the backend server. We could also ask users to strip formatting by pasting into Notepad first, then into the editor, but when have users ever changed their habits? The View Layouts available to us out of the box always show the formatting as posted, and modifying the View Layouts again requires administrator intervention.
I decided there was a better way – let the users work how they’ve always operated, but strip the formatting at the display end. Instead of creating a new View Layout, let’s use Sharepoint Designer to recreate the “Newsletter” View Layout, but use some fancy XSL trickery to strip out formatting from the output. We’ll also trim the amount of text displayed, as there isn’t currently a way to do this with options out-the-box.
First, let’s have a look at how the current view looks (click to enlarge):
As we can see, the page is cluttered with different font sizes and faces, long text interrupting the flow of the text. Our users automatically click the heading of the post to view the thread, so most of the text in the body of each row is pretty redundant. All users need is a couple of sentences to bring them to read the thread.
So, let’s fire up Sharepoint Designer and begin creating our new View. The way I work with these is to create a new Web Part page for testing, create my DataView Web Part, then copy & paste the entire block of code into the production page (in this case, default.aspx in the root of the Team Site).
Having done this, we need to gain an understanding of the layout we’re recreating. Whilst chuckling at my fantastic illustrative skills in MSPaint, you’ll see that the Newsletter view is generated with 2 ‘TR’ table rows. The first contains ‘TD’ Table Data cells the Subject, Created By, Replies and Modified columns, the second Table Row contains one Table Data cell with the Body of this post.
Once we have an understanding of this, it’s surprisingly simple to recreate this in XSL.
Let’s open our newly created Web Part Page in Sharepoint Designer, and start to add a New Data View. Point to our List used for the News/Discussion items and insert the Subject. From Common Data View Tasks, choose Edit Columns and add the Created By, Replies, Modified and Body columns.
After you’ve done this, you’ll see a bog-standard 5 column table showing you exactly what’s in the list.
This is where we dive into the backend code and have some fun modifying the XSL templates.
Let’s analyse how the XSL template renders the table currently, to see what we need to do to get the Newsletter layout. I tend to find Sharepoint Designer is rather hit-or-miss when it comes to correctly indenting code, so I spent a few minutes tidying the markup, as it will make things far easier when it comes to analysis.
I first pay attention to the template dvt_1, and sort out the indentation of the various TH table header tags. I remove the final TH which renders the “Body” header. We’re not going to need it, as you’ll see soon.
We then are calling dvt_1.body which just directly calls dvt_1.rowview for each row, so let’s go to that template. You should see the entire template renders its content within a single TR table row. From our mockup above, we need to create another table row for each “row” (technically, Node) of data.
Let’s go and add a TR tag directly after the closing TR tag within that template. Within this new Table Row, select & move (or cut/paste) the last TD tag in the previous row – the one that renders the Body of the post – into this new Table Row. Add a “colspan” attribute to TD you have just moved and give it a value of 4, to ensure the data fills the row.
The block of code should now look like this:
Jump over to Design view to see how this looks.
Not bad. Select the Title field (as I have done above), and choose Format As Hyperlink from the Smart Menu. Choose the appropriate fields to display and link to, by directly typing them within curly braces or using the Fx field chooser.
Now we want to strip out that formatting which is making the page look untidy, and also limit the amount of text displayed. There are numerous ways out there to strip HTML, however I have borrowed the example found at this page on thekid.me.uk
. Which, by the way, does have some other cool stuff on there, so have a look! That code template can be pasted straight into your library of templates (if you use separate libraries) or pasted straight into the XSL for this page. If you do paste it directly, add it between the last closing xsl:template and xsl:stylesheet tags at the end of the XSL block.
This template is extremely simple – takes in a string of text, looks for an opening angle bracket, takes all the text before it and pass it back to itself recursively, looking for the closing angle bracket, then passes all the text after it back into itself, repeating these two steps until all angle brackets are missing from the text it’s passing into itself.
So, inside the TD element which outputs the Body, let’s create a variable which is set by the output returned by our new template. The TD will now be filled with the content of that variable. It’ll look like this:
Have a look at the design view to see where we’re at:
Much better! Next, we need to strip out most of that extra text. Let’s decide to limit the preview text to 128 characters, and add an ellipsis to imply more content. To the xsl:value-of tag in the TD element which displays the body, modify it to do this:
This simply outputs our “PureText” variable, from characters 1 through 128, and concatenates an ellipsis at the end.
And to our preview:
Much better! Let’s save this out and load the page in the browser to see how this looks so far.
Not bad at all! Let’s add some style attributes to the TDs and TRs to space things out (or use CSS, of course!). You’ll see at the top of the rowview template there’s a test to see if this is an alternating row or not. Remove the test but keep the xsl:attribute statement. This renders the “heading” of each of our “rows” (nodes) with the alternating style.
The original Newsletter layout also had a nice underline between each post. I’ve dug out the markup to make this from analysing the HTML rendered by the out of the box component, so paste this code after the last TR table row element in our rowview template:
<tr><br><td colspan="3"><br><img src="/_layouts/images/blank.gif" width="100%" height="1px" alt="" /><br></td><br></tr><br><br><tr><br><td class="ms-nlline" colspan="3" style="padding:0"><br><img src="/_layouts/images/blank.gif" width="100%" height="1px" alt="" /><br></td><br></tr><br>
Save all this out, and preview in the browser. All should be well and we should be ready to paste this into our main default.aspx page.
Select any element within our web part in the Design view. At the top of the page you’ll see the tag selector guides, use the left arrow until you can select the WebPartPages:DataFormWebPart tag. Select this, jump into Code view then Ctrl+C to copy this entire tag to the clipboard.
Open up your default.aspx from within Sharepoint Designer and jump to Code View. Locate where within your WebPart Zone you want this to appear, then just hit paste.
When you save this and check in the browser, you should see exactly the same view as we had in the Test Page, but in our production environment, and without all the clutter we had before.
Next up: Fun with this and Sharepoint Calendars, including a useful (I find) view which just doesn’t come with Sharepoint, or even Outlook!