Opentaps Ajax Pagination Framework

In this guide, we will show you how to replace a static form-widget list form with an Ajax paginated form using the opentaps Form Macros pagination framework.

The screen is the Financials > Configure >> Chart of Accounts screen and displays all the general ledger accounts configured for a company. Originally, the list of accounts was created with the ofbiz form widget, but because a company typically has several hundred accounts associated with it, such a static form was not very user-friendly. It always displayed 100 GL accounts per page, and paging through was slow.

Configuring the Screen Widget

The first step is to edit screen widget XML definition and remove the references to the form widget. Edit the file hot-deploy/financials/widget/financials/screens/ConfigurationScreens.xml and look for the screen "listGlAccounts". Since the ajax pagination is done within freemarker (FTL) templates, you can remove the following lines which referenced the old form widget :

<container style="screenlet-body">
    <include-form name="listGlAccounts" location="component://financials/widget/financials/forms/configuration/ConfigurationForms.xml"/>
</container>

You can also remove these lines:

<set field="viewIndex" from-field="parameters.VIEW_INDEX" type="Integer" default-value="0"/>
<set field="viewSize" from-field="parameters.VIEW_SIZE" type="Integer" default-value="100"/>

These are no longer needed because they were used to control the pagination of the list of GL accounts from the server side, but the opentaps Ajax pagination form macro allows the user to set pagination choices.

Configuring the Pagination Query

The second step is to configure the data for the pagination. We need to define what data we will be listing and paginating through in a beanshell BSH script, which is typically used to retrieve data for display. In most opentaps applications, the BSH script is used to do a lookup of data and then put the resulting list or list iterator (cursor) into the context for an FTL page or form widget XML to display, like this:

accounts = EntityUtil.filterByDate(delegator.findByAndCache("GlAccountOrganizationAndClass", 
               UtilMisc.toMap("organizationPartyId", session.getAttribute("organizationPartyId")), UtilMisc.toList("accountCode")));
context.put("accounts", accounts);

For Ajax pagination, however, the FTL page needs to interact with the data directly, so we need to pass the data lookup query information to the FTL. This done by following the closure pattern, where a function is passed to the pagination object in FTL. This function is created in the BSH to represent what data lookup should be performed:

glAccountListBuilder(organizationPartyId) {

   entityName = "GlAccountOrganizationAndClass";
   where = UtilMisc.toList(
       new EntityExpr("organizationPartyId", EntityOperator.EQUALS, organizationPartyId),
       EntityUtil.getFilterByDateExpr()
   );
   orderBy = UtilMisc.toList("accountCode");

   return this;
}

This function essentially defines what entity (GlAccountOrganizationAndClass) will be queried, what the conditions are in the where statement, and how the query results will be ordered. The fields entityName, where, orderBy, having, fieldsToSelect, and options' can be used to configure the query for pagination. Then, you must make sure your function does this:

   return this;

The next step is just to pass this function to the FTL, like this:

context.put("glAccountListBuilder", glAccountListBuilder(session.getAttribute("organizationPartyId")));