Difference between revisions of "QueryBuilder"

From Lianjapedia
Jump to: navigation, search
(→‎Overview)
Line 11: Line 11:
 
You will typically want to show the Query Builder when the "Search Icon" in pages and/or sections is clicked.  
 
You will typically want to show the Query Builder when the "Search Icon" in pages and/or sections is clicked.  
  
−
For pages:
+
==Using the Query Builder in Pages==
  
 
[[File:querybuilder1.png|middle|768px|link={{filepath:querybuilder1.png}}]]
 
[[File:querybuilder1.png|middle|768px|link={{filepath:querybuilder1.png}}]]
Line 19: Line 19:
 
[[File: querybuilder2.png|middle|768px|link={{filepath: querybuilder2.png}}]]
 
[[File: querybuilder2.png|middle|768px|link={{filepath: querybuilder2.png}}]]
  
−
For sections:
+
==Using the Query Builder in Sections==
  
−
[[File: querybuilder3.png|middle|768px|link={{filepath: querybuilder3.png}}]]
+
[[File: querybuilder31.png|middle|768px|link={{filepath: querybuilder31.png}}]]
  
 
Now let's see that in action.
 
Now let's see that in action.
  
 
[[File: querybuilder4.png|middle|768px|link={{filepath: querybuilder4.png}}]]
 
[[File: querybuilder4.png|middle|768px|link={{filepath: querybuilder4.png}}]]
 +
 +
==Query Builder Parameters==
 +
 +
lib:/querybuilder.rsp?parameter=value&parameter=value...
 +
 +
{| class="wikitable" width="100%"
 +
! Parameter
 +
! Description
 +
! width="30%" | Default value
 +
|-
 +
| database
 +
|
 +
| southwind
 +
|-
 +
| table
 +
|
 +
| order_details
 +
|-
 +
| tabletitle
 +
| The data grid header text
 +
| Order Details
 +
|-
 +
| tablecolumns
 +
| A comma separated list of columns to be displayed in the data grid
 +
|
 +
|-
 +
| columncount
 +
| The number of cascading list columns
 +
| 2
 +
|-
 +
|valign="top"| columns
 +
| The column definitions. This is a | separated list of definitions separated by a comma. The first item in the list is the table, the second is the column to query on. For all columns except the first, the next item in the list is the column to query as a condition using {} to represent the value selected from the previous column. Note how the { and } should be specified using their URL encoded values %7B and %7D. If the second item in the list is a ':' separated list itself then these items will be displayed as columns in the cascading list.
 +
|valign="top"| customers,customerid|orders,orderid,customerid='%7B%7D' |order_details,orderid,orderid=%7B%7D
 +
|-
 +
| columntitles
 +
| A comma separated list of column titles
 +
| Customers,Orders
 +
|-
 +
|valign="top"| datagrid
 +
| The table, column list and foreign key for the data grid. Separate each of these with  a vertical bar |.  Here again, specify {} as %7B%7D.
 +
|valign="top"| order_details|*|orderid=%7B%7D
 +
|-
 +
| selectcolumn
 +
| The column to select in the data grid
 +
| productid
 +
|-
 +
| columnsorderby
 +
| The orderby for each column. Each item should be separated by a vertical bar |
 +
|
 +
|-
 +
| orderby
 +
| The orderby for for the data grid
 +
|
 +
|-
 +
| showdatagrid
 +
| If set to false only the miller columns are displayed
 +
| true
 +
|-
 +
| showbadges
 +
| If set to false no badge counts are calculated in the miller columns
 +
| true
 +
|-
 +
| showbuttons
 +
| If set to false no buttons are displayed in the footer
 +
| true
 +
|-
 +
| buttons
 +
| An optional comma separated list of buttons captions to be displayed in the footer
 +
|
 +
|-
 +
|valign="top"| onbuttonclick
 +
| The optional delegate to be called when a custom button is clicked. The delegate is called with two arguments, the button caption and the text of the selected data column.
 +
|
 +
|-
 +
|valign="top"| onselect
 +
| The optional delegate to be called when an item in the data grid is chosen. The delegate is called with two arguments, the column name selected in the data grid and the text of the selected data column.
 +
|
 +
|-
 +
|valign="top"| delegatelib
 +
| The optional name of the delegate library containing the delegates. This should be written in JavaScript for Web/Mobile Apps.
 +
|
 +
|}
 +
 +
==Popup a Query Builder Dialog==
 +
 +
