Web content in Liferay can be created with structure and template. It’s more powerful to create complex web content which is highly configurable.
I assume that you have basic knowledge of how to create simple web content and how to configure it into out of the box portlet – Web Content Display portlet.
If you are new to web content in liferay, I would suggest to get detail about simple web content from my previous blog – Create Web Content in Liferay
Before we start, let me explain what is structure,template and content in liferay.
Structure :- As its name, Structure defines the data structure of the web content.These data structure will contain the data types (like String, image, url, boolean etc.).
Template:- Template provide the template where the data structure will be arranged.
Content:- Its the textual content that will be fit in respective structure and structures will be arranged in template to form of complete Web Content.Now let us do some practical work. In my previous post Create Web Content in Liferay I have created community Nilang. So I will use the same community and going to create separate Web Content (with structure and template)
First do log-in and go to Control Panel and select Nilang community from drop-down in Content section of control panel.
Click on Web Content in content section. You may observe that the web content named “Simple Web Content” that we had created in previous post will be shown.
We will divide Web Content creation activity in three steps.
Contents
1) Creating Structure
Click on Save button to create Structure.
Explanation:-
- The first component(Text box) represents the name of the element
- Second component(Drop down) represents the type of the element (like text, text box,link etc)
- Third component(Drop down) represent whether this element is searchable or not
- Fourth component(select box) represent whether this element is repeatable or not.
- Header element as Text (Label)
- Logo element as Image
- Body element as Text Area(Where we will put HTML code
- Footer element as again Text (Label)
Now second step
2) Creating Template
Now scroll down to see more options.
Template can be written different language like Freemarker, Velocity, XSL etc. Still we can user plain HTML, Javascript and CSS while creating Template.
First we need to attach Structure for this template. Click on Select button in Structure section as shown in below screenshot. It will list down all the structure we created for Nilang community. Choose the structure that we created just now (Web Content 1) and click on Save in pop window.
You will notice the Template Editor something like as below
<style>
.center-align {
align: center;
}
</style>
<table class="center-align">
<tr>
<td class="center-align"><img src="$Logo.data"></td>
<td class="center-align"><h1>$Header.data</h1></td>
</tr>
<tr>
<td class="center-align" colspan="1">$Body.data</td>
</tr>
<tr>
<td class="center-align" colspan="1">
<h3>$Footer.data</h3>
</td>
</tr>
</table>
and click on Update button.
Explanation:-
- We are simply created one table with row and column.
- In first row, we are displaying logo image. we are getting the its value by $Logo.data expression. In this expression, Logo is the name of the component that we defined in Structure.
- Since this is Velocity template, all the component’s value will be available by its name. Component value we will give while creating Web Content.
- Similar way we are accessing other component’s value (with $<<COMPONENT_NAME>>.data expression)
Create web content with structure and template
Note:- If you are not able to see the Template (or Structure section), then you have to click on Advanced link just below the <<Back link. When these sections (Structure and Template) are opened, then the Advanced link will be converted to Basic link.
Since we already attached the Structure with Template, if we select Template, then automatically the attached Structure will be applied.
On clicking on Select button, it will show the pop up saying ‘Selecting a template will change the structure,available input fields, and available templates ? Do you want to proceed ?’. Click OK button and next new browser window will be open which will list down all template available as per below screenshot.
- Header:- (We have given type as Text in structure. So whatever value we will give in text box, it will be shown as label while displaying this Web Content .)
- Body:- (As WYSIWYG editor, because we have given type as Text Area (HTML) in Structure. So we can type HTML code and it will render when actual Web Content get displayed).
- Logo:- (We had given type as Image in Structure, so that it will ask to upload Image which will be render while actual Web Content display)
- Footer:- (We have given type as Text in Structure. So whatever value we will give in text box, it will be shown as label while displaying this Web Content .)
Now its time to give actual value in these components. You are free to give any value you want. For explanation, I am giving the following values.
- Header :- “My Own Company”
- Body:- anything you want.
- Logo:- Upload any logo size image.
- Footer:- “Copyrighted by me :)”
You will observe following options for each component we defined in Structure.
- Value
- Edit Option button from where you will find more options like tool tip and etc.
- Variable Name (defined in Structure)
- Close button (To remove it from Structure).
Note:- If you want, you can choose different Structure from Choose link.
And all this done. Try some more complex components in Structure and do some hands on for creating Web Content with the help of Structure and Template.
I would recommend looking at index page ‘A Complete Liferay Guide‘ to browse all topics about liferay.
Hi Nilang,
Similar to create web content with the help of Structure and Template. I would like to create printable document based on entered data for example we are getting data while entering data in Liferay’s Forms or creating Documents. Actually I want to generate a letter (printable) based on predefined template to the person once attached document with meta data is approved.
How is it possible? Any ides?
Thanks in Advance.
Hi Umesh,
Sorry for late response.
As per my understanding, you need to create custom portlet showing the list of document. For eachdocument,you need to define either expando (custom attribute – liferay) and then render the predefined template. Hope this help to achieve what you want.
Regards
Nilang
Dear Sir:
I created a web content article with structure and template.
To preview the web content article in Web Content Editing Page is OK ,
but it didn’t show anything except the title of the article in “Web Content Display” and “Asset Publisher” portlets
Could someone help to fix it ?
Best Regards,
Jasper Tseng
Hi Jasper,
First of all Welcome to Tech Blog and thanks for writing here. Can you please give some more details, how you are created web content ? Just share me your Structure, Template and Web content on my email id [email protected]
Regards
Nilang
Dear Nilang,
Nice article, it is simple to understand… I had a query on how the summary of the web content with “read more” link which takes the user to the asset publisher to read the entire article… basically I am working on an internal news letter, which will have a summary & read more link for the user to read the entire article
Regards,
Hi Mehtab,
Welcome to Techblog and thanks for appreciation. In this scenario, you can place access publisher portlet on some page. When any user click on ‘Read More’ button, you need to pass articleId of current web content along with the url of asset publisher. You also can open this link in model popup so that user can see full article in model pop up.
Feel free to ask questions / give suggestion / feedback
Join this blog to get updated.
Regards
Nilang
Hi, in a structure i use a selection list.
How to localize the output of selection list in a template?
Hi Andrea,
Welcome to Tech blog. when you define structure with selection list, you can define it in template. when you actually creates web content, there will be one check box called localize for each attribute of structure. You can select this checkbox for attribute you want localize.
Hope this solve your query. Feel free to ask questions / give feedback
Regards
Nilang
Hi Nilang! Nice article here. Please I’d like to how to design a template like yours, but with a read more link to display the rest of the content on a content display page, like what you have in an asset publisher.
Thanks in advance!
Hi Mattae,
Welcome to Tech blog and thanks for appreciation. Sorry but I didn’t get you exactly. Do you want me to explain how to design template ? Please clarify so that I can help you out.
Regards
Nilang
Hi, I have seen your blogs and the explanation is really great, full and clear. I like this article but I want to do something more complicated. I would like to know if in the structure I can show data from a Data Base. For example, in your structure you have a Header element, but imagine I have a ‘Header’ Table with all the headers I use. Now instead of a text box I would like to show Header element as drop down list with the options of my ‘Header’ table. Is that posible here? or is better to do it in the blog portlet?
The reason I would like to use liferay web content or blog, is because they already provide some functionalities I would like to use like publish, approval workflow and more.
Hi ,
First of welcome to Techblog and thx for appreciation. The scenario you mentioned is really interested. So far I have never pulled data from DB and shown in Content. So first of all I will look into this and then will be able to give you suggestion.
Regards
Nilang
It will be great if you can look into this and give some suggestions. In the meantime I will continue reading all your liferay post that are very interesting.
Thanks for this blog-simple and clear-helped me a newbie to understand this