Creating a Smart View Process through a template

About this task

A Smart View uses an XSLT step to render the HTML presentation from the incoming XML record. The easiest thing to do is to create an HTML template with hard-coded values outside Talend Studio:

<tr>
<td>Product Name</td><td>PROD NAME</td>
<!-- etc -->
</tr>

Then copy/paste this template into the body of the XSLT stylesheet in the Process editor, and replace the hard-coded value by <xsl:value-of> statements:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="1.0">  
    <xsl:output method="html" indent="yes"/>  
    <xsl:template match="/" priority="1"> 
        <html> 
            <head> 
                <title>Product</title> 
            </head>  
            <body> 
<tr>
<td>Product Name</td><td><xsl:value-of select="Product/Name"/></td>
<!-- etc -->
</tr>
            </body> 
        </html> 
   </xsl:template> 
</xsl:stylesheet>

Use, for instance, PHPform to create a web template of your form. A web template consists of one or several html files in addition to the resources (JavaScript, CSS, images, etc.). The resources must be accessible from within MDM so you need to place them in <TomcatPath>/webapps/ where <TomcatPath> designates the path where Tomcat has been installed.

Procedure

In <TomcatPath>/webapps/, create a new folder called smartview and then unzip the web template in another new folder called Product (that is, in <TomcatPath>/webapps/smartview/Product/).

Your form should now be accessible through: http://localhost:8180/smartview/Product/form.html.
Open the form in a text editor and check the html elements.
XSLT is XML, and XML is not as lenient as html. You will find start tags with no end tags (meta, img, link, etc.). Make sure all html elements are written with start and end tags.
Fix the URL to the JS, CSS and images. Change all the src attributes to point to: /smartview/Product/<resource> instead of just <resource>. For instance:
Change:
```
<script type="text/javascript" src="view.js"></script>
```
to: <script type="text/javascript" src="/smartview/Product/view.js"></script>.
Create a Smart View Process in Talend Studio as outlined in Creating a "default" Smart View of a data record and call it Smart_view_Product.
Change <xsl:template match="/"> to <xsl:template match="/Product">, assuming the entity is Product.
Copy the html code, without <!DOCTYPE>, from the html tag and paste it within the <xsl:template match="/Product"> element. Overwrite anything that was already within the <xsl:template> element:
Set the field values with the actual values extracted from theProduct record using the <xsl:value-of> statement. To ask XSLT to output an attribute, use the <xsl:attribute> statement.

Results

As an example, here is the html code before the change:

<label class="description" for="element_2">Price
</label>
<div>
    <input id="element_2" name="element_2" class="element text   medium"
type="text" maxlength="255" value=""/>
</div>

And after the change:

<label class="description" for="element_2">Price
</label>
<div>
    <input id="element_2" name="element_2" class="element text medium"
type="text" maxlength="255">
<xsl:attribute name="value"><xsl:value-of select="Price"/></xsl:attribute>
    </input>
</div>

This tells XSLT to issue a "value" attribute within the <input> tag and to fetch the value of this attribute from the Price element of the Product record.

Did this page help you?

If you find any issues with this page or its content – a typo, a missing step, or a technical error – please let us know!

Leave your feedback here