CatalogView Options

From Lianjapedia
Jump to: navigation, search

See Also

CatalogView Section Attributes

CatalogView Section

The CatalogView Section is a data bound WebViewWidget that displays a catalog of items. Each page provides a table of cells comprising an image, a caption, a sub caption, some details and optional links to drill down to additional information about the selected catalog item.

Two Apps are included in the Lianja App Builder distribution to demonstrate the use of a CatalogView Section.

example_webapp1 App
example_catalogview App

CatalogView Section

The 'Lianja Tablet Web UI Demo' (example_webapp1) App displays the photo and notes fields (blob, varchar) from the employees table along with their job title and a 'Read more...' link.

Double-clicking on the photograph or clicking on the 'Read more...' link calls the JavaScript dblclick/click delegates to slide in an employee information panel with details of the selected employee.

It is a paginated CatalogView Section.

CatalogView Section

The example desktop App 'CatalogView App' (example_catalogview) App also displays the employee photograph and notes along with the employee name.

Clicking on the photograph or the name calls an inline delegate to switch to the 'Employee Details' Page and show the details for the selected employee.

It is a single page CatalogView Section.


Data Binding Attributes

The Database and Table Attributes define the data binding for the CatalogView Section.

Attribute Description
Database The name of the database
Table The name of the table
Database and Table Attributes

Here the example desktop App 'CatalogView App' (example_catalogview) has empty Database and Table Attributes. CatalogView Sections will default to using the sample southwind database and the employees table if no Database and Table are specified, but remember to complete these for your target data.

Heading Attribute

Heading text can be specified to be displayed below the Section header.

Attribute Description
Heading The Catalogview heading. This defaults to none, which causes the heading to not be displayed
Empty Heading

The 'Lianja Tablet Web UI Demo' (example_webapp1) App has no Heading specified.


The 'CatalogView App' (example_catalogview) specifies the Heading as Employee List and it is automatically visible.

Cell Attributes

The Columns across Attribute determines how many cells are displayed in each row of the CatalogView Section.

Attribute Description
Cell width The width of each cell (this is a percentage that the cell will used in the display area). This defaults to 100%. Currently ignored.
Cell height The height of the cell in pixels. This defaults to just take up the space that is required to display the cell. Currently ignored.
Columns across The number of columns to display across the page
Columns across

The 'CatalogView App' (example_catalogview) has Columns across set to 2, so has 2 cells per row.

Image Attributes

Each cell in the CatalogView Section displays an image from a blob field (alternatively known as an object field) from the bound table.

Image height and width can be set, otherwise they each default to 200 pixels.

Attribute Description
Image The name of the (blob/object) column in the table containing the image for each cell
Image width The width of the image in pixels
Image height The height of the image in pixels
Image Attributes

Here the example desktop App 'CatalogView App' (example_catalogview) App specifies that the Image should be the photo field (from the employees table).

The Image width and Image height are not set, so the image will be displayed at the default 200 pixels by 200 pixels size.

Caption Attributes

A data bound Caption can be displayed alongside the image. The Caption can have an associated Caption delegate which is called when the Caption is clicked and is passed the current Caption link searchkey value.

Attribute Description
Caption The name of the (character) column in the table containing the caption for each cell
Caption delegate The inline delegate to invoke when the caption is clicked
Caption link searchkey The search key expression to be postfixed to the caption delegate when it is invoked
Caption Attributes

Here the 'CatalogView App' (example_catalogview) App specifies the character expression concat(trim(lastname), ', ', trim(firstname)) as the Caption.

When the Caption is clicked, the Caption delegate will be called: page:employees.section3 with the Caption link searchkey, here lastname, as the searchkey.

This is the equivalent of the following SHOWDOCUMENT() call:


For example, if 'Davolio, Nancy' is clicked, the current Caption link searchkey will be 'Davolio' and the call will be:


Caption Attributes

So, when the Caption is clicked, section3 in the employees Page is selected and a search is made based on the Section's Search field.

Sub Caption Attribute

A data bound Sub caption can also be displayed.

Attribute Description
Sub caption The name of the (character) column in the table containing the sub-caption for each cell

Sub caption Attribute

Here the 'Lianja Tablet Web UI Demo' (example_webapp1) App specifies the title field (character) as the Sub caption.

The text from the field is displayed and is not clickable.

Note: a character expression can also be specified here, e.g. upper(title).

Details Attributes

Details refers to the main block of text displayed in each cell. This is bound to a variable length memo/varchar column in the table. The text can optionally include a Read more link. When the Read more link is clicked, the Read more delegate or the Click Custom delegate is called and passed the current Read more link searchkey value

