Difference between revisions of "Using WebViewWidgets"

From Lianjapedia
Jump to: navigation, search
(Comments View)
 
(81 intermediate revisions by 2 users not shown)
Line 1: Line 1:
To keep coding (NoCode) to a minimum (save time) 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”).
+
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_Attributes|WebView section]] or in a custom WebView object created with createObject("[[Webview|webview]]").
 +
 
 +
<div style="height:40px;margin-bottom:5px;padding:5px;border:0px solid orange;border-left:5px solid orange;background:#fff8dc;vertical-align:middle;position:relative;">
 +
[[File:bm-noteicon.png|top|40px|link=]]<div style="position:absolute;top:3px;margin-bottom;bottom:5px;margin-left:50px;">
 +
From v9.4, ArticleView sections articles can also include embedded WebViewWidgets.  See [[ArticleView_Options#Embedded_WebViewWidgets|Embedded WebViewWidgets]].
 +
</div>
 +
<span style="height:6px;"> </span>
 +
</div>
  
 
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.
 
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.
Line 23: Line 30:
 
|-
 
|-
 
| columns
 
| columns
 +
| A comma separated list of columns to be displayed
 +
| customerid,companyname
 +
|-
 +
| filter
 +
| A filter expression e.g. customername='alfki'
 
|  
 
|  
 +
|-
 +
| maxrows
 +
| Maximum rows to select. default 1000.
 
|  
 
|  
 
|-
 
|-
| hyperlink
+
| groupby
 +
| A column name or ordinal number (starting at 1) which causes data to be grouped
 
|  
 
|  
 +
|-
 +
| norecordstext
 +
| Alternate text to display when no records selected
 
|  
 
|  
 +
|-
 +
| hyperlink
 +
| An optional column name that will be displayed as a hyperlink
 +
| customer
 
|-
 
|-
 
| sectionid
 
| sectionid
|  
+
| The optional page.section ID that will be searched using the hyperlink text when the hyperlink is clicked e.g. page1.section1
|  
+
| page1
 +
|-
 +
|valign="top"| 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.
 +
|
 +
|-
 +
| delegatelib
 +
| The optional name of the delegate library containing the delegates. This should be written in JavaScript for Web/Mobile Apps.
 +
|
 
|}
 
|}
  
Line 41: Line 72:
 
"CUSTOMER LIST",
 
"CUSTOMER LIST",
 
"lib:/datalistview.rsp?database=southwind&table=customers&columns=customerid," +
 
"lib:/datalistview.rsp?database=southwind&table=customers&columns=customerid," +
         +"companyname&hyperlink=companyname&sectionid=customers.section1”);
+
         +"companyname&hyperlink=companyname&sectionid=customers.section1");
 
</code>
 
</code>
  
[[File:wvw-1.png|middle|768px|link={{filepath: wvw-1.png}}]]
+
[[File:wvw-1.png|middle|768px|link={{filepath: wvw-1.png}}]]
  
 
<code lang="javascript">
 
<code lang="javascript">
Line 50: Line 81:
 
"CUSTOMER LIST",
 
"CUSTOMER LIST",
 
"lib:/datalistview.rsp?database=southwind&table=customers&columns=customerid,"  
 
"lib:/datalistview.rsp?database=southwind&table=customers&columns=customerid,"  
         + "companyname&hyperlink=companyname&sectionid=customers.section1”, 0, 0, true);
+
         + "companyname&hyperlink=companyname&sectionid=customers.section1", 0, 0, true);
 
</code>
 
</code>
  
 
[[File:wvw-2.png|middle|768px|link={{filepath: wvw-2.png}}]]
 
[[File:wvw-2.png|middle|768px|link={{filepath: wvw-2.png}}]]
 
  
===PDF Document View===
+
==PDF Document View==
  
 
lib:/documentview.rsp?parameter=value&parameter=value...
 
lib:/documentview.rsp?parameter=value&parameter=value...
Line 66: Line 96:
 
|-
 
|-
 
| file
 
| file
|  
+
| The pdf filename to be displayed
 
| compressed.tracemonkey-pldi-09.pd
 
| compressed.tracemonkey-pldi-09.pd
 
|}
 
|}
Line 73: Line 103:
  
 
<code lang="javascript">
 
