Webapp listing and filtering

Updated on 20-October-2016 at 10:16 AM

Business Catalyst End of life announcement - find out more details.

In this article we will go over some listing methods.

Note: These techniques also apply to listing other modules, not only webapps.

We will loop the webapp items using FOR and render them in a table structure, then we will add some conditions using IF so we only render webapp items that meet a certain criteria.

For the samples below let's assume we have a webapp with the following fields:

  • name - (string)
  • engine size - (numeric)
  • engine layout - (string)
  • performance - (string)

Remember: if you need to access a liquid tag that has a space in its name, for example tag_large image_value use this syntax: {{cars1.items[0].["large image_value"]}} - Liquid does not allow for the name of its output tags to contain spaces. In this case the tag that contains a space needs to be wrapped in square brackets and quotes and preceded by the name of the collection (in this case cars1).

List all the webapp items

First of all let's render all the webapp items. We won't add any conditions just yet, let's loop all the items available. Create a blank page and paste this code:

<!DOCTYPE html>
<html>

<head>
  <title>Collection demo
  </title>
  <meta name="description" content="" /> </head>

<body>
  {module_webapps render="collection" template="/layouts/custom/car_collection.tpl" id="35209" filter="all"} </body>

</html>

On the /layouts/custom/car_collection.tpl layout insert this code:

<table>
  <thead>
    <th>Make</th>
    <th>Engine size (L)</th>
    <th>Engine layout</th>
    <th>Performance</th>
  </thead>
  <tbody>
      {% for item in items %}
    <tr>
      <td>{{item.name}}</td>
      <td>{{item.['engine size']}}</td>
      <td>{{item.['engine layout']}}</td>
      <td>{{item.performance}}</td>
    </tr>
      {%endfor%}</tbody>
</table>

In this scenario all the items will be listed, the front-end will end up looking like this:

List all the webapp items that have the engine size field smaller than 4800

Do note that in this example the "enigne size" is a numeric type field.

Let's add an IF condition and only list items with the engine size field amsller than 4800. Create a blank page and paste this code:

<!DOCTYPE html>
<html>
    <head>
        <title>Collection demo</title>
        <meta name="description" content="" />
    </head>
    <body>
        {module_webapps render="collection" template="/layouts/custom/car_collection.tpl" id="35209" filter="all"}
    </body>
</html>

On the /layouts/custom/car_collection.tpl layout insert this code:

<table class="below4800">
  <thead>
    <th>Make</th>
    <th>Engine size (L)</th>
    <th>Engine layout</th>
    <th>Performance</th>
  </thead>
  <tbody> 
    {% for item in items %} 
    {%if item.['engine size'] < 4800 %} 
		<tr>
      <td>{{item.name}}</td>
      <td>{{item.['engine size']}}
      </td>
      <td>{{item.['engine layout']}}</td>
      <td>{{item.performance}}</td>
      </tr> 
      {%endif %} 
      {%endfor%} </tbody>

This will create a table containing just the listing of cars that have the engine size field smaller than the 4800 threshold.

List all the webapp items that do not contain "4" in the engine layout field

In this example we will use UNLESS and list all the items that do not contain the "4" string in the engine layout field.

Create a blank page and paste this code:

<!DOCTYPE html>
<html>
    <head>
        <title>Collection demo</title>
        <meta name="description" content="" />
    </head>
    <body>
        {module_webapps render="collection" template="/layouts/custom/car_collection.tpl" id="35209" filter="all"}
    </body>
</html>

On the /layouts/custom/car_collection.tpl layout insert this code:

<table class="over4cyl">
  <thead>
    <th>Make</th>
    <th>Engine size (L)</th>
    <th>Engine layout</th>
    <th>Performance</th>
  </thead>
  <tbody>
    {% for item in items %} 
    {% unless item.['engine layout'] contains "4" %}
    <tr>
      <td>{{item.name}}</td>
      <td>{{item.['engine size']}}
      </td>
      <td>{{item.['engine layout']}}</td>
      <td>{{item.performance}}</td>
    </tr>
      {%endunless %} 
      {%endfor%}</tbody>
</table>