View Full Version : New CatalogView section implemented in Lianja App Builder RC4

2013-03-09, 20:57
We've added a new CatalogView section based on a WebView section (similar to a report section).

This is a data bound WebViewWidget that will display a report as a table of cells containing an image, a caption, some details and an optional link. The cells can be arranged across the page by specifying the width of the cells as a % of the available display space. If no cell width is specified them the cells are displayed one per row.

This makes it simple to display a product catalog or employee details in an App. There are a multitude of uses for this new UI component.

This is implemented as a WebViewWidget that is located in lib:/catalogview.rsp so you can customize it for your own App requirements.

It handles the following customizable attributes;

table (that contains the data bound columns)
image datasource
image width and height
caption datasource
details datasource (character or varchar)
link datasource
link delegate
cell width (%)
height (pixels)
filter (the query to be performed against the specified table)
stylesheet (specify your own CSS theme for the way the cells are displayed)

Being a WebViewWidget this will work across all UI devices and will be rendered using a responsive UI pattern via media queries.

Moving over a cell and clicking it calls the "delegate" that you have specified which may be an "inline" delegate. e.g click a cell to switch to a page allowing the user to edit the product details for the product/cell clicked.

The "Table" can be a virtualtable which enables this component to work with all data sources; Lianja native, MSSQL, Oracle, MySQL, PostgreSQL or other ODBC data source.

If you have not yet realized the power of Lianja WebViewWidgets then take a look at the code for this component to better acquaint yourself with what can be achieved.

Here is a screenshot of a CatalogView -- all NoCode. Just specify the database, table and other attributes in the attributes dialog and that's it.