Using WebViewWidgets

To keep coding (No-Code and Low-Code) to a minimum there are many built-in WebViewWidgets that can be used with Lianja.showDialogPanel(), Lianja.showDialog() or as the URL in a WebView section or in a custom WebView object created with createObject("webview").

From v9.4, ArticleView sections articles can also include embedded WebViewWidgets. See Embedded WebViewWidgets.

Becoming familiar with these will speed up your development so its worth spending time to get to know them. You can study the code behind these to build your own custom WebViewWidgets.

Let’s take a look at these.

Data List View

lib:/datalistview.rsp?parameter=value&parameter=value...

Parameter	Description	Default value
autosize	Autosize.	false
clickdelegate	The optional delegate to be called when the hyperlink is clicked. The delegate is called with one argument, the text of the hyperlink that was clicked.
columns	A comma separated list of columns to be displayed.
connstr	Optional connection string. When specified, a set connstr is issued.
database	Database name. Note: specifying the database as 'current' uses the currently open database.	southwind
delegatelib	The optional name of the delegate library containing the delegates. This should be written in JavaScript for Web/Mobile Apps.
filter	A filter expression e.g. customername='alfki'.
groupby	A column name or ordinal number (starting at 1) which causes data to be grouped.
hyperlink	An optional column name that will be displayed as a hyperlink. This operates with the 'clickdelegate' and the 'sectionid'.	customer
maxrows	Maximum rows to select.	1000
norecordstext	Alternate text to display when no records selected.	No records selected
orderby	A column name or ordinal number (starting at 1) which causes data to be ordered. The asc and desc (ascending/descending) keyword can be included.
rowclick	The optional delegate to be called when a row is clicked. The delegate is called with one argument, the comma separated text of the values on the row that was clicked.
sectionid	The optional page.section ID that will be searched using the hyperlink text when the hyperlink is clicked e.g. page1.section1.	page1
sql	SQL select query.
table	Table name.	customers (if database is southwind)

Examples:

Lianja.showDialogPanel(
	"CUSTOMER LIST",
	"lib:/datalistview.rsp?database=southwind&table=customers&columns=customerid,"
        +"companyname&hyperlink=companyname&sectionid=customers.section1");

Lianja.showDialog(
	"CUSTOMER LIST",
	"lib:/datalistview.rsp?database=southwind&table=customers&columns=customerid," 
        + "companyname&hyperlink=companyname&sectionid=customers.section1", 0, 0, true);

PDF Document View

lib:/documentview.rsp?parameter=value&parameter=value...

Parameter	Description	Default value
file	The pdf filename to be displayed	compressed.tracemonkey-pldi-09.pdf
odata	MIME base64 encoded string containing the pdf data to be displayed

Examples:

Lianja.showDialogPanel("DOCUMENT VIEW","lib:/documentview.rsp?file=compressed.tracemonkey-pldi-09.pdf")

Chart View

lib:/chartview.rsp?parameter=value&parameter=value...

Parameter	Description	Default value
backgroundcolors	The chart data backgound colors. A comma separated list.	'rgba(255, 99, 132, 1)','rgba(54, 162, 235, 1)','orange'
bordercolors	The chart data border colors. A comma separated list.	'rgba(255, 99, 132, 1)','rgba(54, 162, 235, 1)','rgba(255, 206, 86, 1)'
caption	The chart caption	# of Votes
charttype	The charttype; bar, line, pie or doughnut	pie
data	Comma separated list of data values. Use {macros} to calculate the list of values to render.	12, 19, 3, 5, 2, 3
height	The chart height	100%
labels	The labels to display. A comma separated list.	'red','green','blue', 'orange'
sectionid	The section ID
width	The chart width	100%

Examples:

Lianja.showDialogPanel("CHART VIEW","lib:/chartview.rsp?charttype=bar&caption=Vacation days&labels=Q1,Q2,Q3,Q4&data=15,10,20,6")

Image View

lib:/imageview.rsp?parameter=value&parameter=value...

Parameter	Description	Default value
column	Column where image field (blob) is stored
database	Database for table where image field (blob) is stored
filter	A filter expression e.g. customername='alfki'
height	Image height	100%
table	Table where image field (blob) is stored
width	Image width	100%

