km / sitecore

Flash integration

Working on my first Sitecore 6 project, I was able to have some fun with flash integration.  The flash file was already provided for us from a third party, the XML feed was provided for us also, however we had to generate this dynamically with particular content in Sitecore using the format that was given to us.

With the help from my colleague Peter, we first created a blank template “XML Feed” that had no fields. Then created a layout with a single placeholder “xml” and on page load added the following:

Response.ContentType = "text/xml";

The template and the layout were both created outside of the site we were working on so they can be used globally from our CommonClient solution we also created.

In the content tree, there is a folder that holds the feeds, each feed is based on the XML Feed template and assigned the XML Feed layout. For this example, the rendering “PlacesMapFeed” is assigned to the xml placeholder to the XML Feed layout. This rendering will be gathering items under its parent “Places to Visit” that are a number of regions in New Zealand.

XML feed:

 <regions>
   ..
   <region id="6">
      <title url="http://localhost/regions/lowerNorthIsland.aspx>
      <links>
         <link>
             <title url="http://localhost/regions/oldStPauls.aspx>
             <linkURL>http://localhost/regions/oldStPauls.aspx</linkURL>
         </link>
         ..
      </links>
     </region>

   <region id="7">
      ..
   </region>
  </regions>

Items:

The items below, each <region></region> has a <link></link> or a certain place under that region:

In the flash file, each region has their own region id number, to ensure the correct region matches their region id number, the configuration item “PlacesMapRegions” has the names of the regions in order of their region number so they match (Lower North Island region should be id=6:

Rendering:

Variables:

<!-- variables -->
<xsl:variable name="root" select="$sc_item/ancestor-or-self::item[../../@key='sitecore']"/>
<xsl:variable name="home" select="$root/item[@key='home']"/>
<xsl:variable name="configItems" select="$root/item[@key='settings']/item[@key='configuration items']"/>
<xsl:variable name="regionIndex" select="sc:fld('Text',$configItems/item[@key='placesmapregions'])" />
<xsl:variable name="placesToVisit" select="$home/item[@key='placestovisit']"/>





Main:
<xsl:template match="*" mode="main">
  <regions>
    <xsl:for-each select="sc:SplitValue($regionIndex)">
      <region id="{position()-1}">
        <xsl:call-template name="getRegionItem">
          <xsl:with-param name="regionName" select="."></xsl:with-param>
        </xsl:call-template>
      </region>
    </xsl:for-each>
  </regions>
</xsl:template>

getRegionItem:
<xsl:template name="getRegionItem">
<xsl:param name="regionName"/>
<xsl:variable name="regionItem" select="$placesToVisit/item[@key=sc:ToLower($regionName)]"/>  

<title url="{sc:path($regionItem)}">
  <xsl:call-template name="text">
    <xsl:with-param name="itm" select="sc:item($regionItem/@id,.)"></xsl:with-param>
  </xsl:call-template>
</title>
<links>
  <xsl:call-template name="displayLinks">
    <xsl:with-param name="regionItem" select="$regionItem"></xsl:with-param>
  </xsl:call-template>
</links>
</xsl:template>

displayLinks:
<xsl:template name="displayLinks">
  <xsl:param name="regionItem"/>
  <xsl:variable name="placeToVisitItem" select="$regionItem/item[@template='place to visit']"/>

  <xsl:for-each select="$placeToVisitItem">
    <xsl:if test=".!=''">
      <link>
        <title url="{sc:path($placeToVisitItem)}">
          <xsl:call-template name="text">
            <xsl:with-param name="itm" select="."></xsl:with-param>
          </xsl:call-template>
        </title>
        <linkURL>
          <xsl:value-of select="sc:path(.)"/>
        </linkURL>
      </link>
    </xsl:if>
  </xsl:for-each>
</xsl:template>

Text:
<xsl:template name="text">
  <xsl:param name="itm" select="." />

  <xsl:choose>
    <xsl:when test="sc:fld('Navigation Title',$itm)!=''">
      <xsl:value-of select="sc:fld('Navigation Title',$itm)" />
    </xsl:when>
    <xsl:when test="sc:fld('Page Title',$itm)!=''">
      <xsl:value-of select="sc:fld('Page Title',$itm)" />
    </xsl:when>
    <xsl:when test="sc:fld('__Display Name',$itm)!=''">
      <xsl:value-of select="sc:fld('__Display Name',$itm)" />
    </xsl:when>
    <xsl:otherwise>
      <xsl:value-of select="@name" />
    </xsl:otherwise>
  </xsl:choose>
</xsl:template>

The flash file shows the region and its places:

Finally, in our General Layout we reference the flash feed:

<script type="text/javascript">
	// map
	var flashVars2 = {
	configXML: "/Feeds/PlacesMapFeed.aspx" ,
	debug:"true"
	};
	swfobject.embedSWF("/destinations/flash/large_map.swf", "flash_map", "478", "670", "9.0.0", "/destinations/flash/expressInstall.swf" , flashVars2);
</script>

That was it! Was fun and worked nicely :)

2pm