Programming.NET

Creating a Basic Web Page in SDL Tridion

| by

Introduction

SDL Tridion is a CMS content management system, used for creating modular web page components and serving web-based content. Through the creation of individual building blocks and components, developers can implement a web site and allow business users to manipulate layout and content. In this tutorial, we’ll walk through the steps of creating a basic web page in Tridion. We’ll create a Tridion publication (web site), a web page template, and necessary building blocks and components for supporting a simple web page.

SDL Tridion Tutorial: Creating a basic web page

Creating a Publication Web Site

A Tridion Publication serves as a web site container, hosting the available web pages, templates, building blocks, components, images, and static content used in hosting a web site. You can create a new Publication with the following steps:

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

  2. In the left-hand menu, select “Content Explorer”.

  3. Under the left-hand frame “Publications”, right-click Content Management, select New->Publication. The Publication will serve as a web site, containing web pages, building blocks, and components.

  4. Enter a Name for your web site, such as “Demo Web Site”.

  5. Enter a Publication Key for your web site, such as “Demo_Web_Site”.

  6. For “Type”, select Web.

  7. For Publication Path, enter \

  8. For Publication URL, enter /

  9. For Images Path, enter \Images

  10. For Images URL, enter /Images

  11. Click Save and Close.

Creating a Web Page Structure Group

The Tridion Structure Group serves as a container for web pages. You can create a new Structure Group, as follows:

  1. In the left-hand frame “Publication”, select the publication that you created above, such as “Demo Web Site”.

  2. Right-click the Publication and select New->Structure Group.

  3. For “Name”, enter the root web site folder name, such as “Home”.

  4. Leave the remaining values as default and click Save and Close.

Creating a Web Page Template Building Block

The next step in the development of a web page is to create a web page template. However, before creating the actual Tridion template, we’ll need to design the HTML layout. We can do this by creating a template building block, as follows:

  1. Select the publication that you created in the above steps, such as “Demo Web Site”.

  2. Right-click on the Building Blocks folder and select New->Folder.

  3. For “Name”, enter “Web Page Templates”.

  4. Leave the remaining values as default and click “Save and Close”.

  5. Double-click the folder “Building Blocks” to reveal the new folder “Web Page Templates”.

  6. Right-click on the folder “Web Page Templates” and select New->Template Building Block.

  7. For “Name”, enter the name of the building block, such as “Demo Page Layout”.

  8. Click the Source tab.

  9. Under “Template Type”, select Dreamweaver.

  10. Delete the XML content in the text field and enter your desired web page template HTML. For this example, we’ll use the following HTML content:

1
2
3
4
5
6
7
8
9
10
11
<head>
<title>@@Page.FriendlyTitle@@</title>
<meta name="Keywords" content="@@Page.Keywords@@" />
<meta name="Description" content="@@Page.Description@@" />
</head>
<body>
<p>Hello, World!</p>
<!--TemplateBeginRepeat name="Components" -->
@@RenderComponentPresentation()@@
<!--TemplateEndRepeat -->
</body>
  1. Click Save and Close.

Notice in step 10, we’ve included several variables within the HTML layout. Tridion variables are denoted by surrounding the term with @@. In particular, the above variables will be pulled from a page metadata schema, which we’ll be creating a little later in the tutorial. We’ve also included a method to display all components in the web page. The method RenderComponentPresentation, along with the enclosing comments, will loop through any components added to our final web page and display them.

Creating a Page Template

With our template building block defined, we can now create a Page Template to serve as our web page layout. A Tridion page template is a generic HTML container for hosting the web page components and content. A page template can be created, as follows:

  1. Right-click on the folder “Web Page Templates” and select New->Page Template.

  2. For “Name”, enter the name of your web page template, such as “Demo Page Template”.

  3. For “File Extension”, enter the desired extension (visible to the public in the URL), such as “html”.

  4. Leave the remaining values as default and click “Save and Close”.

  5. We’ll now need to connect the Page Template to our Template Building Block. You can begin this by clicking the Tools tab in Tridion.

  6. Click the button Template Builder to launch the template builder application._Note, you may need to use Internet Explorer 11 when installing the Template Builder tool (Chrome and Firefox may not launch the installer).

  7. In the Template Builder, click the button Open Existing Compound Template.

  8. To select the location, navigate to your publication, such as “Demo Web Site”, double-click on Building Blocks->Web Page Templates, and select Demo Page Template to edit.