Examples:

Lianja.showDialogPanel("IMAGE VIEW","lib:/imageview.rsp?database=southwind&table=employees\
&column=photo&width=240px&height=240px&filter=lastname eq 'buchanan'")

Google Chart View

lib:/googlechart.rsp?parameter=value&parameter=value...

Parameter	Description	Default value
colors	The chart data colors. A comma separated list.	'blue','green','red'
data	The data for the chart (specific to chart type)	Specific to chart type, e.g. for 'pie': base64_encode("[['Key', 'Value'],['Work',11], ['Eat',2], ['Commute',2], ['Watch TV',2], ['Sleep',7]]")
debug	Enable debugging	valign="top"false
height	The chart height	100%
options	The options for the chart (specific to chart type)
title	The title for the chart	Assignments
type	The chart type; pie, map, gauge, donut, bar, column	pie
value	The chart current value for single value charts, e.g. gauge.	0
width	The chart width	100%
xoptions	The options for the chart (specific to chart type)

Examples:

Lianja.showDialogPanel("GOOGLE CHART","lib:/googlechart.rsp");

Lianja.showDialogPanel("GOOGLE CHART","lib:/googlechart.rsp", 0, 0, true);

Tree View

lib:/treeview.rsp?parameter=value&parameter=value...

Parameter	Description	Default value
database	The database for the treeview.	southwind
delegatelib	The optional name of the delegate library containing the delegates. This should be written in JavaScript for Web/Mobile Apps.
expandall	Expand all nodes.	false
fields	The fields for the treeview: comma separated list or '*' for all.	*
filter	An optional filter expression to restrict the data displayed in the treeview.
fontsize	The font size for the treeview.	16
groupby	The ordering and grouping of the data.	country,region,city
key	The key expression for the treeview. This will be passed as the second argument to the onclick and ondblclick delegates.	contactname
onclick	The optional delegate to be called when a node is clicked. The delegate is called with two arguments: the node title and the node key.
ondblclick	The optional delegate to be called when a node is double-clicked. The delegate is called with two arguments: the node title and the node key.
showicons	Show the treeview icons on expandable rows.	true
style	The style skin for the treeview.	win8
table	The table for the treeview.	customers
title	The field for the lowest child node.	companyname
tooltips	The style skin for the treeview.	true

Examples:

Lianja.showDialogPanel("TREE VIEW","lib:/treeview.rsp");

Lianja.showDialog("TREE VIEW","lib:/treeview.rsp", 0, 0, true);

Google Map View

lib:/googlemap.rsp?parameter=value&parameter=value...

Parameter	Description	Default value
address	Human-readable postal address	Boston,MA
embedded	Currently ignored.	false
info	Enable/disable display of the info tip. From v9.0.	true
latlng	Comma-separated latitude,longitude coordinates. From v9.0.

Examples:

Lianja.showDialogPanel("CUSTOMER LOCATION","lib:/googlemap.rsp");

Lianja.showDialog("CUSTOMER LOCATION","lib:/googlemap.rsp",0,0,true);

Lianja.showDialog("GOOGLE MAP","lib:/googlemap.rsp?latlng=37.423021,-122.083739&info=false",0,0,false);

OrgChart View

lib:/orgchart.rsp?parameter=value&parameter=value...

Parameter	Description	Default value
backcolordelegate	The optional delegate to return the background color for the node for the current record being processed.
caption	An expression that will be evaluated and displayed as the node caption (may contain HTML).	base64_encode("title")
clickdelegate	The optional delegate to be called when a node is clicked. The delegate is called with one argument: the node keycolumn.
customlibrary	The optional name of a LianjaScript procedure library. This will be loaded with set procedure.
database	The database for the Orgchart.	southwind
dblclickdelegate	The optional delegate to be called when a node is double-clicked. The delegate is called with one argument: the node keycolumn.
delegatelib	The optional name of the delegate library containing the delegates. This should be written in JavaScript for Web/Mobile Apps.
description	An expression that will be evaluated and displayed as the node details beneath the caption (may contain HTML).	base64_encode("trim(firstname) + ' ' + trim(lastname) + ' ' + etos(hiredate)"))
editable	Allow editing of node captions.	false
filter	An optional filter expression to restrict the data displayed in the Orgchart.
forecolordelegate	The optional delegate to return the foreground color for the node for the current record being processed.
idcolumn	Column name for the Child ID column (this must be numeric).	employeeid
idparentcolumn	The column name for the Parent ID column (this must be numeric).	reportsto
keycolumn	The name of the column that will be passed to the click and dblClick delegates as an argument.	lastname
nodeheight	Height of nodes.	160
nodewidth	Width of nodes.	160
showcontrols	Show add child node and delete current node icocns.	false
table	The table for the Orgchart.	employees
titlebackcolor	Node background color.	#f5f5f5

Examples:

Lianja.showDialog("ORGCHART VIEW","lib:/orgchart.rsp",1500,500,true);

Catalog View

lib:/catalogview.rsp?parameter=value&parameter=value...

Parameter	Description	Default value
backcolor	Cell background color.	#e5e5e5
borderbottomandrightcolor	Cell bottom and right border color.	#b0b0b0
bordertopandleftcolor	Cell top and left border color.	lightgray
caption	The name of a character column whose contents are displayed at the top of the cell.
captionkey	The search key expression to be postfixed to the captionlink when it is invoked. To perform a search in a page, specify the page's designated Search field.
captionlink	The inline delegate to invoke when the caption is clicked, e.g. to search in section1 in page1, specify page:page1.section1
cellfooter	Alternative 'Read more...' text to be displayed in the cell.
cellfooterkey	The search key expression to be postfixed to the cellfooterlink when it is invoked. To perform a search in a page, specify the page's designated Search field.
cellfooterlink	The inline delegate to invoke when the cellfooter link is clicked, e.g. to search in section1 in page1, specify page:page1.section1
clickdelegate	The optional delegate to be called when the 'Read more...' link is clicked. The delegate is called with one argument: the readmoresearchkey.
columns	The number of cells displayed on each row.	1
database	The database for the catalogview.	southwind
dblclickdelegate	The optional delegate to be called when the image is double-clicked. The delegate is called with one argument: the readmoresearchkey.
delegate	Optional LianjaScript procedure or prg tile producer. This should output the HTML to be displayed in the cells.
delegatelib	Optional LianjaScript procedure library. This will be loaded with set procedure and can contain the delegate tile producer procedure.
details	An expression or the name of a column whose contents are displayed in the details area of the cell.	No details specified
filter	An optional filter expression to restrict the data displayed in the catalogview.
gridlines	Currently ignored.	false
heading	Optional text to display above the cells.
image	The name of the (blob/object) column in the table containing the image for each cell.
imageheight	The height of the image (pixels).	200px
imagewidth	The width of the image (pixels).	200px
orderby	The optional orderby expression for the data in the catalogview.
pagenumber	When paginate is enabled, the number of the starting page.	1
pagesize	When paginate is enabled, the number of cells per page.	8
paginate	Enable pagination of the rows.	true
readmore	Whether the 'Read more...' link should be displayed in the cell.	false
readmorelink	The inline delegate to invoke when the 'Read more...' link is clicked, e.g. to search in section1 in page1, specify page:page1.section1
readmoresearchkey	The search key expression to be postfixed to the readmorelink when it is invoked. To perform a search in a page, specify the page's designated Search field. The value is also passed as an argument to the optional delegates: clickdelegate and dblclickdelegate.
readmoresize	Maximum height of details to display if readmore is enabled. The number of lines based on default font size. 0 is autosize.	0
sectionid	Section in which subsequent pages should be displayed when paginate is enabled, e.g. for section1 in page1, specify page1.section1
subcaption	The name of a column whose contents are displayed as a subcaption.
table	The table for the catalogview.	customers
targetui	Adjust for specific target UI	Web. Valid values are web, phone, tablet

Examples:

Lianja.showDialogPanel("CATALOG VIEW","lib:/catalogview.rsp?image=photo&details=notes");

Lianja.showDialog("CATALOG VIEW","lib:/catalogview.rsp?image=photo&details=notes",0,0,true)

Report View

lib:/report.rsp?parameter=value&parameter=value...

