Tutorial - Make dynamic content viewer possible

This seems to be a basic function. One of my portlet has a list of web content links and when a link is clicked, the web content will be displayed in another Web Content Display portlet.

I am a Java developer but The basic idea is to send the article ID from one portlet to another, make a JSONWS call to retrieve the article, and replace the content on the target portlet.

 

1. Use custom article ID

This is not required but it is easier to remember the ID. Add this line to portal-ext.properties to make article customizable.

journal.article.force.autogenerate.id=false 

 

2. Create a Javascript function to trigger the event

When an article is selected, we need to pass the article ID to the target portlet (I call it "Dynamic Content Viewer").

Liferay Javascript APIs provides an easy way to do inter portlets communication, these APIs are Liferay.fire and Liferay.on.

 

function go( articleID ) {

  Liferay.fire('selectedArticle', { articleId : articleID });
  return false;
}
 
The go function will fire 'selectedArticle' event with a data map.

 

3. Create a structure as shown below, I named it "Dynamic Viewer Structure", it has only one item named "Body" with type "TextArea".

Structure

 

4. Create a template, and launch the editor to enter script. Depends on CE or EE, use the corresponding portlet id. The Liferay.on() function will capture the 'selectedArticle' event and the callback function will pass in an object that contains your data. Our articleid can be accessed as data.articleId. Inside the callback function I make a JSON web service call

Liferay.Service.Journal.JournalArticle.getArticle(groupId, articleId) to retrieve the article. Then I use jQuery to find the article content and the 'journal-content-article' element to replace it with the new content.

 

List 1. This template works for web conten without template applied.

#set ($portletId = "p_p_id_" + "$request.theme-display.portlet-display.id" + "_")

 

<script type="text/javascript">

 

Liferay.on('selectedRole', function(data) {

 AUI().use('liferay-service', function(a) {

  Liferay.Service.Journal.JournalArticle.getArticle(

  {

    groudId: themeDisplay.getScopeGroupId(),

    articleId : data.articleId

  },

  function(article) {

 

    var content = article.content.replace(/>\s+</g, '><');

    var from = content.indexOf("[CDATA[");

    var to   = content.indexOf("]]>", from);

    content  = content.substring(from + 7, to);

 

    $('#$portletId').find('.journal-content-article').html(content);

  });

 });

});

 

</script>

 
 
List 2 . This template works for web conten with template applied. Works for Chrome and Firefox.
 
## CE
#set ($portletId = "p_p_id_" + "$request.theme-display.portlet-display.id" + "_")
 
## EE
##set ($portletId = "portlet_" + "$request.theme-display.portlet-display.id")
 
<script type="text/javascript">
 
Liferay.on('selectedArticle', function(data) {
 
AUI().use("liferay-service", function(a) {
 
 Liferay.Service.Journal.JournalArticle.getArticle(
  {
    groudId: themeDisplay.getScopeGroupId(),
    articleId : data.articleId
  },
  function(article) {
    var content = article.content.replace(/>\s+</g, '><');
    var staticContent = jQuery.trim($(content).find('static-content').html());
    staticContent = staticContent.replace(/]]>$/, '');
 
    if (staticContent.length == 0) {
      var temp = jQuery.parseXML(content);
      staticContent = $(temp).find('dynamic-element[name="Body"] dynamic-content').html();
    }
 
    $('#$portletId').find('.journal-content-article').html(staticContent);
  });
 });
});
 
</script>
 

 

Template

 

5. Create a web content and apply the template. Leave everything else by default. 

Web Content

 

6. The final step. Add two Web Content Display Portlets to the page and select the web content you just created for each portlet. In my first portlet, when I select "Article 1" from the dropdown and click on "Go". It will call the "go" function to trigger the "selectedArticle" event. Then in the second Web Content Display portlet, it will display the content from Article 1. Here the content is just "Article 1" from the selected web content.

Portlets

 

Have a great day!

Gwowen Fu

0