<code lang="javascript">
Lianja.showDialogPanel(“DOCUMENT VIEW","lib:/documentview.rsp?file=compressed.tracemonkey-pldi-09.pdf")
+
Lianja.showDialogPanel("DOCUMENT VIEW","lib:/documentview.rsp?file=compressed.tracemonkey-pldi-09.pdf")
 
</code>
 
</code>
  
[[File:wvw-3.png|middle|768px|link={{filepath: wvw-3.png}}]]
+
[[File:wvw-3.png|middle|768px|link={{filepath: wvw-3.png}}]]
 +
 
 +
==Chart View==
 +
 
 +
lib:/chartview.rsp?parameter=value&parameter=value...
 +
 
 +
{| class="wikitable" width="100%"
 +
! Parameter
 +
! Description
 +
! Default value
 +
|-
 +
| charttype
 +
| The charttype; bar, line, pie or doughnut
 +
|
 +
|-
 +
| labels
 +
| The labels to display. A comma separated list
 +
|
 +
|-
 +
| caption
 +
| The chart caption
 +
|
 +
|-
 +
| data
 +
| Comma separated list of data values. Use {macros} to calculate the list of values to render.
 +
|
 +
|-
 +
| charttype
 +
| The charttype; bar, line, pie or doughnut
 +
|
 +
|}
 +
 
 +
'''Examples:'''
  
 
<code lang="javascript">
 
<code lang="javascript">

Lianja.showDialog("DOCUMENT VIEW","lib:/documentview.rsp?file=compressed.tracemonkey-pldi-09.pdf",0,0,true);
+
Lianja.showDialogPanel("CHART VIEW","lib:/chartview.rsp?charttype=bar&caption=Vacation days&labels=Q1,Q2,Q3,Q4&data=15,10,20,6")
 
</code>
 
</code>
  
[[File:wvw-4.png|middle|768px|link={{filepath: wvw-4.png}}]]
+
[[File:Chartview-example-wvw.png|middle|768px|link={{filepath:Chartview-example-wvw.png}}]]
  
===Google Chart View===
+
==Image View==
  
lib:/googlechart.rsp?parameter=value&parameter=value...
+
lib:/imageview.rsp?parameter=value&parameter=value...
  
 
{| class="wikitable" width="100%"
 
{| class="wikitable" width="100%"
 
! Parameter
 
! Parameter
 
! Description
 
! Description
 +
! Default value
 +
|-
 +
| database
 +
|
 +
|
 +
|-
 +
| table
 +
|
 +
|
 +
|-
 +
| column
 +
|
 +
|
 +
|-
 +
| filter
 +
| A filter expression e.g. customername='alfki'
 +
|
 +
|-
 +
| width
 +
|
 +
|
 +
|-
 +
| height
 +
|
 +
|
 +
|}
 +
 +
'''Examples:'''
 +
 +
<code lang="javascript">
 +
Lianja.showDialogPanel("IMAGE VIEW","lib:/imageview.rsp?database=southwind&table=employees\
 +
&column=photo&width=240px&height=240px&filter=lastname eq 'buchanan'")
 +
</code>
 +
 +
[[File:Imageview-example-wvw.png|middle|768px|link={{filepath:Imageview-example-wvw.png}}]]
 +
 +
==Google Chart View==
 +
 +
lib:/googlechart.rsp?parameter=value&parameter=value...
 +
 +
{| class="wikitable" width="100%"
 +
!width="10%"| Parameter
 +
!width="35%"| Description
 
! Default value
 
! Default value
 
|-
 
|-
Line 101: Line 206:
 
| Untitled
 
| Untitled
 
|-
 
|-
| data
+
|valign="top"| data
| The data is specific to the type of Google Chart being generated
+
|valign="top"| The data for the chart (specific to chart type)
| TBA
+
|valign="top"| base64_encode("[['Key', 'Value'],['Work',11], ['Eat',2], ['Commute',2], ['Watch TV',2], ['Sleep',7]]")
 
|-
 
|-
 
| options
 
| options
| The options are specific to the type of Google Chart being generated
+
| The options for the chart (specific to chart type)
| TBA
+
| ""
 
|}
 
|}
  

Examples:
+
'''Examples:'''
  
 
<code lang="javascript">
 
<code lang="javascript">
Line 116: Line 221:
 
</code>
 
</code>
  
[[File:wvw-5.png|middle|768px|link={{filepath:wvw-5.png}}]]
+
[[File:wvw-5.png|middle|768px|link={{filepath:wvw-5.png}}]]
  
 
<code lang="javascript">
 
<code lang="javascript">
Lianja.showDialogPanel("GOOGLE CHART","lib:/googlechart.rsp”, 0, 0, true);
+
Lianja.showDialogPanel("GOOGLE CHART","lib:/googlechart.rsp", 0, 0, true);
 
</code>
 
</code>
  
[[File:wvw_6.png|middle|768px|link={{filepath:wvw-6.png}}]]
+
[[File:wvw_6.png|middle|768px|link={{filepath:wvw-6.png}}]]
  
===Tree View===
+
==Tree View==
  
 
lib:/treeview.rsp?parameter=value&parameter=value...
 
lib:/treeview.rsp?parameter=value&parameter=value...
Line 165: Line 270:
 
| false
 
| false
 
|-
 
|-
| onclick
+
| clickdelegate
 
|  
 
|  
 
|  
 
|  
 
|-
 
|-
| ondblclick
+
| dblclickdelegate
 +
|
 +
|
 +
|-
 +
| delegatelib
 
|  
 
|  
 
|  
 
|  
 
|}
 
|}
  
Example:
+
'''Examples:'''
  
 
<code lang="javascript">
 
<code lang="javascript">
Line 180: Line 289:
 
</code>
 
</code>
  
[[File:wvw-7.png|middle|768px|link={{filepath: wvw-7.png}}]]
+
[[File:wvw-7.png|middle|768px|link={{filepath: wvw-7.png}}]]
  
 
<code lang="javascript">
 
<code lang="javascript">
Lianja.showDialog("TREE VIEW","lib:/treeview.rsp”, 0, 0, true);
+
Lianja.showDialog("TREE VIEW","lib:/treeview.rsp", 0, 0, true);
 
</code>
 
</code>
[[File:wvw-8.png|middle|768px|link={{filepath: wvw-8.png}}]]
+
[[File:wvw-8.png|middle|768px|link={{filepath: wvw-8.png}}]]
  
===Google Map View===
+
==Google Map View==
  
 
lib:/googlemap.rsp?parameter=value&parameter=value...
 
lib:/googlemap.rsp?parameter=value&parameter=value...
Line 197: Line 306:
 
|-
 
|-
 
| address
 
| address
|  
+
| Human-readable postal address
 
| Boston,MA
 
| 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.
 +
|
 +
|-
 
|}
 
|}
  