Parameter	Description	Default value
clickdelegate	The optional delegate to be called when the hyperlink is clicked. This is called with two arguments; the field name and the hyperlink text.
columns	An optional comma separated list of column ordinal positions in the database table.
database	The database for the table(s) used by the report.
delegatelib	The optional name of the delegate library containing the delegates. This should be written in JavaScript for Web/Mobile Apps.
fields	An optional comma separated list of field names in the database table.
filter	An optional filter condition to be applied to the database/table records.
gridlines	Determines whether grid lines will be displayed in the report.	false
groupby	An optional comma separated list of field names that the report should be grouped on when calculating sub-totals.
heading	An optional heading to be displayed at the top of the report.
headings	An optional comma separated list of column headings.
hyperlinks	An optional comma separated list of field names that will be displayed as hyperlinks. See the click delegate.
subtotals	An optional comma separated list of column ordinal positions in the database table that subtotals will be displayed for.
table	The table for the report.

Examples:

Lianja.showDialogPanel("REPORT VIEW","lib:/report.rsp", "65%")

Lianja.showDialog("REPORT VIEW","lib:/report.rsp",0,0,true)

Gallery View

lib:/galleryview.rsp?parameter=value&parameter=value...

Parameter	Description	Default value
caption	The name of the column in the table (or expression) containing the caption for each tile.	alltrim(firstname)+' '+alltrim(lastname)+'<br>' +alltrim(address)+'<br>'+alltrim(city)+'<br>' +alltrim(region)+'<br>'+alltrim(country)
content	The name of the column in the table containing the content (typically a varchar/memo).	notes
contentdelegate	The name of the tile producer delegate to call to render custom content.	defaultContentdelegate
contenturl	Currently ignored.
database	The name of the database containing the table for the GalleryView.	southwind
delegatelib	The name of the custom library containing the tile producer and content producer delegates. This must be a LianjaScript procedure library and will be loaded with set procedure.
filter	The optional filter expression that restricts which records will be included.
heading	An expression to be used as the title of the content.	alltrim(firstname)+' '+alltrim(lastname)
orderby	The optional orderby expression for the data in the GalleryView.
summary	The name of the column in the table (or expression) containing the category caption for each tile.	title
table	The name of the table for the GalleryView.	employees
tiledelegate	The name of the tile producer delegate to call to render a custom tile.	defaultTiledelegate

Examples:

Lianja.showDialogPanel("GALLERY VIEW","lib:/galleryview.rsp");

Lianja.showDialog("GALLERY VIEW","lib:/galleryview.rsp",1000,600,true);

Comments View

lib:/commentsview.rsp?parameter=value&parameter=value...

Parameter	Description	Default value
caption	The caption to be displayed at the top of the section
category	Optional default category: new comments added in the CommentsView will be assigned to that category.
childkey	Optional child key column for the CommentsView.	childkey
database	The database containing the table for the CommentsView.	southwind
refreshinterval	Currently ignored.	10
table	The table for the CommentsView.	comments
topic	The matching topic for the comments to be displayed in the CommentsView.
topics	A comma-separated list of topics. These will be displayed in the header allowing the comments to be filtered.	Sales,Admin,Marketing,Support
username	The matching author for the comments to be displayed in the CommentsView.	admin

Examples:

Lianja.showDialogPanel("COMMENTS VIEW","lib:/commentsview.rsp", -850)

Lianja.showDialog("COMMENTS VIEW","lib:/commentsview.rsp")

Calendar View

lib:/calendar.rsp?parameter=value&parameter=value...

