WebView custom Gadget [examples]

<%@ Language=VFP %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
</head>
<%
timeofday()
if len(database())=0
	open database southwind
endif
 
// get the column descriptions
use example in 0 current
astore(afieldList, fldlist(), ',')
declare afieldDesc[ fldcount() ]
adesc(afieldDesc)
use
 
// perform the query
tmpfile = sys(2015)	
select * from example order by state save as [&tmpfile]
use [&tmpfile] in 0 current
declare afieldList[ fldcount() ]
 
// declare some special symbols (html uses ampersand so do we)	
amp = chr(38) 
nbsp = amp + "nbsp;"  
 
// generate the html output
? ('<table width="100%" height="100%" cellpadding="5" cellspacing="0" bgcolor="white" border=0px>') 
? ('<tr bgcolor="gray">')
? ('<td align="center" colspan="&(fldcount())">')
? ('</td>')
? ('</tr>')  
 
// display column headings
? ('<tr bgcolor="#eaeaea">')
	for j=1 to fldcount()
		? ('<td halign=center valign=top>')
		? ('<b><font color="gray">' + afieldDesc[j] + '</font></b>')
		? ('</td>')
    next
? ('</tr>') 
? ('<tr bgcolor="darkgray" height="1px">' + replicate('<td></td>', fldcount()) + '</tr>')
 
// group subtotals by the STATE field 
last_state = state 
declare subtotals[3]
subtotals[1] = 0.0  	// limit
subtotals[2] = 0.0	// balance
subtotals[3] = 0.0	// available
m_limit = 0.0
m_balance = 0.0
m_available = 0.0 
 
// scan through the records generating the table rows and columns
goto top
 
// for all records...	   
for i=1 to reccount()+2
	if mod(i,2) = 0
    	rowcolor = "#f9f9f9"
    	altcolor = "#FFFFFF"
	else
		rowcolor = "#FFFFFF"        	
		altcolor = "#f9f9f9"
    endif
 
	// check for subtotal break
	if (state != last_state and i > 1) or (i > reccount())
		? ('<tr bgcolor="lightgray" height="1px">' + replicate('<td></td>', fldcount()) + '</tr>')
 
		// display subtotals
		? ('<tr bgcolor="#f5f5f5" color="gray">')
 
		if i <= reccount()+1
			? ('<td colspan="3" halign=left><b><font color="gray">Sub-total for state: ' + last_state + '</font></b>')
			? (replicate('<td>&(nbsp)</td>', 5))
		elseif i = reccount()+2
			? ('<td color="gray" halign=left><b>Totals:</b>')
			? (replicate('<td>&(nbsp)</td>', 7))
        endif
 
		? ('<td align=right>')
        tmpfld = currency(subtotals[1])
        fld = 'tmpfld'
		? ('<b><font color="gray">' + etos(&fld)+'&(nbsp)&(nbsp)' + '</font><b>')
		? ('</td>')
 
		? ('<td align=right>')
        tmpfld = currency(subtotals[2])
        fld = 'tmpfld'
		? ('<b><font color="gray">' + etos(&fld)+'&(nbsp)&(nbsp)' + '</font><b>')
		? ('</td>')
 
		? ('<td align=right>')
        tmpfld = currency(subtotals[3])
        fld = 'tmpfld'
		? ('<b><font color="gray">' + etos(&fld)+'&(nbsp)&(nbsp)' + '</font><b>')
		? ('</td>') 
		? (replicate('<td>&(nbsp)</td>', 1))
 
		? ('</tr>')
 
		? ('<tr bgcolor="white" height="1px">' + replicate('<td></td>', fldcount()) + '</tr>')
		if i > reccount()+1
			? ('<tr bgcolor="white" height="1px">' + replicate('<td></td>', fldcount()) + '</tr>')
			? ('<tr bgcolor="black" height="1px">' + replicate('<td></td>', fldcount()) + '</tr>')
        endif
 
		? ('<tr colspan="&(fldcount())" bgcolor="&altcolor">')
		? (replicate('<td>&(nbsp)</td>', fldcount()))
		? ('</tr>') 
 
		if i = reccount()+1			
		    subtotals[1] = m_limit  		// limit
		    subtotals[2] = m_balance		// balance
		    subtotals[3] = m_available		// available
        	loop
        endif
 
	    subtotals[1] = 0.0  	// limit
	    subtotals[2] = 0.0		// balance
	    subtotals[3] = 0.0		// available
 
		if i > reccount()+1
        	exit
        endif
    endif
 
	// save subtotal values       	
   	last_state = state 
   	subtotals[1] = subtotals[1] + limit
   	subtotals[2] = subtotals[2] + balance
   	subtotals[3] = subtotals[3] + available 
   	m_limit  = m_limit + limit
   	m_balance = m_balance + balance
   	m_available = m_available + available
 
	// for all columns...
	? ('<tr bgcolor="&rowcolor">')
	for j=1 to fldcount()
		fld = afieldlist(j)
		if (upper(fld) = 'LIMIT' or upper(fld) = 'BALANCE' or upper(fld) = 'AVAILABLE')
        	tmpfld = currency(&fld)
        	fld = 'tmpfld'
			? ('<td valign=top align=right>')
		else            	
			? ('<td valign=top align=left>')
        endif
		? (etos(&fld)+"&(nbsp)&(nbsp)")
		? ('</td>')
    next   
 
	? ('</tr>')
	skip
