Paginating Grid Rows

by: Shane Eckert on: 9/16/2013

For the past two months, I have been working on a site for my daughter that will help her work through her emotions. I am loosely calling it an “app” that is built using ExpressionEngine. The basic idea of the app is to present my daughter with a series of questions that help her determine how she feels, and then present some healthy ways to cope with the emotion she chose. Before Grid, I was showing all of the healthy coping suggestions on one page and she would chose from the long list. With Grid, I am able to put several answers into just one entry, and with pagination in Grid, I can present one coping suggestion at a time which makes for a much better experience.

Below is an example of how I accomplished this with Grid. This example will present the user with an emotion along with a series of coping suggestions that we call responses.


How I did it

For our example, we will be creating a Channel and Channel Field Group. Once that is done, add a new Grid field to the field group and label the Grid field responses. Our Grid field will hold two columns, one for the response which will be a text field labeled response_name and another that holds a description of the response which will be a textarea labeled response_description.

Grid Field Example

The title field will hold the emotion and the Grid field will be used for the responses.

The following template code displays our emotion and responses:

  <h1>Emotion: {title}</h1>
<p>  {responses}<br />
<p>    </p><p class="responses">{responses:response_description}</p>
<p>  {/responses}<br />

<p>This loops through the Grid field that we named responses and displays the data in two columns. This is great if we want to see all the answers on one page, but for our example, we want to show only one answer at a time. We can limit the rows of data returned with the limit parameter.</p>


<h1>Emotion: {title}</h1>
<p>  {responses limit="1" row_id="{segment_3}"}<br />
<p>    </p><p class="responses">{responses:response_description}</p>
<p>    </p><div class="pagination"><p> <br />
        {responses:prev_row}<br />
           <a href="{path='emotions/choose'}/{responses:row_id}">Previous Response</a>   <br />
        {/responses:prev_row}<br />
        {responses:next_row}<br />
          <a href="{path='emotions/choose'}/{responses:row_id}">Next Response</a><br />
        {/responses:next_row}<br />
</div><p> <br />
  {/responses}<br />

<p>Let’s break down the code and see what each bit is doing.</p>

<pre><code>{responses limit="1" row_id="{segment_3}"}

First we limit the rows returned to one with limit="1". The other parameter we add is row_id="{segment_3}" which allows us to access the next or previous row. We do this by providing the segment we are going to use for the row_id. For example, if the next row ID was 4 then the URL would look like this.


Let’s look at the pagination code. This block of code creates a link to the previous answer, and the code to create a link to the next answer would look very similar.

    <a href="{path='emotions/choose'}/{responses:row_id}">Previous Answer</a>   

Pagination for Grid rows is a variable pair, so here we show an opening and a closing variable pair. Enclosed in the tag pair is our link, which will be the path to the template where this code resides followed by the tag {responses:row_id}. This returns the row_id of the previous row so that the link that is built includes the row_id which is then passed as a segment variable to the row_id="{segment_3}" parameter of our Grid tag pair.

In support, I see our users making incredible things happen with ExpressionEngine daily. I build websites for clients using ExpressionEngine all the time, but this “app” is my first attempt to step outside of the typical websites that I build. Grid made it easier for me to create a much better user experience. I hope I have inspired you to think outside the box and try some new things with ExpressionEngine.

.(JavaScript must be enabled to view this email address) or share your feedback on this entry with @ellislab on Twitter.

ExpressionEngine News

#eecms, #events, #releases