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
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.
1) Creating Structure
Click on Save button to create Structure.
- 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.
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
<span style="font-family: inherit;"><style>
<td class="center-align"><img src="$Logo.data"></td>
<td class="center-align" colspan="1">$Body.data</td>
<td class="center-align" colspan="1">
and click on Update button.
- 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.
- 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.