next  
 
? ('</table>')
? ('** End of report elapsed time '+timeofday(4)+' seconds **')
erase '&tmpfile..dbf'
erase '&tmpfile..dbt'  
%>
</body>
</html>

https://www.lianja.com/doc/index.php/Example_webview_gadget_rsp_script


PHP:

// Lianja PHP WebView
//
echo '<html>';
echo '<head>';
echo '<style>';
echo '.tablecaption { background: gray; font-weight: bold; color: white; height:26px; }';
echo '.smallfont { font-size:small; }';
echo 'body { padding: 0px; margin: 0px; border: 1px solid lightgray; border-top: 1px solid white;}';
echo '</style>';
echo '</head>';
echo '<body>'; 
 
// open the southwind database
$db = Lianja::openDatabase("southwind");
 
// Open a recordset
$rs = $db->openRecordSet("select * from example"); 
 
// main table
echo '<table cellpadding="5">'; 
echo '<caption class="tablecaption">Example PHP Report</caption>';
 
// print table headings 
$rs->movefirst(); 
 
echo '<tr bgcolor="lightgray" class="smallfont">';
for ($j=0; $j<$rs->fcount(); ++$j) 
{
	echo '<th><font color="white">' . $rs->fields($j)->name . '</font></th>';
}
echo "</tr>";
 
 
// Traverse the recordset and write the output into the Webview section.
for ($i=0; $i<$rs->reccount(); ++$i)
{
	if (($i%2) == 0)
	{
    	$rowcolor = "#f1f6fe";
    	$altcolor = "#FFFFFF";
	}
	else
	{
		$rowcolor = "#FFFFFF";        	
		$altcolor = "#f1f6fe";
	}
 	echo '<tr bgcolor="' . $rowcolor . '" color="darkgray" class="smallfont" valign="top">';
	for ($j=0; $j<$rs->fcount(); ++$j)
	{
		$name = $rs->fields($j)->name;
		$value = $rs->fields($j)->value;
		if (in_array($name, array('LIMIT', 'AVAILABLE', 'BALANCE')))
		{
			echo '<td align="right">$' . sprintf("%-8.2f", $value) . '</td>';
		}
		else
		{
			echo '<td>' . $value . '</td>';
		}
	}
	echo '</tr>';
	$rs->movenext(); 
}
 
// end of table
echo '</table>';
 
 
// Close the recordset	
$rs->close(); 
 
// end of report
echo '<hr />Report complete at <b>' . date("r", time()) . '</b>'; 
 
// Close off HTML tags
echo '</body>';
echo '</html>';

Python:

#
# Lianja Custom Python WebView
#
#
import Lianja
import time
 
# The output of the "print" command will be redirected into the WebView.
print "<html>"
print "<head>"
print "<style>"
print ".tablecaption { background: gray; font-weight: bold; color: white; \
  height:26px; }"
print ".smallfont { font-size:small; }"
print "body { padding: 0px; margin: 0px; border: 1px solid lightgray; \
  border-top: 1px solid white;}"
print "</style>"
print "</head>"
print "<body>"
 
# open a database
db = Lianja.openDatabase("southwind") 
 
# open a recordset
rs = db.openRecordSet("select * from example")
 
# main table
print "<table cellpadding=\"5\">"
print "<caption class=\"tablecaption\">Example Python Report</caption>"
 
