Menu

Liferay 6.2: Actions on a row in Search Container

In two previous posts, I introduced to you how to show the data in table format. Fortunately, Liferay Framework provided the tools to create awesome applications. The applications made by these tools are unification. The unification is one of the factorials which make your applications better.

However, the previous tutorials, I was only focusing on displaying data. Generally, we usually do the actions on displayed data. Luckily, Liferay Framework allows do the actions on each row which are displayed by Search Container. This post is a small tutorial which helps you add the actions on one or many rows.
I will divide our problem into two categories. The first category is the action in a row and the multi-action is the second one. I will reuse the source code of this post to illustrate my work. You can get more detail at here.

Actions on a row

Implementing the actions like editing, deleting, and updating,... a viewed record in search-container are the most frequency actions. In this situation, Liferay Framework has provided the two ways for us like 1) if you have to take an action, you only create a URL with the necessary parameters, then assign this URL to the value of the href attribute. and 2) if you need to apply some actions in a row, let's declare them in search-container-column-jsp tag. I will give you the detail in each case.

Href attribute

The below image is the result of the portlet which introduced in the previous post after deploying:
Search-container shows the data by the default format
In the while, search-container only shows the data by the lines. In version 6.2, if you want to do an action on a special line, you have to provide the value for the href attribute of the search-container-column-button, search-container-column-date, search-container-column-jsp, search-container-column-text and search-container-column-status tag. If the value of the href attribute of these tags is not null, each line will have a link with the special parameters. Look at the following photo:
Search-container shows the data by the actionable format
Assume that you want to view the detail information of a student by click on a line. The following snippet will help you do it:

Let's attend to the lines from 24 to 27, if I want to show the detail information of a student, I only need to use RenderURL object (portlet:renderURL). You can use ActionURL (portlet:actionURL) or ResourceURL (portlet:resourceURL) object depend on you situations.
At line 25th: I pass into a parameter called id, it is the identity of a student and mvcPath parameter (/html/actions/detail.jsp) at like 26th. In the content of detail.jsp file, I will get the value of id parameter of the student back and show the related of him or her corresponding to the selected line.
At lines 29th, 31rt, 33rd, and 35th, I assigned a URL for the href attribute's value (for examples: viewDetailURL)

Thẻ search-container-column-jsp

We cannot assign multi-action for a href attribute. Therefor, Liferay Framework provided another way the take multi-action on a line for us. The fact, search-container-column-jsp tag allows us to include a JSP file. In this case, the included file will contain the wanted actions. The following picture is an illustration after applying it.
Multi-action on a row
As you can see, we added another column and this one contained our actions. In this scenario, three actions added into each line. They are Detail (to display the detail information), Edit (to update record's information) and Delete (to erase this record). The next snippet will explain how to do it.

This snippet only differences the above one at the line 37th. I used a <search-container:search-container-column-jsp&g tag to include action.jsp file which contains the following content:

Let's view detail this code:
  • Line 6th: The objective of it is getting the value of current SearchContainer object in action.jsp.
  • Line 8-9th: Getting Student object which corresponds to the selected line.
  • Dòng 12-30: Using <liferay-ui:icon-menu> tag to create the icons.
  • Using <liferay-ui:icon> tag to shows the icon và URL. In this case, we have three actions (two Render actions and one Action action)
Now, let's deploy your portlet on your server and get the result. You can download the full source code at here.

Action on multi-rows

To be continued

1 nhận xét: