XSLT FAQ

How to build IE Web Slices in minutes?

I have created a rendering using XSLT and I would like to turn this into a web slice. Can I do this with C1?

Answer:

Yes, you can do it in C1. In short, you should first make your rendering function public and available for calls via URLs. Then you should create a web slice and link it to the URL that calls your function.

Let’s see how to create a Web Slice based on the Composite.News.Latest function from the Composite.News package.

  1. Install the Composite.News package.
  2. Make the Composite.News.Latest function available for calls via an URL in a web browser as described in Can I call C1 Functions from JavaScript or Flash?
    Once done, you will be able to call the function as http://localhost/Composite.News.Latest.ashx.
  3. In the Composite.News.Latest function, specify the hslice class (class=”hslice”) and web slice ID (id="SliceID") for the content to be shown in the web slice. This hslice class identifies a Web Slice for IE8. In the sample below, we have added these two attributes to the existing element.
  4. Specify the web slice’s title by using the entry-title class (for example, <h1 class="entry-title">Latest News</h1>)
<div class="hslice NewsLatest" id="SliceID">
  <h1 class="entry-title">Latest News</h1>
  <!-- IE8 Webslice tag -->
  <a rel="entry-content" href="/Composite.News.Latest.ashx?NewsArchive=80eb15d0-ff67-4050-a5f6-2cf8ab2205cf&amp;NewsDetails=5807d1e5-0769-44d8-a473-f9a01567a1f8" style="display:none;">Alternative Display Source</a>
  <!-- your markup here -->
</div>

You must replace the GUIDs used with the NewsArchive and NewsDetails parameters in the sample above with your own used on your website.

Read more on Web Slice Format Specification at MSDN .

Customization

You can customize the way the web slice looks by using a standalone CSS for the function it is based on (Composite.News.Latest in our example):

  1. Create a CSS for your web slice.
  2. Add an input parameter called StandAlone of the Boolean type to the function and set its default value to false.
  3. In the XSLT function, test this input parameter: if true, use a standalone CSS.
    <xsl:if test="/in:inputs/in:param[@name='StandAlone']='true'" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
      <link rel="stylesheet" type="text/css" href="~/Frontend/Styles/WebSlices.css" />
    </xsl:if>

    (You should replace the paths to CSS files with your own used on your website.)
  4. When calling the function via the URL, pass the StandAlone parameter and set it to true.

<a rel="entry-content" 
   href="/Composite.News.Latest.ashx?StandAlone=true&amp;NewsArchive=80eb15d0-ff67-4050-a5f6-2cf8ab2205cf&amp;NewsDetails=5807d1e5-0769-44d8-a473-f9a01567a1f8" 
   style="display:none;">Alternative Display Source</a>