Difference between revisions of "Using WebViewWidgets"
Barrymavin (Talk | contribs) (→Catalog View) |
Barrymavin (Talk | contribs) (→Chart View) |
||
(62 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
− | + | 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="overflow:auto;height:60px;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 25: | Line 30: | ||
|- | |- | ||
| columns | | columns | ||
− | | | + | | A comma separated list of columns to be displayed |
| customerid,companyname | | 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 | | 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 43: | 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§ionid=customers. | + | +"companyname&hyperlink=companyname§ionid=customers.section1"); |
</code> | </code> | ||
− | + | [[File:wvw-1.png|middle|768px|link={{filepath: wvw-1.png}}]] | |
<code lang="javascript"> | <code lang="javascript"> | ||
Line 52: | 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§ionid=customers. | + | + "companyname&hyperlink=companyname§ionid=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== | |
lib:/documentview.rsp?parameter=value¶meter=value... | lib:/documentview.rsp?parameter=value¶meter=value... | ||
Line 68: | Line 96: | ||
|- | |- | ||
| file | | file | ||
− | | | + | | The pdf filename to be displayed |
| compressed.tracemonkey-pldi-09.pd | | compressed.tracemonkey-pldi-09.pd | ||
|} | |} | ||
Line 75: | Line 103: | ||
<code lang="javascript"> | <code lang="javascript"> | ||
− | Lianja.showDialogPanel( | + | 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}}]] | |
+ | |||
+ | ==Chart View== | ||
+ | |||
+ | lib:/chartview.rsp?parameter=value¶meter=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. | ||
+ | | | ||
+ | |} | ||
+ | |||
+ | '''Examples:''' | ||
<code lang="javascript"> | <code lang="javascript"> | ||
− | + | 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: | + | [[File:Chartview-example-wvw.png|middle|768px|link={{filepath:Chartview-example-wvw.png}}]] |
− | == | + | ==Image View== |
− | lib:/ | + | lib:/imageview.rsp?parameter=value¶meter=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¶meter=value... | ||
+ | |||
+ | {| class="wikitable" width="100%" | ||
+ | !width="10%"| Parameter | ||
+ | !width="35%"| Description | ||
! Default value | ! Default value | ||
|- | |- | ||
Line 103: | Line 202: | ||
| Untitled | | Untitled | ||
|- | |- | ||
− | | data | + | |valign="top"| data |
− | | The data | + | |valign="top"| The data for the chart (specific to chart type) |
− | | | + | |valign="top"| base64_encode("[['Key', 'Value'],['Work',11], ['Eat',2], ['Commute',2], ['Watch TV',2], ['Sleep',7]]") |
|- | |- | ||
| options | | options | ||
− | | The options | + | | The options for the chart (specific to chart type) |
− | | | + | | "" |
|} | |} | ||
− | + | '''Examples:''' | |
<code lang="javascript"> | <code lang="javascript"> | ||
Line 118: | Line 217: | ||
</code> | </code> | ||
− | + | [[File:wvw-5.png|middle|768px|link={{filepath:wvw-5.png}}]] | |
<code lang="javascript"> | <code lang="javascript"> | ||
− | Lianja.showDialogPanel("GOOGLE CHART","lib:/googlechart. | + | Lianja.showDialogPanel("GOOGLE CHART","lib:/googlechart.rsp", 0, 0, true); |
</code> | </code> | ||
− | + | [[File:wvw_6.png|middle|768px|link={{filepath:wvw-6.png}}]] | |
− | + | ==Tree View== | |
lib:/treeview.rsp?parameter=value¶meter=value... | lib:/treeview.rsp?parameter=value¶meter=value... | ||
Line 167: | Line 266: | ||
| false | | false | ||
|- | |- | ||
− | | | + | | clickdelegate |
| | | | ||
| | | | ||
|- | |- | ||
− | | | + | | dblclickdelegate |
+ | | | ||
+ | | | ||
+ | |- | ||
+ | | delegatelib | ||
| | | | ||
| | | | ||
|} | |} | ||
− | + | '''Examples:''' | |
<code lang="javascript"> | <code lang="javascript"> | ||
Line 182: | Line 285: | ||
</code> | </code> | ||
− | + | [[File:wvw-7.png|middle|768px|link={{filepath: wvw-7.png}}]] | |
<code lang="javascript"> | <code lang="javascript"> | ||
− | Lianja.showDialog("TREE VIEW","lib:/treeview. | + | Lianja.showDialog("TREE VIEW","lib:/treeview.rsp", 0, 0, true); |
</code> | </code> | ||
− | + | [[File:wvw-8.png|middle|768px|link={{filepath: wvw-8.png}}]] | |
− | + | ==Google Map View== | |
lib:/googlemap.rsp?parameter=value¶meter=value... | lib:/googlemap.rsp?parameter=value¶meter=value... | ||
Line 199: | Line 302: | ||
|- | |- | ||
| 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 209: | Line 325: | ||
</code> | </code> | ||
− | + | [[File:wvw-9.png|middle|768px|link={{filepath:wvw-9.png}}]] | |
+ | |||
+ | <code lang="javascript"> | ||
+ | Lianja.showDialog("CUSTOMER LOCATION","lib:/googlemap.rsp",0,0,true); | ||
+ | </code> | ||
+ | |||
+ | [[File:wvw-10.png|middle|768px|link={{filepath:wvw-10.png}}]] | ||
<code lang="javascript"> | <code lang="javascript"> | ||
− | Lianja.showDialog(" | + | Lianja.showDialog("GOOGLE MAP","lib:/googlemap.rsp?latlng=37.423021,-122.083739&info=false",0,0,false); |
</code> | </code> | ||
− | + | [[File:wvw-10a.png|middle|768px|link={{filepath:wvw-10a.png}}]] | |
− | + | ==OrgChart View== | |
lib:/orgchart.rsp?parameter=value¶meter=value... | lib:/orgchart.rsp?parameter=value¶meter=value... | ||
Line 252: | Line 374: | ||
| caption | | caption | ||
| | | | ||
− | | base64_encode( | + | | 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 270: | Line 392: | ||
| | | | ||
|- | |- | ||
− | | | + | | editable |
| | | | ||
| | | | ||
|- | |- | ||
− | | | + | | addcaption |
| | | | ||
| | | | ||
|- | |- | ||
− | | | + | | showcontrols |
− | + | ||
| | | | ||
+ | | false | ||
|- | |- | ||
− | | | + | | clickdelegate |
| | | | ||
| | | | ||
|- | |- | ||
− | | | + | | dblclickdelegate |
| | | | ||
| | | | ||
|- | |- | ||
− | | | + | | backcolordelegate |
| | | | ||
| | | | ||
|- | |- | ||
− | | | + | | forecolordelegate |
| | | | ||
| | | | ||
|- | |- | ||
− | | | + | | delegatelib |
+ | | | ||
| | | | ||
− | |||
|} | |} | ||
− | Examples: | + | '''Examples:''' |
<code lang="javascript"> | <code lang="javascript"> | ||
Line 309: | Line 431: | ||
</code> | </code> | ||
− | + | [[File:wvw-11.png|middle|768px|link={{filepath: wvw-11.png}}]] | |
− | + | ==Catalog View== | |
lib:/catalogview.rsp?parameter=value¶meter=value... | lib:/catalogview.rsp?parameter=value¶meter=value... | ||
Line 453: | Line 575: | ||
|- | |- | ||
| targetui | | targetui | ||
− | | | + | | Adjust for specific target UI |
− | | | + | | Web. Valid values are web, phone, tablet |
|} | |} | ||
− | Examples: | + | '''Examples:''' |
<code lang="javascript"> | <code lang="javascript"> | ||
− | Lianja.showDialogPanel( | + | Lianja.showDialogPanel("CATALOG VIEW","lib:/catalogview.rsp") |
</code> | </code> | ||
− | + | [[File:wvw-12.png|middle|768px|link={{filepath: wvw-12.png}}]] | |
<code lang="javascript"> | <code lang="javascript"> | ||
Line 469: | Line 591: | ||
</code> | </code> | ||
− | + | [[File:wvw-13.png|middle|768px|link={{filepath: wvw-13.png}}]] | |
− | + | ==Report View== | |
lib:/report.rsp?parameter=value¶meter=value... | lib:/report.rsp?parameter=value¶meter=value... | ||
Line 493: | Line 615: | ||
|- | |- | ||
| 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 |
| | | | ||
|- | |- | ||
− | | | + | | 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:''' |
<code lang="javascript"> | <code lang="javascript"> | ||
− | Lianja.showDialogPanel("REPORT VIEW","lib:/report. | + | Lianja.showDialogPanel("REPORT VIEW","lib:/report.rsp", "65%") |
</code> | </code> | ||
− | + | [[File:wvw-14.png|middle|768px|link={{filepath: wvw-14.png}}]] | |
<code lang="javascript"> | <code lang="javascript"> | ||
Line 541: | Line 671: | ||
</code> | </code> | ||
− | + | [[File:wvw-15.png|middle|768px|link={{filepath: wvw-15.png}}]] | |
− | + | ==Gallery View== | |
lib:/galleryview.rsp?parameter=value¶meter=value... | lib:/galleryview.rsp?parameter=value¶meter=value... | ||
Line 572: | Line 702: | ||
| 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 601: | Line 731: | ||
|} | |} | ||
− | Examples: | + | '''Examples:''' |
<code lang="javascript"> | <code lang="javascript"> | ||
− | Lianja.showDialogPanel("GALLERY VIEW","lib:/galleryview.rsp") | + | Lianja.showDialogPanel("GALLERY VIEW","lib:/galleryview.rsp");</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== | |
lib:/commentsview.rsp?parameter=value¶meter=value... | lib:/commentsview.rsp?parameter=value¶meter=value... | ||
Line 661: | Line 789: | ||
|} | |} | ||
− | Examples: | + | '''Examples:''' |
<code lang="javascript"> | <code lang="javascript"> | ||
Line 667: | Line 795: | ||
</code> | </code> | ||
− | + | [[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}}]] |
− | lib:/calendar.rsp?parameter=value¶meter=value... | + | ==Calendar View== |
+ | |||
+ | lib:/calendar.rsp?parameter=value¶meter=value... | ||
{| class="wikitable" width="100%" | {| class="wikitable" width="100%" | ||
Line 684: | Line 812: | ||
! Default value | ! Default value | ||
|- | |- | ||
− | | | + | | alldaycolumn||||eventallday |
− | | | + | |
− | | | + | |
|- | |- | ||
− | | | + | | aspectratio|||| |
− | | | + | |
− | | | + | |
|- | |- | ||
− | | | + | | autoheight||||false |
− | | | + | |
− | | | + | |
|- | |- | ||
− | | | + | | columns||||eventtitle,eventstart,eventend,eventrepeat,eventallday,eventtype |
− | | | + | |
− | | eventtype | + | |
|- | |- | ||
− | | | + | | customdelegatelib|||| |
− | | | + | |
− | | | + | |
|- | |- | ||
− | | | + | | database|||| |
− | | | + | |
− | | | + | |
|- | |- | ||
− | | | + | | daybackcolordelegate|||| |
− | | | + | |
− | | | + | |
|- | |- | ||
− | | | + | | delegate|||| |
− | | | + | |
− | | | + | |
|- | |- | ||
− | | | + | | demo||||false |
− | | | + | |
− | | | + | |
|- | |- | ||
− | | | + | | endcolumn||||eventend |
− | | | + | |
− | | | + | |
|- | |- | ||
− | | | + | | eventbackcolordelegate||||eventbg |
− | | | + | |
− | | | + | |
|- | |- | ||
− | | | + | | eventforecolordelegate||||eventfg |
− | | | + | |
− | | | + | |
|- | |- | ||
− | | | + | | eventresourcecaption||||Resource |
− | | | + | |
− | | | + | |
|- | |- | ||
− | | | + | | eventresourcechoices|||| |
− | | | + | |
− | | | + | |
|- | |- | ||
− | | | + | | eventresourcevalue|||| |
− | | | + | |
− | | | + | |
|- | |- | ||
− | | | + | | eventtypecaption||||Type |
− | | | + | |
− | | | + | |
|- | |- | ||
− | | | + | | eventtypechoices|||| |
− | | | + | |
− | | | + | |
|- | |- | ||
− | | | + | | eventtypecolumn||||eventtype |
− | | | + | |
− | | | + | |
|- | |- | ||
− | | | + | | filter|||| |
− | | | + | |
− | | | + | |
|- | |- | ||
− | | hideformbar | + | | 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:''' | |
<code lang="javascript"> | <code lang="javascript"> | ||
− | Lianja.showDialogPanel("CALENDAR VIEW","lib:/calendar. | + | Lianja.showDialogPanel("CALENDAR VIEW","lib:/calendar.rsp", "65%") |
</code> | </code> | ||
− | + | [[File:wvw-20.png|middle|768px|link={{filepath: wvw-20.png}}]] | |
<code lang="javascript"> | <code lang="javascript"> | ||
− | Lianja.showDialog("CALENDAR VIEW","lib:/calendar. | + | Lianja.showDialog("CALENDAR VIEW","lib:/calendar.rsp", 1000,600) |
</code> | </code> | ||
− | [[File:wvw-21.png|middle|768px|link={{filepath: wvw-21.png}}]] | + | [[File:wvw-21.png|middle|768px|link={{filepath: wvw-21.png}}]] |
− | + | ==Web Editor View== | |
− | lib:/web_editor.rsp?parameter=value¶meter=value... | + | lib:/web_editor.rsp?parameter=value¶meter=value... |
{| class="wikitable" width="100%" | {| class="wikitable" width="100%" | ||
Line 823: | Line 912: | ||
| The optional column to be edited | | The optional column to be edited | ||
| | | | ||
+ | |- | ||
+ | | rowid | ||
+ | | The optional rowid/recno that should be edited. | ||
+ | | | ||
|- | |- | ||
| html | | html | ||
Line 828: | Line 921: | ||
| | | | ||
|- | |- | ||
− | | savedelegate | + | |valign="top"| savedelegate |
− | | The optional name of the delegate to handle a save operation. It is passed with | + | | 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 | + | |valign="top"| readdelegate |
− | | The optional name of the delegate to handle a read operation. It is passed with | + | | 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. |
| | | | ||
|- | |- | ||
Line 841: | Line 934: | ||
|} | |} | ||
− | + | '''Examples:''' | |
<code lang="javascript"> | <code lang="javascript"> | ||
− | Lianja.showDialogPanel("EDITOR VIEW","lib:/web_editor. | + | Lianja.showDialogPanel("EDITOR VIEW","lib:/web_editor.rsp", "65%") |
</code> | </code> | ||
− | + | [[File:wvw-22.png|middle|768px|link={{filepath: wvw-22.png}}]] | |
<code lang="javascript"> | <code lang="javascript"> | ||
− | Lianja.showDialog("EDITOR VIEW","lib:/web_editor. | + | Lianja.showDialog("EDITOR VIEW","lib:/web_editor.rsp", 1000, 600, true) |
</code> | </code> | ||
− | [[File:wvw-23.png|middle|768px|link={{filepath: wvw-23.png}}]] | + | [[File:wvw-23.png|middle|768px|link={{filepath: wvw-23.png}}]] |
− | + | [[Category:Lianja v4.2]] | |
− | + | [[Category:Lianja v9.4]] |
Latest revision as of 23:58, 23 April 2024
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.
Contents
Data List View
lib:/datalistview.rsp?parameter=value¶meter=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§ionid=customers.section1");
Lianja.showDialog( "CUSTOMER LIST", "lib:/datalistview.rsp?database=southwind&table=customers&columns=customerid," + "companyname&hyperlink=companyname§ionid=customers.section1", 0, 0, true);
PDF Document View
lib:/documentview.rsp?parameter=value¶meter=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")
Chart View
lib:/chartview.rsp?parameter=value¶meter=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. |
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¶meter=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'")
Google Chart View
lib:/googlechart.rsp?parameter=value¶meter=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");
Lianja.showDialogPanel("GOOGLE CHART","lib:/googlechart.rsp", 0, 0, true);
Tree View
lib:/treeview.rsp?parameter=value¶meter=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");
Lianja.showDialog("TREE VIEW","lib:/treeview.rsp", 0, 0, true);
Google Map View
lib:/googlemap.rsp?parameter=value¶meter=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¶meter=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);
Catalog View
lib:/catalogview.rsp?parameter=value¶meter=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")
Lianja.showDialog("CATALOG VIEW","lib:/catalogview.rsp",0,0,true);
Report View
lib:/report.rsp?parameter=value¶meter=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%")
Lianja.showDialog("REPORT VIEW","lib:/report.rsp",0,0,true)
Gallery View
lib:/galleryview.rsp?parameter=value¶meter=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");
Lianja.showDialog("GALLERY VIEW","lib:/galleryview.rsp",1000,600,true);
Comments View
lib:/commentsview.rsp?parameter=value¶meter=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)
Lianja.showDialog("COMMENTS VIEW","lib:/commentsview.rsp")
Calendar View
lib:/calendar.rsp?parameter=value¶meter=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%")
Lianja.showDialog("CALENDAR VIEW","lib:/calendar.rsp", 1000,600)
Web Editor View
lib:/web_editor.rsp?parameter=value¶meter=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%")
Lianja.showDialog("EDITOR VIEW","lib:/web_editor.rsp", 1000, 600, true)