NT103: How to group your output results

By Kevin M Schreiner

February 06, 2009

Introduction

The purpose of the "Newbie Track" of training videos for Open Web Studio is to get you started moving down the best development path by demonstrating how to use the industry-proven approaches and standards practiced by the Open Web Studio Team, and surrounding community.

Abstract


The goal of this video, "How to group your output results", is to extend your knowledge of the Open Web Studio template structure.
In the video I  create an all-encompassing implementation of a grid table structure, made up of the already-demonstrated query and detail templates. This will be extended to include header, footer and alternating detail. Once completed, the layout is then modified to include grouped headers and footers that provide more report style layouts and functionality. Finally the demonstration discusses paging functionality in terms of repeated groups.

NT103
NT103: Watch and Learn

To get started, let's assume you have already installed Open Web Studio on your target platform.
Additionally, we assume that you already know how to create a configuration from scratch and have assigned that configuration to the module on the current page. In our case we have named this configuration "NT103".

  1. From the page, jump into the administration for NT103 by clicking the Administration link.
  2. Because we have already created this configuration, it is ready to begin editing. We also have taken the liberty of setting up paging, which was demonstrated in the previous session. The module is set to 10 records per page with AJAX paging enabled.
  3. Just as we did in the previous session, add a Template Query to the Action tree.
  4. Double click the Action and set the Content to "Select * from Lists". As you may be well aware, this is not the best way of selecting from the table for performance reasons, but for the sake of demonstration purposes, this is how we will begin. Refer to the wiki for learning how to use the better paging methodology titled "Custom Paging with SQL 2005"
  5. Press Save
  6. Now, we are going to create a standard HTML table layout. This will contain a Header to begin the table and setup the column headings. The footer will close our table, and the detail will use standard zebra stripping to show the alternating records.
  7. To get started, add the Header by clicking the Header action.
  8. Double click the Header entry and add the table tag and first row to the Content:

    <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <thead>
    <th>EntryID</th>
    <th>ListName</th>
    <th>Text</th>
    </thead>
    <tbody>

    Notice here that we began the table and tbody tags, but have not yet closed them. This will be handled by the footer.
    Additionally - the Header and Footers are can be extended with an Index, which controls the layering and Group Statement to identify whenever the header/footer combination must be rendered in the output. This will be provided later in the demonstration. For now, set the index to one.
  9.  Press Save.
  10.  Now Add the Detail Template. Double click to begin editing.
  11.  As we demonstrated in the Header, our output will have three columns, EntryID, Listname and Text. The layout per row is simply these three columns provided within the table cells. Add the TR tag and cooresponding TD tags:
    <tr>
    <td>[EntryID]</td>
    <td>[ListName]</td>
    <td>[Text]</td>
    </tr>
  12. Now, it is important now to consider how the alternating layout should appear. For example, if the desire is to provide Zebra stripping of the layout in which two colors are used in alternating fashion between odd and even rows, a simple class or style assignment will handle the layout. To demonstrate this, let's assume we are going to alternate between two colors WHITE and GREY. Fist add the style to the definition of this tr tag as:

    style="background:#ffffff;"
  13. Press Save.
  14. To quickly add a duplicate of this Detail, then switch it to an Alternating detail. Select the Detail action from the tree. Now press "Copy" from the Clipboard.
  15. Select the Header and press "Paste".
  16. Now, double click the new entry. Select Alternating Detail from the drop down list, and change the tr style to grey "#eeeeee". Press Save when you have completed.
  17. Finally, Click Footer from the Action Ribbon Group. Double click this footer, set its Index to 1 like its matching header. Then change the content to be the appropriate closing tags.

    </tbody>
    </table>
  18. Press Publish to demonstrate the look and feel of the table.
  19. Now, as the layout demonstrates, the ListName appears to repeat many times within the output because it is a grouping entity within the application. If you want to provide a bit better appearance it may be worthwhile to place a header row at the beginning of each new Listname within the grid, rather than display it as a column. Click Header to add a new header to the output. - Move this to appear within the tree structure so that it visually appeals to the hierarchy. Keep in mind that this hierarchy makes no difference to the runtime, it just makes it easier to read and understand.
  20. Double click on this new header and begin editing.
  21. Because this is now the second header from the top of the layout down, we should set the index to two, indexes are mapped sequencially based on the value, you can set these however you prefer. I prefer using numbers starting at zero or one, then increasing these numbers for each layer of the hierarchy.
  22. Now we must tell the system how we know when a new header must be written. To do this, fill in the Group Statement. For our needs, we will render a new header whenever the ListName column changes. For that, just enter [ListName] in the Group Statement.
  23. Now enter the row into the content block for this header:

    <tr>
    <td colspan="2" style="background:#dddddd;">[ListName]</td>
    </tr>
  24. Now, the colspan of two means we are crossing two columns, but our original output has three columns. There is no need to repeat the ListName column for every row, so we are going to remove these as the last step. Double click each of the templates and remove the column.
  25. Press Publish to review the output.
  26. Notice that when paging through the result set, the first ListName for the page is always provided at the top, regadless of whether it would have physically been the first record containing that Listname in the entire output. This is because paging is specific to the scope of the view for the page, and not for the global table.


You should now have a decent understanding of how to alternate and group your data including the reasoning behind the Group Statement and Index within the Header and Footer template. Additionally, you should have picked up how the Copy and Paste functionality works. Finally, you should be developing a better understanding of how to structurally lay out the configuration actions so that they appear fluid and easy to follow.

Each tutorial within the Newbie Track series will provide the same simplistic approach to using Open Web Studio. To find out more, just watch the next video in the series.

Average (4 Ratings):
 
Want to help out?
 
 

New York, NY • Baltimore, MD • Vienna, VA • St. Louis, MO • Seattle, WA • info@openwebstudio.com

Bookmark & Share Bookmark and Share