The Template Builder allows you to drag and drop building blocks, which in turn, manipulate the HTML content displayed on the page. When executing the building blocks, Tridion follows from top to bottom in manipulation of the resulting output HTML. In this manner, additional building blocks (such as HTML or even .NET class assemblies) can get a chance to operate on the Tridion output, choosing to modify the resulting HTML or add variables to the Tridion stack (used by subsequent building blocks in modifying the HTML output). We’ll create our web page template, as follows:

  1. Delete all building blocks from the center white-pane list to start with a blank template.

  2. On the left-side, under Web Page Templates, you’ll see our newly created building block. Select Demo Page Layout and drag it into the center white pane. This adds our HTML layout building block to the template.

  3. Under Default Templates, select Default Finish Actions and drag it into the center white pane so that it appears at the bottom of the list.

  4. Click the Save button and exit the Template Builder.

Creating a Web Page Metadata Schema

We’re almost ready to create our web page. However, it’s always a good idea to include web page metadata within the page content. Metadata typically includes a title, description, and keywords. Metadata is particularly important for search engine optimization functionality. We’ll implement web page metadata by creating a Tridion Schema, as follows:

  1. In Tridion, right-click the Web Page Templates folder in your publication and select New->Schema.

  2. For “Name”, enter Page Metadata.

  3. For “Description”, enter Web Page Meta Data.

  4. For “Schema Type”, selectMetadata Schema.

  5. Click the Metadata Design tab to begin adding variables.

  6. Click the Add button.

  7. For “XML Name” and “Description”, enter FriendlyTitle.

  8. Leave the default values for Type as Text and checkmark Mandatory.

  9. Repeat steps 6-7, replacing “FriendlyTitle” with “Description” and “Keywords” respectively. Uncheckmark the Mandatory box for these variables, as they will be optional.

  10. For the variable Keywords, checkmark the option Allow Multiple Values. This will allow multiple keywords to be entered. When displaying the keywords as a single variable in the HTML, Tridion will, by default, display them in a comma-delimited line of text.

  11. Click Save and Close.

Finally, Creating the Web Page

With our building block, template, and schema defined, we can now create the web page, as follows:

  1. Right-click the structure group “Home” and select New->Page.

  2. For “Name”, enter the name of your web page, such as “index”.

  3. For “File Name”, enter the physical filename for your web page, such as “index”.

  4. Uncheckmark the option “Inherit from Parent”, as we’ll be selecting our own custom web page layout.

  5. In the drop-down “Page Template”, select our newly created template, “Demo Page Template”.

  6. In the drop-down “Metadata Schema”, select our newly created schema, “Page Metadata”.

  7. A block of text fields will display after including the schema, allowing us to enter web page meta data variables. Fill in the text fields by entering a title, description, and keywords.

  8. Click Save and Close.

We’ve now successfully created a web page in Tridion. You can preview the result by selecting the structure group “Home”, then right-click the page “index” and selecting Preview. A window will display, showing your resulting HTML (from the Demo Page Layout template building block). You should see the text, “Hello, World!” displayed. If you click on the Source tab, you can also see the web page meta tags included in the HTML source (from the Page Metadata schema).

You can take this a step further and publish the page to your web server, if your IT administrator has Tridion setup to publish files. Just right-click the page “index” and select Publishing->Publish. If a publication target has been configured, the dialog’s publish button will be enabled for clicking.

Conclusion

In the above tutorial, we’ve successfully walkthrough through the steps for creating a new Tridion Publication, a Folder to hold our web page templates, a Structure Group to host our web site files, a Template Building Block to hold our HTML layout, a Page Template to host our building block, a Schema to collect our web page metadata, and a Page to serve as the actual web page. By connecting the pieces together, we’ve implemented a modular and configurable web page.

If you open the Page “index”, you’ll notice that we’ve only used the “General” tab to include our basic web page information. However, by viewing the Component Presentations tab, you can access the options for including additional components and controls within the page (rendered via RenderComponentPresentation as described in Creating a Web Page Template Building Block). Creating components follows a similar pattern as our web page template, with the final step being to create a Component object rather than a Page. Components may then be combined with Component templates and inserted into the web page via the Component Presentation tab.

The above steps are just the beginning for creating, implementing, and enhancing a web page in Tridion.

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