dotCMS - Open Source Content Management System, Ondemand CMS, and Professional Support

Creating a Detail Page

Before attempting to create a dynamic pull of content and a detail page, you may wish to view Velocity, Macros and dotCMS documentation that introduces users to Velocity code and how to use dotCMS Macros.  If you are already familiar with these concepts, the tutorial below shows how to create a pull of content that feeds the main body detail section of the HTML page.  After mastering the technique below you should be able to create dynamic pulls and respective detail pages throughout your website.

Step One: The first step in creating a detail page is to choose a type of structured content that will be listed dynamically on the page.  This example uses pulls content from the "News Item" structure that is downloaded with the dotCMS starter site, but ANY type of structured content can be pulled in the same way.  You will need to make sure that there are at least a few pieces of content created using the structure that will be used in the dynamic pulls on the detail page. This example uses the News Item Structure provided by the starter site to connect a dynamic listing to the detail page in the main body

Step Two:  Create a dynamic listing of content.  As a best practice, Velocity code should be placed in a re-usable Widget (as in this example), however, the Velocity code shown below may also be placed directly in a container or in a piece of webpage content. The example code below has been placed in a Widget Structure Type that allows the content contributor to pass a parameter to determine the maximum number of news items to return and passes a content identifier in the URL to the "/news/index.dot" HTML page.  For more information, please see the documentation section on Adding a Widget Structure Type.

#pullContent('+structureInode:5 +languageId:1* +deleted:false +live:true' $maxArticles 'date1') 
<h2>Recent News</h2>
<dl>
	#foreach($content in $list) 
		<dt><a href="/news/index.dot?id=$!{content.identifier}">$!content.NewsHeadline #editContentlet($content.inode)</a></dt>
		<dd>
			<em>$UtilMethods.dateToHTMLDate($UtilMethods.jdbcToDate($content.NewsPublishDateDBFormat),'MMM dd, yy')</em><br />
			$!content.NewsSummary
		</dd>
	#end
</dl>

#end

After placing the code in the Widget Structure Type, a new Widget has been placed the right hand container of the HTML page shown below.

Step Third:   After creating the Widget with the dynamic code above and placing it in one Container, create a detail page that recieves the content identifier and displays the detail of the contentlet, in this case, the "NewsHeadline" and "NewsBody" fields. For the purposes of this example, the detail page code has been placed in the main body Container in the center of the page.

#if($request.getParameter("id"))
	#set($id = $request.getParameter('id'))
	#getContentMapDetailByIdentifier($id)
#else
	#pullContent('+structureInode:5 +languageId:1* +deleted:false +live:true' '1' 'date1')
#end

<h2>$!content.NewsHeadline #editContentlet($content.inode)</h2>
<h4>$UtilMethods.dateToHTMLDate($UtilMethods.jdbcToDate($content.NewsPublishDateDBFormat),'MMM dd, yyyy')</h4>

<br>
<br>
<p>$!content.NewsBody</p>

<hr />

After adding the detail page code in the main body, this example can be tested by clicking on one of the news article headlines in the right hand container that will cause the main body of the page to display the detail of the content shown below.