# column headings
rs.movefirst()
print "<tr bgcolor=\"lightgray\" class=\"smallfont\">"
for j in range( rs.fcount() ):
	print "<th><font color=\"white\">" + rs.fields(j).name + "</font></th>"
print "</tr>"
 
# Traverse the recordset and write the output into the Webview section.
for i in range( rs.reccount() ):
	if ((i%2) == 0):
		rowcolor = "#f1f6fe"
		altcolor = "#FFFFFF"
	else:
		rowcolor = "#FFFFFF"       	
		altcolor = "#f1f6fe"
 	print "<tr bgcolor=\"" + rowcolor + "\" color=\"darkgray\" class=\"smallfont\" valign=top>"
	for j in range( rs.fcount() ):
		if rs.fields(j).name in [ "LIMIT", "BALANCE", "AVAILABLE" ]:
			print "<td align=right>$%.2f</td>" % rs.fields(j).value
		else:
			print "<td>%s</td>" % rs.fields(j).value
	print "</tr>"
	rs.movenext()
 
# end of table
print "</table>"
 
# Close the RecordSet	
rs.close() 
 
# End of report
print "<hr>Report complete at <b>" + time.asctime() + "</b>" 
 
# Close off HTML tags
print "</body>"
print "</html>"

https://www.lianja.com/doc/index.php/Example_webview_gadget_Python_script


JS:

<%@ Language=JavaScript %>
<html>
<head>
<style>
.tablecaption { background: gray; font-weight: bold; color: white; height:26px; }
.smallfont { font-size:small; }
body { padding: 0px; margin: 0px; border: 1px solid lightgray; border-top: 1px solid white;}
</style>
</head>
<body>
<%
db = Lianja.openDatabase("southwind");
 
// Open a recordset
rs = db.openRecordSet("select * from example");
 
// main table
print("<table cellpadding=\"5\">"); 
print("<caption class=\"tablecaption\">Example JavaScript Report</caption>");
 
// print table headings 
rs.moveFirst(); 
print("<tr bgcolor=\"lightgray\" class=\"smallfont\">");
for (j=0; j < rs.fieldcount; ++j)
{
	print("<th><font color=\"white\">" + rs.fields(j).name + "</font></th>");
}
print("</tr>");
 
// Traverse the recordset and write the output into the Webview section.
for (i=0; i < rs.reccount; ++i)
{
	if ((i%2) == 0)
	{
    	rowcolor = "#f1f6fe";
    	altcolor = "#FFFFFF";
	}
	else
	{
		rowcolor = "#FFFFFF";        	
		altcolor = "#f1f6fe";
	}
 	print("<tr bgcolor=\"" + rowcolor + "\" color=\"darkgray\" class=\"smallfont\" valign=top>");
	for (j=0; j < rs.fieldcount; ++j)
	{
		name = rs.fields(j).name;
		value = rs.fields(j).value;
		if (['LIMIT', 'AVAILABLE', 'BALANCE'].indexOf(name) >= 0)
		{
			print("<td align=right>$" + value.toFixed(2) + "</td>");
		}
		else
		{
			print("<td>" + value + "</td>");
		}
	}
	print("</tr>");
	rs.moveNext(); 
}
 
// end of table
print("</table>");
 
// Close the recordset	
rs.close(); 
 
// end of report
print("<hr>Report complete at <b>" + new Date() + "</b>"); 
%>
</body>
</html>

WebView [examples]

The WebView Section and the WebView Gadget provide the ability to render content generated by any URL and integrate this in with a Lianja App. Use Macros in the URL to fetch contextual data content.

