Customizing SharePoint Blog Posts Web Part

Description

The OOTB posts web part displays complete posts in Home Page (default.aspx) of Blog Site. In this post, the Posts web part is customized to display only 250 characters from each post and a “more” link to the actual blog post instead of displaying complete Blog post in Home Page.

Before Customization

The Posts “ListViewWebPart” displays complete posts in home page.

After Customization

See the below screen, after the customization of Posts Web Part using SharePoint Designer.

Approach

Below the approach followed to display 250 characters blog post summary.

1) Convert Posts web part to XSD Data View using SharePoint Designer (SPD)
2) customize the XSL to display 250 characters summary and a “more” link to the actual blog post
3) Create a new Web Part from Customized Post web part and use it in other blog site

The following explains in-detail about the approach.

Creating XSD Data View

Use SharePoint Designer to convert the default list view web part (Posts) to XSD Data View. Open the Blog’s Home Page in your SharePoint Designer. Once the page is opened Right Click the List View Posts web part and select “Convert to XSD Data View”. See the below screen.

Customizing the XSD Data View

The Body column of the Posts list holds the complete summary text. The DataFormWebPart generated by SPD points the list by using the ListID. ListID is nothing but the GUID, which will change server to server. so use ListName instead of ListID to use this web part in blog site of any server.

Parameters Generated by SPD

After Change

The “removeHtmlTags” template of XSL used to strip the HTML text from the summary text. See the below screens which shows the XSL customizations.

“removeHtmlTags” Template Definition

Call “removeHtmlTags” for getting Pure Text

Replace the following section

by

Now the customizations have been done. Export posts web part and use it in other Blog sites by uploading it to Web Part Gallery.

Reference:
Stripping HTML
http://blog.thekid.me.uk/archive/2007/05/18/stripping-html-tags-when-using-xslt.aspx

Using XSL to display XML data into a human-readable format

Abstract

When we open our XML document on browser, we will notice only the elements of that XML document. If we want to display our XML data in a table like format then we need to know about XSL.

HTML

HTML contains the predefined tags like <TABLE>, <H1>, etc. This will be well understood by the browser. And the browser also knows how to display these tags.

XML & XSL

The most recent version of XSLT is XSLT 2.0.

XML does not use any predefined tags i.e., we can use any tag-name we like. And these names are not well understood. The browser doesn’t know how to display these tags. Now the XSL plays its role, it stands for “Extensible Stylesheet Language”, which describes how the XML document should be displayed on the browser.Have a look at the following XML Document, which describes about Employees. It contains reference to the XSL file (Employee.xsl).

Employee.xml:

Now we need to create a XSL file, by name “Employee.xsl”.

Employee.xsl:

In the above code, xmlns:xsl="http://www.w3.org/1999/XSL/Transform" points to the official W3C XSLT namespace. The is used to build a template, and match attribute is used to associate a template with an XML element. Use “/” to associate the whole XML document.

which associates the whole XML document to the template. The used to select every XML element of a specified node-set: in our example “Employees/Employee”. The used to extract the value of an XML element. It is a simple XSL style sheet, there are other elements of XSL (if, choose, sort…), which are also very useful for transformation.Now the browser will nicely transform the XML document to XHTML.Open the “Employee.xml” in your browser.

XML data will be displayed in a table format. XSL also used to transform XML documents into some other formats.