Portal Table View Widget

Data tables in portals allow users to display one-to-many relationships. For example, an applicant might have multiple test scores that should be displayed on the status portal or an alumni volunteer might have multiple interviewees assigned to them.

We recommend reading the article to familiarize yourself with the concept of nodes before continuing. The portal Table View widget helps simplify the construction of data tables, but a fundamental understanding of nodes and displaying results sets on portals is required.

Important!

Only one table view widget can be used per view. Additional tables can be created using Liquid looping.

Create the Portal Query

In order to leverage Liquid looping in portals, and thus the table view widget, the query must have an output node. A node can be added by clicking "Edit Parameters" in the portal query.

blobid0__2_.png

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."

Important!

Remember to include a "Sort" option to determine the order in which the results should appear.

Use the Table View Widget

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 then 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.

blobid3.png

Important!

Only portal queries that have a node will appear in the dropdown list of queries to select.

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.

blobid4.png

The Liquid markup here in particular 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.

blobid5.png

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. 

blobid6.png

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

blobid7.png

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:

mceclip0__14_.png

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.

blobid9.png

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". 

blobid8.png

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.

Important!

Only portal queries that have exports of id and name will generate this link. Without these two export parts, the link must be added manually.

Was this article helpful?
3 out of 3 found this helpful

Comments

0 comments

Please sign in to leave a comment.