<code lang="javascript">
 +
function myQueryPickerCallback(key, value)
 +
{
 +
    messageBox("You chose '"+value+"'");
 +
}
 +
 +
var title = "Browse Orders";
 +
var onselect = "myQueryPickerCallback()";
 +
var database = "southwind";
 +
var table = "order_details";
 +
var params = "";    // e.g. parameter=value&parameter2=value...
 +
var width = 900;
 +
Lianja.showQueryBuilder(title, onselect, database, table, params, width);
 +
 +
</code>
 +
 +
==Slide in a Query Builder Dialog Panel==
 +
 +
<code lang="javascript">
 +
function myQueryPickerCallback(key, value)
 +
{
 +
    messageBox("You chose '"+value+"'");
 +
}
 +
 +
var title = "Browse Orders";
 +
var onselect = "myQueryPickerCallback()";
 +
var database = "southwind";
 +
var table = "order_details";
 +
var params = "";    // e.g. parameter=value&parameter2=value...
 +
var width = 900;
 +
Lianja.showQueryBuilderPanel(title, onselect, database, table, params, width);
 +
 +
</code>

Revision as of 00:29, 12 June 2018

Under construction

Overview

To keep coding (NoCode) 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").

The Query Builder is a powerful WebViewWidget that can be integrated into your Apps to provide end-users with the ability to drill down through data without you having to write any custom code.

A picture says a thousand words so let's look at the Query Builder then see how we can use it in our Apps.

You will typically want to show the Query Builder when the "Search Icon" in pages and/or sections is clicked.

Using the Query Builder in Pages

Querybuilder1.png

Now let's see that in action.

Querybuilder2.png

Using the Query Builder in Sections

Querybuilder31.png

Now let's see that in action.

Querybuilder4.png

Query Builder Parameters

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

Parameter Description Default value
database southwind
table order_details
tabletitle The data grid header text Order Details
tablecolumns A comma separated list of columns to be displayed in the data grid
columncount The number of cascading list columns 2
columns The column definitions. This is a | separated list of definitions separated by a comma. The first item in the list is the table, the second is the column to query on. For all columns except the first, the next item in the list is the column to query as a condition using {} to represent the value selected from the previous column. Note how the { and } should be specified using their URL encoded values %7B and %7D. If the second item in the list is a ':' separated list itself then these items will be displayed as columns in the cascading list. customers,customerid|orders,orderid,customerid='%7B%7D' |order_details,orderid,orderid=%7B%7D
columntitles A comma separated list of column titles Customers,Orders
datagrid The table, column list and foreign key for the data grid. Separate each of these with a vertical bar |. Here again, specify {} as %7B%7D. order_details|*|orderid=%7B%7D
selectcolumn The column to select in the data grid productid
columnsorderby The orderby for each column. Each item should be separated by a vertical bar |
orderby The orderby for for the data grid
showdatagrid If set to false only the miller columns are displayed true
showbadges If set to false no badge counts are calculated in the miller columns true
showbuttons If set to false no buttons are displayed in the footer true
buttons An optional comma separated list of buttons captions to be displayed in the footer
onbuttonclick The optional delegate to be called when a custom button is clicked. The delegate is called with two arguments, the button caption and the text of the selected data column.
onselect The optional delegate to be called when an item in the data grid is chosen. The delegate is called with two arguments, the column name selected in the data grid and the text of the selected data column.
delegatelib The optional name of the delegate library containing the delegates. This should be written in JavaScript for Web/Mobile Apps.

Popup a Query Builder Dialog

function myQueryPickerCallback(key, value)
{
    messageBox("You chose '"+value+"'");
}
 
var title = "Browse Orders";
var onselect = "myQueryPickerCallback()";
var database = "southwind";
var table = "order_details";
var params = "";    // e.g. parameter=value&parameter2=value...
var width = 900;
Lianja.showQueryBuilder(title, onselect, database, table, params, width);

Slide in a Query Builder Dialog Panel

function myQueryPickerCallback(key, value)
{
    messageBox("You chose '"+value+"'");
}
 
var title = "Browse Orders";
var onselect = "myQueryPickerCallback()";
var database = "southwind";
var table = "order_details";
var params = "";    // e.g. parameter=value&parameter2=value...
var width = 900;
Lianja.showQueryBuilderPanel(title, onselect, database, table, params, width);
Retrieved from "https://www.lianja.com/doc/index.php?title=QueryBuilder&oldid=21115"