Liferay : Advance Web Content Structures and Templates

The post details about the functionality to have multiple views for a web content article.

Currently only one view can be rendered for a article, but in real word scenarios there are occasions when different view are needed for the same content on same or different pages in Liferay.
Below are the steps with detailed code to achieve the above feature:

Step 1:
Create a new structure

<?xml version="1.0"?>

<root>
 <dynamic-element name="Name" type="text" index-type="" repeatable="false">
  <meta-data>
   <entry name="displayAsTooltip"><![CDATA[true]]></entry>
   <entry name="required"><![CDATA[true]]></entry>
   <entry name="instructions"><![CDATA[]]></entry>
   <entry name="label"><![CDATA[Name]]></entry>
   <entry name="predefinedValue"><![CDATA[]]></entry>
  </meta-data>
 </dynamic-element>
 <dynamic-element name="Address" type="text" index-type="" repeatable="false">
  <meta-data>
   <entry name="displayAsTooltip"><![CDATA[false]]></entry>
   <entry name="required"><![CDATA[true]]></entry>
   <entry name="instructions"><![CDATA[]]></entry>
   <entry name="label"><![CDATA[Address]]></entry>
   <entry name="predefinedValue"><![CDATA[]]></entry>
  </meta-data>
 </dynamic-element>
</root>

Step 2:
Create a new template

<p>
 <span style="font-size: 12px; ">
  <em><strong>Name: </strong>${Name.getData()}</em>
 </span>
</p>
<p>
 <span style="font-size: 12px; ">
  <em><strong>Address:</strong>${Address.getData()}</em>
 </span>
</p>

Step 3:
Create a web content based on structure and template created in step 1 and step 2. Populate some data in the web content.

Now our focus will be to create a new view for the content created in above in step 3

Step 4:
Thus create a new structure which will be dummy structure and fields here will not be relevant

<?xml version="1.0"?>

<root>
 <dynamic-element name="Dummy" type="text" index-type="" repeatable="false">
  <meta-data>
   <entry name="displayAsTooltip"><![CDATA[true]]></entry>
   <entry name="required"><![CDATA[true]]></entry>
   <entry name="instructions"><![CDATA[]]></entry>
   <entry name="label"><![CDATA[Dummy]]></entry>
   <entry name="predefinedValue"><![CDATA[]]></entry>
  </meta-data>
 </dynamic-element>

</root>

Step 5:
Create a new template, based upon structure creates in step 4, and will be considered as second view of the content created in step 3:

#set ($articleId = "10813")

#set ($renderUrl  = $request.render-url)
#set ($namespace = $request.portlet-namespace)
#set ($groupId = $getterUtil.getLong($groupId))

##
## Getting services
##
#set ($journalArticleService = 
 $serviceLocator.findService('com.liferay.portlet.journal.service.JournalArticleLocalService'))


#set ($article = $journalArticleService.getLatestArticle($groupId,$articleId))

<h3>Details</h3>
<br />
<table class="taglib-search-iterator">
 <tr class="results-header">
  <th class="col-1">Name</th>
  <th class="col-1">Address</th>
 </tr>
  
       #set ($document = $saxReaderUtil.read($article.content))
       #set ($root = $document.getRootElement())
       
       #set ($nameD = 
         $root.selectSingleNode(
           "dynamic-element[@name='Name']/dynamic-content"))
           
       #set ($addressD = 
         $root.selectSingleNode(
           "dynamic-element[@name='Address']/dynamic-content"))


   
      <tr class="results-row first">
       <td class="align-left col-1 valign-left">
       ${nameD.text}
       </td>

            <td class="align-left col-2 valign-middle">
           ${addressD.text}
       </td>

      </tr>
                   
</table>

Here $articleId is the article id of the content created in step 3.

Step 6:
Create a web content based on structure and template created in step 4 and step 5. The purpose of this content will be to display the data from the content created in step 3.