July 6, 2008 by Alistair Deneys
One of the really nice things about Sitecore is the fact the developer has total control over the markup a particular page produces. Sitecore itself imposes no limitations or restrictions on how your markup needs to look. In fact, the dev has so much control, you don’t event have to emit markup from your pages. You could emit CSS or json as well.
Previously I have emitted both CSS and ajax responses from certain pages in Sitecore. Typically you would use a blank layout (a layout which produces no output) and contains a single placeholder. Then you can bind in a presentation element into the placeholder to produce the output desired.
In the case of CSS, you’ll probably have a single CSS item in your content tree with the default device presentation setup to serve the CSS.
<include rel="stylesheet" type="text/css" src="css.aspx"/>
This CSS would be derived from other items in the content tree, such as configuration elements. I have worked on some projects before where the carver / stylist (the person creating the CSS) wouldn’t let go of the control they had in CSS.
“me: This is a CMS. We need let let the user select the image there. Can’t you use an image tag instead of a background image?”
“them: No. It must be done through CSS <insert valid or invalid reasoning here>”
There are both good and bad reasons for doing this. But rest assured, we can still allow the user to select that image, then output the CSS for the background image from our CSS item. The presentation element to produce the CSS will most likely be a sublayout, and could be as simple as a literal on the page which we write into. I wouldn’t recommend a rendering here, simply because we’re not outputting XML.
We could always output an inline style tag to achieve this, but that doesn’t provide us the seperation of content and presentation we’re after, which is one of the reasons for using seperate CSS files for styling.
I have also serviced ajax requests on items by creating and using an ajax device. This device is normally activated using a query string such as mode=ajax. Ajax responses will normally be XML (either XML itself or an HTML fragment to stuff into an existing page element) so you could use either a sublayout or a rendering to generate the response. Most of the time I’ve used this method for loading HTML fragments into an existing page element based on some control value. So if I had a drop list which determined what content to load into some page element, I could hook into the drop lists onchange event, then fire off my ajax request based on it’s value:
I could then create a rendering which just read the GUID out of the query string using the Sitecore xslt extension function sc:qs, find the item using sc:item, and generate some markup based on that item. That output is sent back to the client which can then stuff it into the page element.
I have done this ajax thing previously using jquery, which is really powerful and easy to use. It’s as simple as using the item selector to find the page element, then telling it what URL to load from:
So I hope this has highlighted how we can generate any kind of output from Sitecore, and not just page markup. Some other things I can think of to generate: json, xml file for use with flash, rss, the list goes on.