Line 207: Line 329:
 
</code>
 
</code>
  
[[File:wvw-9.png|middle|768px|link={{filepath:wvw-9.png}}]]
+
[[File:wvw-9.png|middle|768px|link={{filepath:wvw-9.png}}]]
  
 
<code lang="javascript">
 
<code lang="javascript">
Lianja.showDialog("CUSTOMER LOCATION”,”lib:/googlemap.rsp",0,0,true);
+
Lianja.showDialog("CUSTOMER LOCATION","lib:/googlemap.rsp",0,0,true);
 
</code>
 
</code>
  
[[File:wvw-10.png|middle|768px|link={{filepath:wvw-10.png}}]]
+
[[File:wvw-10.png|middle|768px|link={{filepath:wvw-10.png}}]]
  
===OrgChart View===
+
<code lang="javascript">
 +
Lianja.showDialog("GOOGLE MAP","lib:/googlemap.rsp?latlng=37.423021,-122.083739&info=false",0,0,false);
 +
</code>
 +
 
 +
[[File:wvw-10a.png|middle|768px|link={{filepath:wvw-10a.png}}]]
 +
 
 +
==OrgChart View==
  
 
lib:/orgchart.rsp?parameter=value&parameter=value...
 
lib:/orgchart.rsp?parameter=value&parameter=value...
Line 250: Line 378:
 
| caption
 
| caption
 
|  
 
|  
| base64_encode(“title”)
+
| base64_encode("title")
 
|-
 
|-
| description
+
|valign="top"| description
 
|  
 
|  
 
| base64_encode("trim(firstname)+' '+trim(lastname)+'<br>'+etos(hiredate)"))
 
| base64_encode("trim(firstname)+' '+trim(lastname)+'<br>'+etos(hiredate)"))
Line 268: Line 396:
 
|  
 
|  
 
|-
 
|-
| customlibrary
+
| editable
 
|  
 
