v1.3 Lianja.showDialog()

As I've previously mentioned, Lianja.showDialog() and Lianja.showDialogPanel() are now both implemented in the LianjaWebFramework.

Here is a simple example to show you what can be done very easily.

Fire up the example_webapp1 App.

Attachment 841

Click the "Map" menu item and the map for the currently displayed customer is displayed by calling the Google mapping API with the customers address.

Attachment 842

This is the code that is called when you click on the "Map" menu item.

Code:

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

Notice how I can reference the data in the "customers" cursor just as I would do so in Lianja/VFP.

Obviously you can add additional information to this dialog content.

Here is an example of sliding in a DialogPanel. Again, this can contain a complete App that you have deployed.

Attachment 844

And the code that slides in this DialogPanel.

Code:

// The last parameter is the width that I want this DialogPanel to be Lianja.showDialogPanel("EMPLOYEE INFORMATION", "showdialogpanel_employee.rsp?employeeid={employees.employeeid}", 500);

As I mentioned above, I can in fact display another App in the Dialog that pops up just by specifying the html filename for the App.

You can also write server side JavaScript files with a .jssp extension if that takes your fancy.

If you have existing PHP generated content you can specify that URL using a .php extension. The same goes for .aspx pages. This makes for good integration with your existing code and data.

I Can add "Cancel" and "Done" buttons that enable me to callback some JavaScript functions that will in turn refresh the App content, navigate to another page or apply a search filter to a section of a the page that is being displayed.

Pretty powerful stuff, making it easy to slide in content with Lianja.showDialogPanel() or popup query forms etc using Lianja.showDialog() with minimum coding required.

Also remember that in v1.3 the Cloud Server has full integration with Virtual Tables so building Apps that integrate data from MSSQL, MySQL and any other ODBC data source is a breeze.

I should also add that this is all touch friendly too. When a Dialog or DialogPanel is displayed you can touch anywhere outside of them to close them.

In the case of a DialogPanel swiping from left to right with also close it and if you have a SwipeLeft delegate on a page you can slide a DialogPanel in using that gesture.

You can have as many different Dialogs and DialogPanels as you want.

Tip: Specifying a width of "100%" for a DialogPanel will animate it in place and it will occupy the whole page viewport.

It is common in Tablet and Phone Apps to "flick" your finger from left to right over the left hand side of the display. To position the DialogPanel on the left hand side rather than the right side specify the width as a negative value (works on desktop too). You can then specify a "SwipeRight" delegate that will slide the DialogPanel in from the left.

Attachment 845

If you want to style the complete DialogPanel with no header and no buttons as you want to put your own in then do it like this.

Code:

// The second parameter is an empty title and the last parameter causes the buttons to be hidden Lianja.showDialogPanel("", "showdialogpanel_employee.rsp?employeeid={employees.employeeid}", 500, , undefined, undefined, undefined, undefined, 1);

Attachment 846

And lastly if you want to share DialogPanels across Apps put the code in the library and reference it like this.

Code:

Lianja.showDialogPanel("EMPLOYEE INFORMATION", "lib:/showdialogpanel_employee.rsp?employeeid={employees.employeeid}", 500);

Enjoy.