Parameter	Description	Default value
alldaycolumn	Required. The name of a logical column. It corresponds to the 'All Day' checkbox control.
aspectratio	Optional aspect ratio.
columns	Optional. Comma separated list of columns from the calendar table.
customdelegatelib	Optional, required if the Dynamic day and event color functions are specified. The name of a custom library file (LianjaScript prg) containing the day and event dynamic color delegates.
customlistview	Optional. The name of a delegate script to be called to handle the 'List' view.	calendar_listview.rsp
database	Database for the calendar table.
daybackcolordelegate	Optional. The name of a function in the customdelegatelib that returns dates and their associated background colors, allowing specific dates to be highlighted.
delegate	Optional. The name of a delegate script to be called when a cell in the calendar is clicked. Data is passed to the click delegate in JSON format.
demo	If true, populate the calendar with demo events.	false
endcolumn	Required. The name of a datetime column. It corresponds to the 'End Date' and 'End Time' date and time picker controls.
eventbackcolordelegate	Optional. The name of a function in the Custom delegate library that returns a color string (e.g. 'red' or '#FF0000') to be used as the background color for a specific event type.	eventbg
eventforecolordelegate	Optional. The name of a function in the Custom delegate library that returns a color string (e.g. 'red' or '#FF0000') to be used as the foreground color for a specific event type.	eventfg
eventresourcecaption	Optional. A character string for the 'Event Resource' header caption. If not specified, the default is 'Resource'. Only displayed when an Event resource column is specified.	Resource
eventresourcechoices	Required when Event resource column is specified, otherwise optional. A comma separated list or a SQL statement.
eventresourcevalue	Optional. The event resource matching value.
eventtypecaption	Optional. A character string for the 'Event Type' header caption. If not specified, the default is 'Type'.	Type
eventtypechoices	Optional. These are choices for the Event type column and should be specified as a list of comma-separated character strings postfixed with optional background and foreground colors in the format :background:foreground. The colors are character strings and can be any of the standard web colors e.g. "pink", "lightgreen" or an HTML/CSS style color code e.g. "#cfcfcf". Events will be displayed in the calendar body using their event type's colors. Note that if the list starts with a comma, a blank event type will be displayed until the combobox is expanded.||valign="top"|
eventtypecolumn	Required. The name of a character column. It corresponds to the 'Event Type' control. The control is a free-entry textbox unless the Event type choices is populated, in which case it is a combobox and a choice must be made from the list. The calendar can also be filtered by the event type, by specifying a valid event type in the Event type value attribute.	eventtype
filter	Optional. A valid filter expression that will be used in a SQL SELECT statement to restrict the records displayed in the calendar.
hideformbar	Optional. Hide the form bar controls.
keyexpr	Optional. The key expression for the events in the table.
keyvalue	Optional. The key expression matching value.
month	Optional. The character starting month.	cmonth(date())
notescolumn	Optional. The name of a varchar/memo column storing event notes.
pageid	Currently ignored.
repeatingcolumn	Required. The name of an integer or numeric column. It corresponds to the 'Repeat' checkbox control.
resourcepanelwidth	Optional. The width of the 'Event Resource' panel in pixels. If 0, defaults to 120 pixels.	120
rowid	Optional.	rowid
sectionid	Optional. ID of containing section.	(current section ID)
startcolumn	Required. The name of a datetime column. It corresponds to the 'Start Date' and 'Start Time' date and time picker controls.
table	Table for the calendar data.
targetui	Optional. Specify the target UI: phone, tablet, web.
titlecolumn	Required. The name of a character column. It corresponds to the 'Event Title' control, a free-entry textbox.
view	The starting view for the calendar. 'Month', 'Week' or 'Day' can be selected.	Month
week	Optional. The starting week number.
year	Optional. The starting year.	etos(year(date()))

Examples:

Lianja.showDialogPanel("CALENDAR VIEW","lib:/calendar.rsp", "65%")

Lianja.showDialog("CALENDAR VIEW","lib:/calendar.rsp", 1000,600)

Web Editor View

lib:/web_editor.rsp?parameter=value&parameter=value...

Parameter	Description	Default value
column	The optional column to be edited
database	The optional database containing the table/column to be edited
delegatelib	The optional name of the delegate library containing the delegates. This should be written in JavaScript for Web/Mobile Apps.
html	The optional base64 encoded html to be edited
readdelegate	The optional name of the delegate to handle a read operation. It is passed with four arguments e.g. readDelegate(database, table, column, rowid). It should return the html which should be base64 encoded.
rowid	The optional rowid/recno that should be edited.
savedelegate	The optional name of the delegate to handle a save operation. It is passed with five arguments e.g. saveDelegate(database, table, column, rowid, html). The html is base64 encoded.
table	The optional table containing the column to be edited

Examples:

Lianja.showDialogPanel("EDITOR VIEW","lib:/web_editor.rsp", "65%")

Lianja.showDialog("EDITOR VIEW","lib:/web_editor.rsp", 1000, 600, true)