XSLT Web Part to display HTML

Question

Please excuse if there is a better way to do this, I'm not too familiar with SharePoint web parts, I'm only just now getting into creating them.

What I want to do is have a web part that I can drop into a page, give it a parameter, and then the web part does it's API calls with said parameter, does some XSL transformation, and spits out the HTML that I want to display on the page. In my mind it seems like a simple little web part to write, I just want to make sure this is the best way to go about it and not be duplicating something that could already be existing.

I've gone through this creating a basic web part walkthrough, and I figure I can use the web part property to get the parameter from the user. How would I get it to output HTML though? I changed the "Hello, world!" text to output some HTML and it seemed to have gotten stripped out?

Thanks a ton, and sorry if anything seems noob-ish!

Answer 1

From what I see, there are two main parts to what you want to do.

1. Get your parameter into your query
2. Format the results with some HTML
3. Reuse it later

There are a lot of ways to do this, but I'm going to outline what I believe to be the fastest and most simple.

Getting your parameter into your query

In SharePoint 2010, SharePoint designer has some great options for this. So step 1 is to open the webpage in SharePoint Designer. Click the Insert tab and click the Data View dropdown and select the list you want to get data from.

Now click on the Options tab and click on Parameters

The dialog shows you some of the options for pulling info into your query.

A query string parameter is easy to use. And the server variables are also really handy.

For our example, we'll pick query string and set the default value to 1 (which will be the ID of an item we want to be retrieved). Since we've set this as the default, even if the query string is blank we'll still get our default in our parameter.

Then click on Filter.

We set our Field Criteria to use the parameter we just made.

Now you can save the page in SharePoint Designer and test your results. Pretty fast.

Format the results with some HTML

In SharePoint, XSLT is the best way to put your own HTML around some data you've retrieved from SharePoint.

Also, for getting a parameter into your query, we can add that with a parameter binding:

If you're new to XSL, here's the best xsl tool:

http://spexp-blog-files.s3.amazonaws.com/blog/files/spe-magic-data-view-builder.xsl

To use the magic dataview builder, save this file to documetn library in your farm.

If you’d like to centralize your XSL template for greater reuse (highly recommended), you can put the individual XSL files into a central location for storage. In a WSS or SharePoint Foundation environment, I’d recommend using a Document Library in the root site of your Site Collection. In a MOSS or SharePoint Server 2010 environment, I’d recommend placing the XSL files in the /Style Library/XSL Style Sheets location, as this is where SharePoint stores its XSL by default.

Then paste the url to the file into the XSL Link to replace main.xsl and change Default to FALSE. This property is located near the end of the <XmlDefinition> tag as you view the webpart in Designer.

...  <XslLink Default="TRUE">main.xsl</XslLink><Toolbar Type="Standard"/></View></XmlDefinition>

From there, you can save the page and the XSL wizard from magic data view builder will walk you through creating your own xsl to output your html.

Reusing Your Webpart

To reuse it, click save "To Site Gallery" while your cursor is on the wepart in SharePoint Designer. This will save the webpart into the gallery under the "Custom" group. From there, you an insert your webpart into other pages just like the out of the box webparts.

Answer 2

I think we need more information about what you are trying to get the web part to do. If you use a SharePoint Data View web part, you can point it at a data source, write some XSL to transform the data to render the way you want it will output the HTML to the page. For example, let's say I have a SharePoint list of training classes. I could create a data view web part that takes a query string or other input parameter as its filter, and filter the list of classes to show me just the one that matches the ID of my query string or input param. Then I could format my XSL to output details about the class rendered in whatever fancy HTML I want.

Does that help?

Answer 3

"I changed the "Hello, world!" text to output some HTML and it seemed to have gotten stripped out?"

Please be aware that in your sample, it uses a LiteralControl() which by default HTML Escapes any text. So if you need HTML outputed via the LiteralControl.Text element, you will need to set the Mode to "Passthrough".

protected override void CreateChildControls()
{
    base.CreateChildControls();
    LiteralControl message = new LiteralControl();

    // !! add this !!
    message.Mode = LiteralMode.PassThrough;

    message.Text = DisplayMessage; // <-- containing HTML
    Controls.Add(message);
}