|  
 
|  
 
|  
 
|-
 
|-
| clickdelegate
+
| addcaption
 
|  
 
|  
 
|  
 
|  
 
|-
 
|-
| dblclickdelegate
+
| showcontrols
|
+
 
|  
 
|  
 +
| false
 
|-
 
|-
| backcolordelegate
+
| clickdelegate
 
|  
 
|  
 
|  
 
|  
 
|-
 
|-
| forecolordelegate
+
| dblclickdelegate
 
|  
 
|  
 
|  
 
|  
 
|-
 
|-
| editable
+
| backcolordelegate
 
|  
 
|  
 
|  
 
|  
 
|-
 
|-
| addcaption
+
| forecolordelegate
 
|  
 
|  
 
|  
 
|  
 
|-
 
|-
| showcontrols
+
| delegatelib
 +
|
 
|  
 
|  
| false
 
 
|}
 
|}
  
Examples:
+
'''Examples:'''
  
 
<code lang="javascript">
 
<code lang="javascript">
Line 307: Line 435:
 
</code>
 
</code>
  
[[File:wvw-11.png|middle|768px|link={{filepath: wvw-11.png}}]]
+
[[File:wvw-11.png|middle|768px|link={{filepath: wvw-11.png}}]]
  
===Catalog View===
+
==Catalog View==
  
 
lib:/catalogview.rsp?parameter=value&parameter=value...
 
lib:/catalogview.rsp?parameter=value&parameter=value...
Line 451: Line 579:
 
|-
 
|-
 
| targetui
 
| targetui
|  
+
| Adjust for specific target UI
|  
+
| Web. Valid values are web, phone, tablet
 
|}
 
|}
  
Examples:
+
'''Examples:'''
  
Lianja.showDialogPanel(“CATALOG VIEW","lib:/catalogview.rsp")
+
<code lang="javascript">
 +
Lianja.showDialogPanel("CATALOG VIEW","lib:/catalogview.rsp")
 +
</code>
  
[[File:wvw-12.png|middle|768px|link={{filepath: wvw-12.png}}]]
+
[[File:wvw-12.png|middle|768px|link={{filepath: wvw-12.png}}]]
  
Lianja.showDialog("CATALOG VIEW","lib:/catalogview.rsp",0,0,true)
+
<code lang="javascript">
 +
Lianja.showDialog("CATALOG VIEW","lib:/catalogview.rsp",0,0,true);
 +
</code>
  
[[File:wvw-13.png|middle|768px|link={{filepath: wvw-13.png}}]]
+
[[File:wvw-13.png|middle|768px|link={{filepath: wvw-13.png}}]]
  
===Report View===
+
==Report View==
  
 
lib:/report.rsp?parameter=value&parameter=value...
 
lib:/report.rsp?parameter=value&parameter=value...
Line 473: Line 605:
 
! Description
 
! Description
 
! Default value
 
! Default value
 +
|-
 +
| type
 +
| The type of report to be generated. Currently only tabular reports are supported.
 +
| tabular
 
|-
 
|-
 
| database
 
| database
Line 483: Line 619:
 
|-
 
|-
 
| fields
 
| fields
|  
+
| An optional comma separated list of field names in the database table
 
|  
 
|  
 
|-
 
|-
 
| groupby
 
| groupby
|  
+
| An optional comma separated list of field names that the report should be grouped on when calculating sub-totals
 
| state
 
| state
 
|-
 
|-
| heading
+
|valign="top"| heading
|  
+
|valign="top"| An optional heading to be displayed at the top of the report
 
| Report for all clients by state
 
| Report for all clients by state
 
|-
 
|-
 
| headings
 
| headings
|  
+
| An optional comma separated list of column headings
 
|  
 
|  
 
|-
 
|-
 
| filter
 
| filter
|  
+
| An optional filter condition to be applied to the database/table records
 
|  
 
|  
 
|-
 
|-
| hyperlink
+
| hyperlinks
|  
+
| An optional comma separated list of field names that will be displayed as hyperlinks. See the click delegate below.
 
|  
 
|  
 
|-
 
|-
 
| columns
 
| columns
|  
+
| An optional comma separated list of column ordinal positions in the database table
 
| 2,4,3,5,6,7,8,9,10,11
 
| 2,4,3,5,6,7,8,9,10,11
 
|-
 
|-
 
| subtotals
 
| subtotals
|  
+
| An optional comma separated list of column ordinal positions in the database table that subtotals will be displayed for
 
| 9,10,11
 
| 9,10,11
 
|-
 
|-
 
| gridlines
 
| gridlines
|  
+
| Determines whether grid lines will be displayed in the report
|  
+
| true
 +
|-
 +
|valign="top"| 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.
 +
|
 +
|-
 +
| delegatelib
 +
| The optional name of the delegate library containing the delegates. This should be written in JavaScript for Web/Mobile Apps.
 +
|
 
|}
 
