Now that we have created a new document type, we need to prepare the transformations that will be used for displaying product details in a list and in a detail view.
In the Computer document type properties dialog, click the Transformations tab:
As you can see, the wizard has created some default transformations. We will use them for our detail view. Edit the Default transformation, clear the default code and enter the following code:
<h1> <%# Eval("ComputerName") %> </h1> <table> <tr> <td> Processor: </td> <td> <%# Eval("ComputerProcessorType") %> </td> </tr> <tr> <td> RAM (MB): </td> <td> <%# Eval("ComputerRamSize") %> </td> </tr> <tr> <td> HDD (GB): </td> <td> <%# Eval("ComputerHddSize") %> </td> </tr> <tr> <td> Image: </td> <td> <%# GetImage("ComputerImage") %> </td> </tr> </table> |
Click Save. As you can see the transformation code is the standard ItemTemplate code that you may already know from ASP.NET 2.0 Repeater and DataList controls. It combines HTML code with ASP.NET commands and data binding expressions. You can use several built-in functions, such as GetImage that simplify some tasks. You can find the list of the most important functions directly under the transformation code.
Now we will create transformation for the list of computers. Go back to the transformation list and edit the Preview transformation. Clear the default code and enter the following code:
<div style="text-align:center;border: 1px solid #CCCCCC"> <h2> <a href="<%# GetDocumentUrl() %>"><%# Eval("ComputerName") %></a> <h2> <img src="<%# GetFileUrl("ComputerImage") %>?maxsidesize=120" /> </div> |
Click OK.
Please note how the link to the document is created:
<a href="<%# GetDocumentUrl() %>"><%# Eval("ComputerName") %></a> |
It consists of standard HTML tags for links and it inserts the URL and link text dynamically.
Similarly, you can create an image tag with parameter that ensures automatic resize of the longest side to 120 pixels on the server side:
<img src="<%# GetFileUrl("ComputerImage") %>?maxsidesize=120" /> |
You have learned how to write transformations for displaying the content of structured documents.