Create the Portal Query

Before proceeding with either method to create tables in your portal, create a new query in your portal. The query must have an output node. A node can be added by clicking "Edit Parameters" in the portal query.

In this example, the query is pulling a list of prospects, and the results set from the query will be placed into the node of "person_list."

Table Widget Method

In a portal view, click and drag from the palette to add a new Table View widget.

The widget contains general settings for configuring the table view, a Page Display section that determines how the widget should render within the portal view, and a Table Layout section where the table contents are formatted.

Give the table a Name, and set the status to Active. Then, select a portal query to populate the table results.

The Items per page field lets you set the number of results that should appear per page. The table view includes pagination with "Prev" and "Next" links, and so each page will contain a maximum number of rows based on the entered value. If no Items per page is set, it will default to 50.

Clicking "Generate Template" will add the table as well as the basics of the Liquid markup and looping that can be further edited if necessary.

The Page Display determines what appears as the header text, if desired, and any message that should appear if there are no results in the table.

This default Liquid markup conditionally displays the text "No data was found" if the size of the node is not greater than 0 (i.e. no results are returned).

In the Page Display source code, JavaScript is generated automatically that will render the table on the portal page.

In Table Layout, the generated table uses the names of the exports in the query as column headers. Table Layout also shows the Liquid markup generated that conditionally displays the "Prev" and "Next" links based on the number of results. For example, if there are no additional results after the current page, the "Next" link will not appear. 

The Liquid looping syntax can also be viewed in the source code. The table will include all exports from the portal query.

The merge fields in particular will reflect the order of the exports in the query as well. The columns can be edited or removed as desired.

The end result in this example would look as follows:

If, after testing, you wish to make changes to the table, or if additional exports were added to the query and you would like those new exports included in the table, the table template can be reset by editing the table and clicking "Reset Template." Alternatively, the table can also be directly edited in the Table Layout to add the new exports.

Pop-up Functionality

Portal pop-up functionality is often added to display additional information about a particular row in the results list. When using the Table View widget, a link to a pop-up is automatically generated within the table if the query used contains the exports of "id" and "name".

<td>
    <a data-href="?cmd=details&amp;id={{item.id}}" href="#" onclick="return (FW.Lazy.Popup(this, {width: '500px'}));">
        {{item.name}}
    </a>
</td>

More specifically, both "id" and "name" will be referenced within the same table cell, and the link itself is associated with a portal pop-up method that has an Action of "details." When the table is rendered on a portal page, each table row can then display a pop-up when clicking anywhere on that row.

If the method in the portal has a different Action, the source code can be edited to match the desired method.

Additional Customization via CSS Classes

Table Classes

Table classes can be used to adjust the display and functionality of a table.

<table class ="table sortable">

<table class="table searchable" data-search-text="Search Records...">

<table class="table nohighlight">

Table Row Classes

Table row classes can be used to adjust the display of specific table rows. Using Liquid markup, certain rows can be displayed differently based on certain criteria.

For example, in a table of applicants, the portal user may wish to see admits highlighted in green and denied applicants highlighted in red.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        /*<![CDATA[*/
        tr.Admit {background-color: green; }
        tr.Deny {background-color: red; }/*]]>*/
    </style>
</head>
<body>
    <table class="table searchable sortable nohighlight">
        <colgroup>
            <col />
            <col />
            <col />
        </colgroup>
        <thead>
            <tr class="column">
                <th>Person Name</th>
                <th>Person Major</th>
                <th>Person Decision</th>
            </tr>
        </thead>
        <tbody>
            {% for item in applications %}
                <tr class="{{item.decision}}">
                    <td>{{item.name}}</td>
                    <td><a href="LINK HERE" target="_blank">{{item.major}}</a></td>
                    <td>{{item.decision}}</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
</body>
</html>