Difference between revisions of "QueryPicker"

Latest revision as of 12:05, 2 January 2020

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 Picker is a powerful WebViewWidget that incorporates the functionality of Miller columns (also known as cascading lists) and a searchable data grid. It also has integrated support for drilling down through data using the Query Builder.

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

You will typically want to show the Query Picker associated with a specific field in a form or canvas section. You can use the "Dialog Button" to achieve that.

Now let's see that running as a Web App.

Edit a record then click the Dialog Button and the Query Picker will slide in from the right. You can of course have it slide in from the left and optionally animate across the whole of the UI viewport.

Clicking one of the "Search" icons in the column headers or the data grid header will show the Query Builder providing a powerfull means of drilling down through the data currently being queried.

Double clicking on a row in the data grid will select the column of your choice from the grid row and return back sliding the Query Picker out off the screen. You can specify a delegate to be called with one argument which is the value selected.

Let's now look at the ways we can activate the query picker and what parameters we can specify.

Query Picker Parameters

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

Slide in a Query Picker 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.showQueryPickerPanel(title, onselect, database, table, params, width);

You can have the Query Picker Dialog Panel slide in from the left by specifying a negative width e.g -900;

You can have the Query Picker Dialog Panel slide in and occupy the whole viewport by specifying a width of "100%".

Embed the Query Picker in a page

• Create a new page
• Add a WebView section
• In the URL of the webview section specify a url that defines the WebViewWidget parameters as described above. e.g.

lib:/querypicker.rsp?dialogpanel=false&buttons=Approve,Deny,View Details&onbuttonclick=myButtonClick

Notice how you can define your own custom buttons and declare a callback to handle button clicks.

• Add a function to the custom library for the section called myButtonClick which will be called when a row is selected in the data grid and a button is clicked

////////////////////////////////////////////////////////////////////////////////
function myButtonClick(btntext, value)
{
    messageBox("You clicked the '"+btntext+"' button for '"+value+"'");
}

Now run your App in the browser.

Then drill down through the data and click a button.

If required the cascading lists can have multiple columns.

From Lianja v5.0, you can display the data grid on its own with no cascading columns above: showcolumns=false.

So as you can see the Query Picker has a broad range of uses.