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.
- Install the Composite.News package.
- 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 ashttp://localhost/Composite.News.Latest.ashx
. - In the
Composite.News.Latest
function, specify thehslice
class (class=”hslice”
) and web slice ID (id="SliceID"
) for the content to be shown in the web slice. Thishslice
class identifies a Web Slice for IE8. In the sample below, we have added these two attributes to the existing element. - 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&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):
- Create a CSS for your web slice.
- Add an input parameter called
StandAlone
of the Boolean type to the function and set its default value to false. - 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.) 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&NewsArchive=80eb15d0-ff67-4050-a5f6-2cf8ab2205cf&NewsDetails=5807d1e5-0769-44d8-a473-f9a01567a1f8" style="display:none;">Alternative Display Source</a>