|}
  
Examples:
+
'''Examples:'''
  
Lianja.showDialogPanel(“REPORT VIEW","lib:/report.rsp”, “65%)
+
<code lang="javascript">
 +
Lianja.showDialogPanel("REPORT VIEW","lib:/report.rsp", "65%")
 +
</code>
  
[[File:wvw-14.png|middle|768px|link={{filepath: wvw-14.png}}]]
+
[[File:wvw-14.png|middle|768px|link={{filepath: wvw-14.png}}]]
  
 +
<code lang="javascript">
 
Lianja.showDialog("REPORT VIEW","lib:/report.rsp",0,0,true)
 
Lianja.showDialog("REPORT VIEW","lib:/report.rsp",0,0,true)
 +
</code>
  
[[File:wvw-15.png|middle|768px|link={{filepath: wvw-15.png}}]]
+
[[File:wvw-15.png|middle|768px|link={{filepath: wvw-15.png}}]]
  
===Gallery View===
+
==Gallery View==
  
 
lib:/galleryview.rsp?parameter=value&parameter=value...
 
lib:/galleryview.rsp?parameter=value&parameter=value...
Line 558: Line 706:
 
| defaultTiledelegate
 
| defaultTiledelegate
 
|-
 
|-
| caption
+
|valign="top"| caption
 
|  
 
|  
 
| alltrim(firstname)+' '+alltrim(lastname)+'<br>'+alltrim(address)+'<br>'+alltrim(city)+'<br>'+alltrim(region)+'<br>'+alltrim(country)
 
| alltrim(firstname)+' '+alltrim(lastname)+'<br>'+alltrim(address)+'<br>'+alltrim(city)+'<br>'+alltrim(region)+'<br>'+alltrim(country)
Line 587: Line 735:
 
|}
 
|}
  
Examples:
+
'''Examples:'''
  
 
<code lang="javascript">
 
<code lang="javascript">
Lianja.showDialogPanel(“GALLERY VIEW","lib:/galleryview.rsp");
+
Lianja.showDialogPanel("GALLERY VIEW","lib:/galleryview.rsp");</code>
</code>
+
  
 
[[File:wvw-16.png|middle|768px|link={{filepath:wvw-16.png}}]]
 
[[File:wvw-16.png|middle|768px|link={{filepath:wvw-16.png}}]]
  
 
<code lang="javascript">
 
<code lang="javascript">
Lianja.showDialog("GALLERY VIEW","lib:/galleryview.rsp",1000,600,true);
+
Lianja.showDialog("GALLERY VIEW","lib:/galleryview.rsp",1000,600,true);</code>
</code>
+
  
[[File:wvw-17.png|middle|768px|link={{filepath: wvw-17.png}}]]
+
[[File:wvw-17.png|middle|768px|link={{filepath: wvw-17.png}}]]
  
===Comments View===
+
==Comments View==
  
 
lib:/commentsview.rsp?parameter=value&parameter=value...
 
lib:/commentsview.rsp?parameter=value&parameter=value...
Line 647: Line 793:
 
|}
 
|}
  
Examples:
+
'''Examples:'''
  
 
<code lang="javascript">
 
<code lang="javascript">
Line 653: Line 799:
 
</code>
 
</code>
  
[[File:wvw-18.png|middle|768px|link={{filepath:wvw-18.png}}]]
+
[[File:wvw-18.png|middle|768px|link={{filepath:wvw-18.png}}]]
  
 
<code lang="javascript">
 
<code lang="javascript">
 
Lianja.showDialog("COMMENTS VIEW","lib:/commentsview.rsp")
 
Lianja.showDialog("COMMENTS VIEW","lib:/commentsview.rsp")
 
</code>
 
</code>
 
