Programming.NET

Moving an Existing Web Page to Tridion

| by

Introduction

The process of migrating an existing .NET web application to the Tridion CMS system can be done using a multitude of methods. Each method generally involves importing the web page data into the CMS system and exposing key pieces of functionality for manipulation of data. Through this process of “Tridionizing” a page, the existing .NET web application can remain intact with little change, yet functionality exposed to the CMS user for manipulation of content. In this tutorial, we’ll walk through the steps of Tridionizing an existing static file (namely, an XSLT file) and exposing its content for editing.

SDL Tridion Tutorial: Migrating an existing web page to Tridion

Tridionizing an Existing Static File (XSLT)

Importing an existing static file into Tridion for management by the CMS can be done by locating the target static file for editing within the .NET web application solution and then creating the required Tridion components (including a Template Building Block, Page Template, and Structure Group Page). You can tridionize an existing XSLT static file with the following steps:

Creating the Template Building Block

  1. In the Visual Studio solution, locate the target file to expose to Tridion. Note the folder path within the published web application solution, as you will be replicating the same path in the Tridion CMS system.

  2. Access the Tridion web administration application at http://your-local-tridion.com

  3. Within the proper Tridion publication, expand the folder Template Building Blocks and expand or create required folders to match the same structure as the web application publication. For example: In Visual Studio, the target file is located in xslt/main => in Tridion the target folder will be TemplateBuildingBlocks/xslt/main

  4. Create a new Template Building Block in the target folder in Tridion.

  5. For Name, enter the same file name as the Visual Studio file, for example: example.xslt

  6. Click the Source tab and for Template Type, select Dreamweaver.

  7. Paste the contents of the Visual Studio xslt file into the Template Building Block edit field. Here is an example XSLT file that can be pasted into the field:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>My CD Collection</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th>Title</th>
<th>Artist</th>
</tr>
<tr>
<td>.</td>
<td>.</td>
</tr>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
  1. Click Save and Close.

Creating the Page Template

  1. Within the proper Tridion publication, expand the folder Page Templates and expand or create required folders to match the same structure as the web application publication (and the same structure as the Template Building Block). For example: In Visual Studio, the target file is located in xslt/main => in Tridion the target folder will be Page Templates/xslt/main

  2. Create a new Page Template in the target folder in Tridion.

  3. For Name, enter the same file name as the Visual Studio file, for example: example.xslt

  4. For File Extension, enter the file’s extension, for example: xslt

  5. Click Save and Close.

  6. Run the SDL Tridion Template Builder tool (in Tridion using IE, click Tools->Template Builder)

  7. In the Template Builder Tool, click File->Open and navigate to the Target Publication->Building Blocks->Page Templates->[target folder], for example: Page Templates/xslt/main

  8. Select the Page Template created in step 2 above (example.xslt) and click OK to open the Page Template.

  9. In the center pane, delete all building blocks except for Default Finish Actions.

  10. Locate the Template Building Block created in step 4 under “Creating the Template Building Block” and drag the item into the center pane to assign it to your Page Template. The Template Building Block will be located within a blue bar having the same name as the child folder (for example “main”, for the path Template Building Blocks/xslt/main). Select example.xslt and drag it into the center pane.

  11. Click the Save button and close the Template Builder tool.

Creating the Structure Group Page

  1. Within the proper Tridion publication, expand or create required folders in the purple folder Structure Groups to match the same structure as the web application publication (and the same structure as the Template Building Block and Page Template). For example: In Visual Studio, the target file is located in xslt/main => in Tridion the target structure group will be Home/xslt/main. Note, this step is important as it will determine where the physical file will be saved to on the server.

  2. Create a new Page in the structure group folder by right-clicking in the white center pane and selecting New->Page.

  3. For Name, enter the same file name as the Visual Studio file, for example: example.xslt

  4. For File Name, enter the file name without its extension, for example: showcase

  5. For Page Template, remove the checkmark from Inherit from Parent and select in the drop-down the Page Template created in step 2 of “Creating the Page Template”. For example, select example.xslt.

  6. Click Save and Close.

Publishing the Page (Static File)

  1. Right-click the Page created in step 2 (example.xslt) in “Creating the Structure Group Page” and select Publishing->Publish.If you don’t have a publication target setup, you can simply right-click the Page and select “Preview” instead.

  2. Choose the target publication and click Publish. This will save the physical file on the web server in the target path that matches the Structure Group path. You’ve now successfully tridionized a static file and have exposed it for editing within the Tridion CMS system.

Making Changes to the Page (Static File)

The contents of the page may now be edited within Tridion and published to the web server, overwriting the default page originating in the Visual Studio solution. In this manner, other users may edit the file in Tridion to make changes to the public site, without having to make changes within Visual Studio.

To make a change to the content, edit the Template Building Block for the page. You can do this by opening Building Blocks/Template Building Blocks/xslt/main/example.xslt. In the Template Building Block, click the Source tab to change the contents of the file. Click Save and Close. To publish the changes, find the Page inside the purple structure group folder (Home/xslt/main/example.xslt). Right-click the page and select Publish (or Preview).

Conclusion

In the above tutorial, we’ve successfully walked through the steps for importing a static XSLT file into Tridion to expose it for editing by Tridion CMS users. Through the process of creating the Template Building Block, Page Template, and associated Structure Group page, we can manage physical web application files directly from within Tridion and save them to the web application server. Through the process of Tridionizing static web application files, we can help provide greater flexibility and management of existing web site content for developers and business users.

About the Author

This article was written by Kory Becker, software developer and architect, skilled in a range of technologies, including web application development, machine learning, artificial intelligence, and data science.

Share