Attribute Description
Details The name of the (memo/varchar) column in the table containing the details for each cell
Read more Show the 'Read more' link (True | False)
Details height Maximum height of details to display if 'Read more' is specified. Number of lines based on default font size.
Read more delegate The inline delegate to invoke when the 'Read more' link is clicked. Alternatively, a 'Click' delegate can be used.
Read more link searchkey The search key expression to be postfixed to the 'Read more' delegate or passed to the 'Click' delegate when invoked
Details Attributes

Here the 'Lianja Tablet Web UI Demo' (example_webapp1) App binds the Details to the notes varchar field in the employees table.

A Read more link is displayed and up to 10 lines of details (Details height) will be displayed. This is based on the current default font, so fewer lines will fit if the contents include formatting with larger fonts as they do here.

The Read more delegate is empty here, but for desktop Apps, this would have the same syntax as the Caption delegate shown above.

It does have a Read more link searchkey, the employeeid (numeric) from the employees table and this will be passed to the Click Custom delegate when 'Read more...' is clicked.

Click Delegate

Here's the Click delegate code with an overlay of the definition in the Section Attributes.

Click Delegate in action

And here it is in action - clicking 'Read more...' calls the 'Click delegate with the selected employeeid and the delegate calls Lianja.showdialogpanel() to slide in the dialog panel. The code for the dialog panel contents can be seen in the showdialogpanel_employee.rsp in the Library.

The 'Lianja Tablet Web UI Demo' (example_webapp1) App CatalogView Section also has a Double Click delegate defined - see the next screenshot for more details.

Double click Delegate

With a Double Click delegate defined, as it is here, double-clicking on the image calls the Double Click delegate and similarly passes the Read more link searchkey.

Order by and Filter Attributes

These Attributes are optional and can be used to specify the data order and to restrict the data displayed.

Attribute Description
Order by The orderby expression for the data in the Catalogview
Filter The filter expression that restricts which records will be included in the Catalogview
Order by and Filter Attributes

The 'Lianja Tablet Web UI Demo' (example_webapp1) App CatalogView Section has Order by set to lastname so that the catalog items are displayed in employees.lastname order.

There is no Filter specified in the original App, but here I have set it to
titleofcourtesy = "Ms", so that only records that match that condition are included.

Pagination Attributes

For displays of a larger number of catalog items or where a larger cell size is required, CatalogView Sections with multiple pages can be created.

Attribute Description
Pagination Paginate the rows displayed (True | False)
Pagination size The number of cells to paginate
Paginated CatalogView Section

The 'Lianja Tablet Web UI Demo' (example_webapp1) App has Pagination enabled and Pagination size set to 6. Columns across is set to 2, so 3 rows are displayed per page.

Note: Complete rows will be displayed, so with Pagination size set to 5, a page would still display 3 rows of 2 cells.

Paginated CatalogView Section

With Pagination enabled, the page navigation control is automatically displayed.

Show grid lines

Show grid lines

With Show grid lines enabled, grid lines are displayed between rows.

Extension Attributes

The rsp Lianja Server Page script (catalogview.rsp) and the CSS stylesheet (catalogview.css) used by the CatalogView Section WebViewWidget are located in the Lianja Library directory and can be customized if required. Proceed with caution, as the modifications will apply to all CatalogView Sections and will be overwritten by product upgrades.

Alternatively, the files could be used as templates for your own rsp and specified as the URL/source for a WebView Section. The Reports in the 'Lianja Demo' (lianjademo) App use quickreport.rsp in this way.

Attribute Description
CSS Stylesheet You can override the CSS style for the table containing the cells and the style of the cells themselves by specifying your own stylesheet. Currently ignored, uses catalogview.css
Other options Other Catalogview options
Custom library Custom library containing the Tile producer delegate
Tile producer Delegate to call to render a custom tile. This should just output the HTML
CSS File: catalogview.css

The CatalogView Section uses the catalogview.css stylesheet from the Library.

See catalogview.rsp:

<%@ include="catalogview.css" %>

Other Options

Other options need to be specified as

ampersand-separated option=value pairs.

Lianja Server Page: catalogview.rsp

These will be passed as parameters to the catalogview.rsp Lianja Server Page script. You can then modify the script to handle the parameters as required.

Notes on Client Support

Attribute Notes
Heading -
Cell width -
Cell height -
Columns across -
Image -
Image width -
Image height -
Caption -
Caption delegate -
Caption link searchkey -
Sub caption -
Details -
Read more -
Details height -
Read more delegate -
Read more link searchkey -
Order by -
Filter -
Pagination -
Pagination size -
CSS Stylesheet -
Other options -
Custom library -
Tile producer -