[[File:wvw-19.png|middle|768px|link={{filepath:wvw-19.png}}]]
 
  
===Calendar View===
+
[[File:wvw-19.png|middle|768px|link={{filepath:wvw-19.png}}]]
  
lib:/calendar.rsp?parameter=value&parameter=value...
+
==Calendar View==
 +
 
 +
lib:/calendar.rsp?parameter=value&parameter=value...
  
 
{| class="wikitable" width="100%"
 
{| class="wikitable" width="100%"
Line 670: Line 816:
 
! Default value
 
! Default value
 
|-
 
|-
| database
+
| alldaycolumn||||eventallday
|  
+
| southwind
+
 
|-
 
|-
| table
+
| aspectratio||||
|  
+
| employees_calendar
+
 
|-
 
|-
| view
+
| autoheight||||false
|  
+
| Month; valid values are Month, Week or Day
+
 
|-
 
|-
| eventtypecolumn
+
| columns||||eventtitle,eventstart,eventend,eventrepeat,eventallday,eventtype
|  
+
| eventtype
+
 
|-
 
|-
| filter
+
| customdelegatelib||||
|  
+
|  
+
 
|-
 
|-
| titlecolumn
+
| database||||
|  
+
| eventtitle
+
 
|-
 
|-
| startcolumn
+
| daybackcolordelegate||||
|  
+
| eventstart
+
 
|-
 
|-
| endcolumn
+
| delegate||||
|  
+
| eventend
+
 
|-
 
|-
| alldaycolumn
+
| demo||||false
|  
+
| eventallday
+
 
|-
 
|-
| repeatingcolumn
+
| endcolumn||||eventend
|  
+
| eventrepeat
+
 
|-
 
|-
| eventtypechoices
+
| eventbackcolordelegate||||eventbg
|  
+
| Sales Meeting:yellow:black,Meeting,Vacation:gray:lightgreen,Sick:red:yellow,Appointment:green:white,Other
+
 
|-
 
|-
| keyexpr
+
| eventforecolordelegate||||eventfg
|  
+
|  
+
 
|-
 
|-
| keyvalue
+
| eventresourcecaption||||Resource
|  
+
|  
+
 
|-
 
|-
| delegate
+
| eventresourcechoices||||
|  
+
| calendar_click
+
 
|-
 
|-
| rowid
+
| eventresourcevalue||||
|  
+
| rowid
+
 
|-
 
|-
| pageid
+
| eventtypecaption||||Type
|  
+
|  
+
 
|-
 
|-
| sectionid
+
| eventtypechoices||||
|  
+
|  
+
 
|-
 
|-
| columns
+
| eventtypecolumn||||eventtype
|  
+
|  
+
 
|-
 
|-
| readonly
+
| filter||||
|  
+
| false
+
 
|-
 
|-
| hideformbar
+
| hideformbar||||
|  
+
| false
+
 
|-
 
|-
| autoheight
+
| keyexpr||||
|  
+
| true
+
 
|-
 
|-
| customdelegatelib
+
| keyvalue||||
|  
+
|-
 +
| pageid||||
 +
|-
 +
| repeatingcolumn||||eventrepeat
 +
|-
 +
| resourcepanelwidth||||120
 +
|-
 +
| rowid||||rowid
 +
|-
 +
| sectionid||||(current section name)
 +
|-
 +
| startcolumn||||eventstart
 +
|-
 +
| table||||
 +
|-
 +
| targetui||||
 +
|-
 +
| titlecolumn||||eventtitle
 +
|-
 +
| view||||Month; valid values are Month, Week or Day
 +
|-
 +
|}
 +
 
 +
'''Examples:'''
 +
 
 +
<code lang="javascript">
 +
Lianja.showDialogPanel("CALENDAR VIEW","lib:/calendar.rsp", "65%")
 +
</code>
 +
 
 +
[[File:wvw-20.png|middle|768px|link={{filepath: wvw-20.png}}]]
 +
 
 +
<code lang="javascript">
 +
Lianja.showDialog("CALENDAR VIEW","lib:/calendar.rsp", 1000,600)
 +
</code>
 +
 
 +
[[File:wvw-21.png|middle|768px|link={{filepath: wvw-21.png}}]]
 +
 
 +
==Web Editor View==
 +
 
 +
lib:/web_editor.rsp?parameter=value&parameter=value...
 +
 
 +
{| class="wikitable" width="100%"
 +
! Parameter
 +
! Description
 +
! Default value
 +
|-
 +
| database
 +
| The optional database containing the table/column to be edited
 
|  
 
|  
 
|-
 
|-
| daybackcolordelegate
+
| table
|  
+
| The optional table containing the column to be edited
 
|  
 
|  
 
|-
 
|-
| eventbackcolordelegate
+
| column
 +
| The optional column to be edited
 
|  
 
|  
| eventbg
 
 
|-
 
|-
| eventforecolordelegate
+
| rowid
 +
| The optional rowid/recno that should be edited.
 +
|
 +
|-
 +
| html
 +
| The optional base64 encoded html to be edited
 
|  
 
|  
| eventfg
 
 
|-
 
|-
| targetui
+
|valign="top"| 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.
 
|  
 
|  
 +
|-
 +
|valign="top"| 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.
 +
|
 +
|-
 +
| delegatelib
 +
| The optional name of the delegate library containing the delegates. This should be written in JavaScript for Web/Mobile Apps.
 +
|
 
|}
 
|}
  

