server side include logic

Posted: 24 July 2009 in Architecture, Components, layouts, LiveSite, Pages, SitePublisher, Sites, XSL
Tags: , , , , ,

If you want to have a section of a page, for example the footer, created in teamsite but transformed as a server side include (following our example, the file to include would be “footer.shtml” on the presentation tier, the method for it is surprisingly easy.

First, create a footer component and add some HTML in it through the appearance xsl, say

<xsl:template match="/">
<div>footer goes here</div>
</xsl:template>

Then, add a boolean datum (preferably on the appearance xml box), to indicate if you want to  perform an include or display the content.

<Datum ID="include" Type="Boolean" Name="Include">true</Datum>

Add a choose statement to look at the value of the datum to perform the include. We also only want to perform the include on the final resulting page, not when we’re previewing. When we preview, we want to see the content normally.

<xsl:template match="/">
<xsl:choose>
            <xsl:when test="(/Properties/@Admin = 'true' or /Properties/Datum[@ID='include'] = 'false')">
                  <div>footer goes here</div>
            </xsl:when>
            <xsl:otherwise>
                  <div>include should go here</div>
            </xsl:otherwise>

</xsl:template>

Save the component and submit it. Next, we’ll create two pages in our site. One called footer.page which we will use to generate footer.shtml, and sample.page wich we use to represent one of your pages that will have an include in it.

On footer.page, add the footer component and make sure its include setting on the appearance tab is set to no. Save and generate the page footer.shtml. You can look at the source (actions > view source). It should have the text “footer goes here”. The only thing is, it needs to have a different layout that does not include all the HTML stuff we don’t want, like another header and stuff like that, so you need to create a new layout that does that. You can find some instructions on it on this article I wrote to modify some meta headers (but the method is the same – I’ll write an article on creating layouts on its own soon).

On sample.page, add the footer component and make sure its include setting on the appearance tab is set to yes.  Save and generate sample.shtml. you can look at the source (actions > view source). It should have the text “include should go here”.

Our pages are nearly ready, the logic is working but we don’t actually have an include directive yet.

Edit the footer component and replace in the appearance xsl box the div for the include until you have this xsl:

<xsl:template match="/">
<xsl:choose>
            <xsl:when test="(/Properties/@Admin = 'true' or /Properties/Datum[@ID='include'] = 'false')">
                  <div>footer goes here</div>
            </xsl:when>
            <xsl:otherwise>
                  <xsl:variable name="include_directive">/footer.shtml</xsl:variable>
                  <xsl:text disable-output-escaping="yes"><![CDATA[<!--#include virtual="]]></xsl:text>
                  <xsl:value-of select="$include_directive" />
                  <xsl:text disable-output-escaping="yes"><![CDATA[" -->]]></xsl:text>
            </xsl:otherwise>
</xsl:choose>

</xsl:template>

Save and submit the component, get the latest component for the footer.page and sample.page and regerate footer.page and sample.page again. This time, sample.shtml should have an include directive that actually does something. (you may have to change the page to match your own path to footer.shtml).

Note: you may have to generate the files as html and rename them (manually or through a workflow) or configure sitepublisher to generate files as .shtml.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s