Dynamically Display liferay-search-container columns based on Arraylist?

Question

I am trying to display the columns of liferay grid dynamically. For the same reason with reference to some suggestion from the following link, Dynamic columns in liferay-ui:search-container?, I am giving an option to the user to selected required columns of the table in the configuration page. The selected columns of the config page are saving in the array list.

Issue: Now I need to display the columns based on the array list values. Instead hard coding the column properties I need to iterate the list and display the selected column in the table/grid.

Let's assume I am working on liferay default USER_ model. All the selected columns of the config page are saving in one list as follows,

ArrayList<String> al = new ArrayList<String>();
    Iterator<String> itr = al.iterator();
    while(itr.hasNext())
    {
            String columnName = itr.next();
            columnName = columnName.trim().toLowerCase();

            String columnVal = portletPreferences.getValue(columnName, StringPool.BLANK);
       al.add(columnName);
    }

Now let's assume that the user has selected the following columns in the config page {First Name, Last Name, Screen Name}. So the list will contain only these three values.

Based on this elected columns I need to dynamically create the columns [ <liferay-ui:search-container-column-text>] in the search container.

<liferay-ui:search-container delta="5" emptyResultsMessage="no-users-were-found">
        <liferay-ui:search-container-results
                 results="<%= ListUtil.subList(users, searchContainer.getStart(),searchContainer.getEnd()) %>"
        total="<%= totalNoOfUsers %>">    
    </liferay-ui:search-container-results>
    <liferay-ui:search-container-row className="com.liferay.portal.model.User" keyProperty="userId"        modelVar="user">

      </liferay-ui:search-container-row>

      <liferay-ui:search-iterator />

</liferay-ui:search-container>

How can I create the columns with hard coding as follows,

<liferay-ui:search-container-column-text name="Last Name" value="<%= user.getLastName() %>">
        </liferay-ui:search-container-column-text>

Need some suggestions, Thanks in advance

Answer 1

You can use the <c:foreach> or scriptlet for to traverse the ArrayList of column names, as follows:

Here entryColumns is the ArrayList of columns you saved.

<%
for(String columnName : entryColumns) {
%>

    <c:choose>
        <c:when test='<%= "firstName".equals(columnName) %>'>
            <liferay-ui:search-container-column-text name="First Name"> value="<%= user.getFirstName() %>" />
        </c:when>
        <c:when test='<%= "lastName".equals(columnName) %>'>
            <liferay-ui:search-container-column-text name="Last Name"> value="<%= user.getFirstName() %>" />
        </c:when>
        <c:when test='<%= "birthDate".equals(columnName) %>'>
            <liferay-ui:search-container-column-text name="Birth Date">
                <fmt:formatDate value="<%= user.getBirthDate() %>" pattern="dd MMM yyyy" />
            </liferay-ui:search-container-column-text>
        </c:when>
    </c:choose>

<%
}
%>

If you are not a fan of scriptlets than you can use something like:

<c:foreach items="${entryColumns}" var="columnName">
    <c:choose>
        <c:when test='${"firstName" eq columnName}'>
            <liferay-ui:search-container-column-text name="First Name"> value="<%= user.getFirstName() %>" />
        </c:when>
    </c:choose>
</c:foreach>

You need to have the checks for columnName for the container text and the value, since these are different and in some cases you might want to write some extra HTML instead of just using the value attribute so this way it takes care of that as well.