Examples:
+
'''Examples:'''
  
Lianja.showDialogPanel(“CALENDAR VIEW","lib:/calendar”, “65%)
+
<code lang="javascript">
 +
Lianja.showDialogPanel("EDITOR VIEW","lib:/web_editor.rsp", "65%")
 +
</code>
  
[[File:wvw-20.png|middle|768px|link={{filepath: wvw-20.png}}]]
+
[[File:wvw-22.png|middle|768px|link={{filepath: wvw-22.png}}]]
  
Lianja.showDialog(“CALENDAR VIEW","lib:/calendar”, 1000,600)
+
<code lang="javascript">
 
+
Lianja.showDialog("EDITOR VIEW","lib:/web_editor.rsp", 1000, 600, true)
[[File:wvw-21.png|middle|768px|link={{filepath: wvw-21.png}}]]
+
</code>
  
+
[[File:wvw-23.png|middle|768px|link={{filepath: wvw-23.png}}]]
 +
[[Category:Lianja v4.2]]
 +
[[Category:Lianja v9.4]]

Latest revision as of 12:14, 16 October 2023

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

Bm-noteicon.png

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
database southwind
table customers
columns A comma separated list of columns to be displayed customerid,companyname
filter A filter expression e.g. customername='alfki'
maxrows Maximum rows to select. default 1000.
groupby A column name or ordinal number (starting at 1) which causes data to be grouped
norecordstext Alternate text to display when no records selected
hyperlink An optional column name that will be displayed as a hyperlink customer
sectionid The optional page.section ID that will be searched using the hyperlink text when the hyperlink is clicked e.g. page1.section1 page1
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.
delegatelib The optional name of the delegate library containing the delegates. This should be written in JavaScript for Web/Mobile Apps.

Examples:

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

Wvw-1.png

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

Wvw-2.png

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

Examples:

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

Wvw-3.png

Chart View

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

Parameter Description Default value
charttype The charttype; bar, line, pie or doughnut
labels The labels to display. A comma separated list
caption The chart caption
data Comma separated list of data values. Use {macros} to calculate the list of values to render.
charttype The charttype; bar, line, pie or doughnut

Examples:

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

Chartview-example-wvw.png

Image View

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

Parameter Description Default value
database
table
column
filter A filter expression e.g. customername='alfki'
width
height

Examples:

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

Imageview-example-wvw.png

Google Chart View

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

Parameter Description Default value
type The chart type; pie, map, gauge, donut, bar, column pie
title The title for the chart Untitled
data The data for the chart (specific to chart type) base64_encode("[['Key', 'Value'],['Work',11], ['Eat',2], ['Commute',2], ['Watch TV',2], ['Sleep',7]]")
options The options for the chart (specific to chart type) ""

Examples:

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

Wvw-5.png

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

Wvw 6.png

Tree View

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

Parameter Description Default value
database southwind
table customers
title companyname
key contactname
groupby country,region,city
filter
fields *
expandall false
clickdelegate
dblclickdelegate
delegatelib

Examples:

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

Wvw-7.png

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

Wvw-8.png

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");

Wvw-9.png

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

Wvw-10.png

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

Wvw-10a.png

OrgChart View

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

