1

Recently I've implemented XSLT that transforms any XML into the HTML tree view represented as nested unordered lists. Here is simplified version of this XSLT:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="html" indent="no"/>
    <xsl:strip-space elements="*"/>
    <xsl:template match="/">
        <html>
            <body>
                <xsl:apply-templates select="." mode="render"/>
            </body>
        </html>
    </xsl:template>
    <xsl:template match="/" mode="render">
        <div>
            <ul>
                <xsl:apply-templates mode="render"/>
            </ul>
        </div>
    </xsl:template>
    <xsl:template match="*" mode="render">
        <li>
            <span>
                <xsl:value-of select="local-name()"/>
            </span>
            <div>
                <xsl:if test="./text()">
                    <span>
                        <xsl:value-of select="translate(./text(),' ','&#160;')"/>
                    </span>
                </xsl:if>
                <xsl:if test="count(child::*)>0 or count(attribute::*)>0">
                    <ul>
                        <xsl:apply-templates select="@*" mode="render"/>
                        <xsl:apply-templates select ="*" mode="render"/>
                    </ul>
                </xsl:if>
            </div>
        </li>
    </xsl:template>
    <xsl:template match="@*" mode="render">
        <li>
            <span>
                <xsl:value-of select="local-name()"/>
            </span>
            <div>
                <span>
                    <xsl:value-of select="translate(.,' ','&#160;')"/>
                </span>
            </div>
        </li>
    </xsl:template>
</xsl:stylesheet>

Note that this XSLT does not depend on XML schema. So it can be applied to any XML. For instance given input XML

<Catalog xmlns="somenamespace">
    <CatalogName>First catalog</CatalogName>
    <Products>
        <Product id="p1">
            <Name>Some product</Name>
            <Description>foo</Description>
        </Product>
        <Product id="p2">
            <Name>Another product</Name>
            <Description>bar</Description>
        </Product>
    </Products>
</Catalog>

will create desired tree view

<html>
<body>
    <div>
        <ul>
            <li>
                <span>Catalog</span>
                <div>
                    <ul>
                        <li>
                            <span>CatalogName</span>
                            <div>
                                <span>First catalog</span>
                            </div>
                        </li>
                        <li>
                            <span>Products</span>
                            <div>
                                <ul>
                                    <li>
                                        <span>Product</span>
                                        <div>
                                            <ul>
                                                <li>
                                                    <span>id</span>
                                                    <div>
                                                        <span>p1</span>
                                                    </div>
                                                </li>
                                                <li>
                                                    <span>Name</span>
                                                    <div>
                                                        <span>Some product</span>
                                                    </div>
                                                </li>
                                                <li>
                                                    <span>Description</span>
                                                    <div>
                                                        <span>foo</span>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </li>
                                    <li>
                                        <span>Product</span>
                                        <div>
                                            <ul>
                                                <li>
                                                    <span>id</span>
                                                    <div>
                                                        <span>p2</span>
                                                    </div>
                                                </li>
                                                <li>
                                                    <span>Name</span>
                                                    <div>
                                                        <span>Another product</span>
                                                    </div>
                                                </li>
                                                <li>
                                                    <span>Description</span>
                                                    <div>
                                                        <span>bar</span>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>

The problem is that the structure of input XMl has been changed. In fact now it looks like a collection of XML documents wrapped within some root node. See example below:

<Catalogs xmlns="somenamespace">
    <Catalog>
        <CatalogName>First catalog</CatalogName>
        <Products>
            <Product id="p1.1">
                <Name>Some product</Name>
                <Description>foo</Description>
            </Product>
            <Product id="p1.2">
                <Name>Another product</Name>
                <Description>bar</Description>
            </Product>
        </Products>
    </Catalog>
    <Catalog>
        <CatalogName>Second catalog</CatalogName>
        <Products>
            <Product id="p2.1">
                <Name>Some product</Name>
                <Description>hoho</Description>
            </Product>
            <Product id="p2.2">
                <Name>Strange product</Name>
                <Description>bar</Description>
            </Product>
        </Products>
    </Catalog>
...
</Catalogs>

The requirement is that the output should be shown as a tree of "merged" collection where all different values are concatenated with a comma. See desired output:

<html>
<body>
    <div>
        <ul>
            <li>
                <span>Catalog</span>
                <div>
                    <ul>
                        <li>
                            <span>CatalogName</span>
                            <div>
                                <span>First catalog, Second catalog</span>
                            </div>
                        </li>
                        <li>
                            <span>Products</span>
                            <div>
                                <ul>
                                    <li>
                                        <span>Product</span>
                                        <div>
                                            <ul>
                                                <li>
                                                    <span>id</span>
                                                    <div>
                                                        <span>p1.1, p2.1</span>
                                                    </div>
                                                </li>
                                                <li>
                                                    <span>Name</span>
                                                    <div>
                                                        <span>Some product</span>
                                                    </div>
                                                </li>
                                                <li>
                                                    <span>Description</span>
                                                    <div>
                                                        <span>foo, hoho</span>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </li>
                                    <li>
                                        <span>Product</span>
                                        <div>
                                            <ul>
                                                <li>
                                                    <span>id</span>
                                                    <div>
                                                        <span>p1.2, p2.2</span>
                                                    </div>
                                                </li>
                                                <li>
                                                    <span>Name</span>
                                                    <div>
                                                        <span>Another product, Strange product</span>
                                                    </div>
                                                </li>
                                                <li>
                                                    <span>Description</span>
                                                    <div>
                                                        <span>bar</span>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>

Note that XSLT still must be "schema free". I'm stuck on this issue. The only one solution i see is to use msxsl:script. But it is not desirable since in this case XSLT may not work outside my application.

Any ideas?

Zazik
  • 11
  • 2
  • External links are usually a problem as it turns out for the first desired HTML output which cannot be loaded. Could you make your question self-sufficient by including simplified HTML outputs into your question. – Marcus Rickert Jul 11 '14 at 22:31

0 Answers0