This website uses cookies to ensure you get the best experience. Learn More.
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 ) {
3. Create a structure as shown below, I named it "Dynamic Viewer Structure", it has only one item named "Body" with type "TextArea".
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>
5. Create a web content and apply the template. Leave everything else by default.
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.
Have a great day!
Gwowen Fu