Parameter Description Default value
database southwind
table employees
titlebackcolor lightblue
columnid employeeid
keycolumn lastname
parentid reportsto
caption base64_encode("title")
description base64_encode("trim(firstname)+' '+trim(lastname)+'
'+etos(hiredate)"))
nodewidth 160
nodeheight 160
filter
editable
addcaption
showcontrols false
clickdelegate
dblclickdelegate
backcolordelegate
forecolordelegate
delegatelib

Examples:

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

Wvw-11.png

Catalog View

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

Parameter Description Default value
database southwind
table customers
heading
cellfooter
cellfootertarget
cellfooterkey
image
imagewidth 200px
imageheight 200px
caption
subcaption
captiontarget
captionkey
details No details specified
filter
gridlines false
orderby
columns 1
readmore false
readmoresize 0
readmoresearchkey
readmorelink
paginate true
pagenumber 1
pagesize 8
sectionid
pagelinks 10
backcolor #e5e5e5
borderbottomandrightcolor #b0b0b0
bordertopandleftcolor lightgray
clickdelegate
dblclickdelegate
delegatelib
targetui Adjust for specific target UI Web. Valid values are web, phone, tablet

Examples:

Lianja.showDialogPanel("CATALOG VIEW","lib:/catalogview.rsp")

Wvw-12.png

Lianja.showDialog("CATALOG VIEW","lib:/catalogview.rsp",0,0,true);

Wvw-13.png

Report View

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

Parameter Description Default value
type The type of report to be generated. Currently only tabular reports are supported. tabular
database southwind
table example
fields An optional comma separated list of field names in the database table
groupby An optional comma separated list of field names that the report should be grouped on when calculating sub-totals state
heading An optional heading to be displayed at the top of the report Report for all clients by state
headings An optional comma separated list of column headings
filter An optional filter condition to be applied to the database/table records
hyperlinks An optional comma separated list of field names that will be displayed as hyperlinks. See the click delegate below.
columns An optional comma separated list of column ordinal positions in the database table 2,4,3,5,6,7,8,9,10,11
subtotals An optional comma separated list of column ordinal positions in the database table that subtotals will be displayed for 9,10,11
gridlines Determines whether grid lines will be displayed in the report true
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.
delegatelib The optional name of the delegate library containing the delegates. This should be written in JavaScript for Web/Mobile Apps.

Examples:

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

Wvw-14.png

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

Wvw-15.png

Gallery View

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

Parameter Description Default value
database southwind
table employees
filter
orderby
tiledelegate defaultTiledelegate
caption alltrim(firstname)+' '+alltrim(lastname)+'
'+alltrim(address)+'
'+alltrim(city)+'
'+alltrim(region)+'
'+alltrim(country)
summary title
contentdelegate defaultContentdelegate
heading alltrim(firstname)+' '+alltrim(lastname)
content notes
contenturl
delegatelib

Examples:

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

Wvw-16.png

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

Wvw-17.png

Comments View

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

Parameter Description Default value
database southwind
table comments
category
childkey childkey
caption Comments about {customers.companyname}
topic
topics
username admin
refreshinterval 10

Examples:

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

Wvw-18.png

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

Wvw-19.png

Calendar View

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

Parameter Description Default value
alldaycolumn eventallday
aspectratio
autoheight false
columns eventtitle,eventstart,eventend,eventrepeat,eventallday,eventtype
customdelegatelib
database
daybackcolordelegate
delegate
demo false
endcolumn eventend
eventbackcolordelegate eventbg
eventforecolordelegate eventfg
eventresourcecaption Resource
eventresourcechoices
eventresourcevalue
eventtypecaption Type
eventtypechoices
eventtypecolumn eventtype
filter
hideformbar
keyexpr
keyvalue
pageid
repeatingcolumn eventrepeat
resourcepanelwidth 120
rowid rowid
sectionid (current section name)
startcolumn eventstart
table
targetui
titlecolumn eventtitle
view Month; valid values are Month, Week or Day

Examples:

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

Wvw-20.png

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

Wvw-21.png

Web Editor View

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

Parameter Description Default value
database The optional database containing the table/column to be edited
table The optional table containing the column to be edited
column The optional column to be edited
rowid The optional rowid/recno that should be edited.
html The optional base64 encoded html to 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.
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.
delegatelib The optional name of the delegate library containing the delegates. This should be written in JavaScript for Web/Mobile Apps.

Examples:

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

Wvw-22.png

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

Wvw-23.png