Lianja.showDialogPanel("CUSTOMER LOCATION", 
    "lib:/showdialog_map.rsp?address={customers.address}
                +{customers.city}+{customers.country}", 500);

https://www.lianja.com/doc/index.php/Web_Integration


 

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);
Lianja.showDialogPanel("DOCUMENT VIEW","lib:/documentview.rsp?file=compressed.tracemonkey-pldi-09.pdf")
Lianja.showDialog("DOCUMENT VIEW","lib:/documentview.rsp?file=compressed.tracemonkey-pldi-09.pdf",0,0,true);
Lianja.showDialogPanel("GOOGLE CHART","lib:/googlechart.rsp");
Lianja.showDialogPanel("GOOGLE CHART","lib:/googlechart.rsp", 0, 0, true);
Lianja.showDialogPanel("TREE VIEW","lib:/treeview.rsp");
Lianja.showDialog("TREE VIEW","lib:/treeview.rsp", 0, 0, true);
Lianja.showDialogPanel("CUSTOMER LOCATION","lib:/googlemap.rsp");
Lianja.showDialog("CUSTOMER LOCATION","lib:/googlemap.rsp",0,0,true);
Lianja.showDialog("ORGCHART VIEW","lib:/orgchart.rsp",0,0,true);
Lianja.showDialogPanel("CATALOG VIEW","lib:/catalogview.rsp")
Lianja.showDialog("CATALOG VIEW","lib:/catalogview.rsp",0,0,true);
Lianja.showDialogPanel("REPORT VIEW","lib:/report.rsp", "65%")
Lianja.showDialog("REPORT VIEW","lib:/report.rsp",0,0,true)
Lianja.showDialogPanel("GALLERY VIEW","lib:/galleryview.rsp");
Lianja.showDialog("GALLERY VIEW","lib:/galleryview.rsp",1000,600,true);
Lianja.showDialogPanel("COMMENTS VIEW","lib:/commentsview.rsp", -850)
Lianja.showDialog("COMMENTS VIEW","lib:/commentsview.rsp")
Lianja.showDialogPanel("CALENDAR VIEW","lib:/calendar.rsp", "65%")
Lianja.showDialog("CALENDAR VIEW","lib:/calendar.rsp", 1000,600)
Lianja.showDialogPanel("EDITOR VIEW","lib:/web_editor.rsp", "65%")
Lianja.showDialog("EDITOR VIEW","lib:/web_editor.rsp", 1000, 600, true)

https://www.lianja.com/doc/index.php/Using_WebViewWidgets


 

WebView

Q:

It seems that the html file has to be in “C:\lianja\apps\myapp” folder, then we can use that in the URL attribute of a webview section.

Can we use a html file that is in “c:\lianja\server\temp” folder as the URL source?

A:

The URL has to reference a file below the wwwroot, so you could not use c:\lianja\server\temp. If you create a temp folder under wwwroot (C:\lianja\cloudserver\tenants\public\wwwroot\ is the default), then you could specify this folder in the tmpnam() function, e.g.

