Building a Bug Tracker: Bug List Layout
Before we can adventure into filtering and sorting content, we should first come up with a good display for that content.
One of the things that newcomers often don’t realize with ExpressionEngine is that the templates really are entirely under your control. Expression assumes very little, so it follows that the weblog entries tag outputs only what you’ve told it specifically to output, and this leaves the design entirely in your hands.
While the default templates ship with CSS based layouts, a bug tracker is definitely more tabular data. So let’s explore how to create a table with the weblog entries tag.
Creating a table within the weblog entries tag is all about controlling the table and table row repeating elements. We have to remember that everything inside the weblog entries tags loop, and unless you are very specific, your table tags will loop as well, putting each entry in its own table.
At the same time, we don’t want the table tags outside of the weblog entries tags. Why? If there are no entries, we’ll have an empty table!
So, what can we do to exercise the control we need? Bring on the conditionals!
First, we want to open our bug_tracker/index template and locate the {exp:weblog:entries} tag. We’ll start there. You should already have this line in your template:
{exp:weblog:entries weblog="{bug_tracker_weblog}" limit="30" status="Open|New|Confirmed|Unconfirmed|External|Resolved"}
Now, right under that, let’s add our first conditional:
{if count == "1"}
<table>
<tr>
<th>ID</th>
<th>Status</th>
<th>Version</th>
<th>Description</th>
</tr>
{/if}
So here we can see that we’re comparing {count} to the value of 1; this tells ExpressionEngine to output this information only if we’re on the first entry in the loop. This is useful as we want our table and table heading tags to appear only once.
The table headings consist of the basic information that we need when listing out bug reports. So now we simply need to get the rest of our custom fields, status, and ID into our table in the proper locations. To do that, we simply follow our table headings, with the appropriate variables inside a standard table structure:
<tr>
<td>{entry_id}</td>
<td>{status}</td>
<td>{bug_tracker_version}</td>
<td>{bug_tracker_details}</td>
</tr>
Lastly, we want to close off our table, but we want to ensure that only happens after the last entry. To do this, we’ll compare count with {total_results} so that only if they’re equal, we output that final code:
{if count == total_results}
</table>
{/if}
This code between our weblog entries tags ends up with a result like that should look similar to this:
And the full code, now, for our bug_tracker/index template is like so:
{html_begin}
{embed="inc/.head" title="Bug Tracker"}
<body>
<div id="container">
{embed="inc/.banner"}
{embed="inc/.leftnav"}
<div id="content">
{!-- List of all reported bugs --}
{exp:weblog:entries weblog="{bug_tracker_weblog}" limit="30" status="Open|New|Confirmed|Unconfirmed|External|Resolved"}
{if count == "1"}
<table>
<tr>
<th>ID</th>
<th>Status</th>
<th>Version</th>
<th>Description</th>
</tr>
{/if}
<tr>
<td>{entry_id}</td>
<td>{status}</td>
<td>{bug_tracker_version}</td>
<td>{bug_tracker_details}</td>
</tr>
{if count == total_results}
</table>
{/if}
{/exp:weblog:entries}
{!-- End Bug List --}
</div>
{embed="inc/.footer"}
</div>
{html_end}
You’ll most certainly want to style your table down the line, as well. But for now this gives us a working, informative, tabular list to output our bug reports, and we can now move on to sorting and filtering this information in a way that will be useful to both bug reporters and developers.