Code:
m.cFile = tmpnam("c:\lianja\cloudserver\tenants\public\wwwroot\apps\myapp\temp\",".htm")
m.htmlrep = "c:\lianja\cloudserver\tenants\public\wwwroot\apps\myapp\rpt_template.htm"
m.cStr=FileToStr(htmlrep)
m.nResult=StrToFile(m.cStr, m.cFile)

return '/apps/myapp/temp/' + justfname(cFile)

 

 

WebView

Q:
In my webview, I’ve defined a hyperlink field (“hyperlinks=id”)

Code:
lib:/report.rsp?database=sfm&table=documenti&heading=Documenti aperti&fields=keylookup("Clienti", "id", keylookup("Progetti", "id", documenti.progettoid, clienteid), cliente),keylookup("Progetti", "id", documenti.progettoid, progetto),id,caso,priorita,descrizione,stato&headings=Cliente,Progetto,N Documento,Caso,Priorita,Descrizione,Stato&hyperlinks=id&gridlines=false

then I’ve flagged my “delagate hiperlink” and in the “delagate script”
Pagina_attivita_in_corso_Sezione_attivita_in_corso _linkclicked

then I’ve write my function:

Code:
////////////////////////////////////////////////////////////////
// Event delegate for 'linkclicked' event
proc Pagina_attivita_in_corso_Sezione_attivita_in_corso_linkclicked(arg)
        // insert your code here
        m_filtro = "page:documento.documento_documento?action=search&text=" + arg
        
        ? "m_filtro = " + m_filtro
                
        Lianja.showDocument(m_filtro)
        Lianja.showDocument("page:documento.documento_documento?action=show")   
endproc

when I click on my hyperlink, the args is empty..

A:
In the rsp file (backup the file if you are using the default lib:/report.rsp and remember that it will be overwritten by the installer) change the lines:

to

Code:
if len(target) > 0
        ?? ('&(space)' + m_link + '')
else
        ?? ('&(space)' + m_link + '')
endif

Q:
Can I use Lianja.evaluate to set a value on a canvas section from a webview
I would like to set a textbox on a canvas section with that variable value.
Using Linja.evaluate(“page.section.object”), I can get the current value of the textbox like so

Code:
var p = Lianja.evaluate('Lianja.get("page1.section1.txt1").value');
Lianja.showMessage(Lianja.evaluate(p));

However, I don’t seem to be able to set the value.

A:
As this is desktop you can use Lianja.execute( )
Lianja.evaluate( ) is for evaluating expressions.
Lianja.execute( ) is for executing Lianja/VFP commands.
Note that the Lianja system object is system wide across all sections in an app so you can perform operations on any UI elements directly. You only need to reference them with Lianja.get( )


Q:
I’ve declared some variables to be used by the whole app in a JS page specified as the custom library in the app settings. Works totally fine accessing and mutating them from within pages, sections and so on. Now I’m building a webview section to display these variables in a nice, CSS’d format. Problem is, when I try to print the variables to the webview’s html with javascript, it’s telling me they aren’t declared. Obviously they are, so it’s not seeing the variables declared in the app’s custom library.
lib_myapp.js

Code:
var myglobal = "abcd";

page1_section1.jssp:
Name: Screenshot - 22.2.2017. , 8_49_58.png Views: 0 Size: 2.4 KB

s it even possible to access those variables from the javascript on a JSSP page?
A:
Custom library code runs in the client.
WebViews have their own context although you can use the Lianja system object from any JavaScript that is generated and runs within that context.
Passing client side data to server pages should be done as parameters that should preferably be base64 encoded and if passing many of them added to an object which is JSON encoded on the client and JSON decoded on the server.
So to summarize. Considering a Webview is generated remotely it has no direct access to client side JavaScript variables.


If you are ever stuck in a webview section, right click it and use the inspector, it will let you know where your issue is.
If you are not sure how to use it, here is link that may be useful.
https://developer.chrome.com/devtools



Q:
I’m tryng to create a HTML Editor server page.
I’ve created a page, with a WebView section, saved as a Server Page.

Question:
is possible to force the ControlSource of the webview section?

I’ve try with:

Code:
public Ps_ControlSource
Ps_ControlSource = "articoli.abbinamenti"
lianja.showdialog("EditorHTML", "EditorHTML")   
release Ps_ControlSource

then, in the Load of EditorHTML page:

Code:
section = lianja.get("section1")
value = Ps_ControlSource
section.ControlSource = value

but not work..
controlsource is a RW property of webview, but i I type:

Code:
a = lianja.get("EditArtCarTesto.section1")
? "-" + a.controlsource + "-"

I get: —
A:

Code:
a = lianja.get("EditArtCarTesto.section1").webview

 

Remember that you can change the attributes of the section and also those of the UI element inside it so you need to reference the element contained within the section which is a container.


A Webview section in a desktop app is not connected to an http server.
Attempting to use a FileReader is only valid in a web browser client not a desktop app with an embedded Webview.
The desktop client has a web server running internally in port 8002


Q:
I’ve a difference from Webview and printed webview.


If I print with:
Webview.printpreview(GETPRINTER(), ‘PORTRAIT’, ‘NATIVE’, ”, ‘A4’, 1)
then print from the preview..
not work.
A:
google this “a4 size in pixels” and experiment.

72 dpi (web) = 595 X 842 pixels
300 dpi (print) = 2480 X 3508 pixels (This is “A4” as I know it, i.e. “210mm X 297mm @ 300 dpi”)
600 dpi (print) = 4960 X 7016 pixels
Try generating as a “PDF” rather than “native”
http://www.lianja.com/doc/index.php/EXECRSP()

also, you need to specify the output filename for the PDF file. Read the doc for WebView print()

http://www.lianja.com/doc/index.php/Webview
Webview.print(GETPRINTER(), ‘PORTRAIT’, ‘PDF’, ‘c:\temp\schedaarticolo.pdf’, ‘A4’, 1)


Q:
In a desktop application, I have a web view section and a canvas section.
How can I reference an id in the webview section from the canvas section?
A:
The WebView section has an evaluate() method which lets you execute JavaScript inside it.
evaluate() document.getElementById(‘name’).value;


Q:
access to the webview objects from outside the webview.

Meaning – If I want to change the innerhtml of an item in the webview from a canvas section how can that be accomplished.

I guess another way to ask the same question is what is the hierarchy of webview in the LOM/DOM

something like Lianja.page1.document.getElementById(“Title”).inne rHTML = “New Title!”;
A:
reference to the WebView section in Lianja.

myview = Lianja.getElementByID(“page1.section1”).webview

If you define a JavaScript function in your WebView HTML using a