ShowDialog

Posted: 2017-01-24 in ShowDialog

Pages to be used as UI Pages with Lianja.showDialog() and Lianja.showDialogPanel() should be created in a separate App from the one(s) from which they will be called – for example the customerlist UI Page used in the sample lianjademo App is in the ui_mypagelibrary (mypagelibrary in earlier versions) App, so can be modified when required.



‘search.rso’ will be the compiled version of ‘search.rsp’. How does that fit into your App?
Are any
functions/custom libraries required by your combobox available when it is called from another App with showdialog() instead of as a Page in its own App?


Q:
use a dialog panel and use filter as an action.
A:
define an activate delegate for your grid section in your UI Page that does the sort based on a memory variable you set before you call the showdialogpanel(), e.g.
Calling code:

Code:
nSortcol = 2
        lianja.showDialogPanel("Game List","gamelist",...)

Section.activate:

Code:
////////////////////////////////////////////////////////////////
// Event delegate for 'activate' event
proc Gamelist_grdGamelist_activate()
        Lianja.Get("Gamelist.grdGameList").grid.sort(nSortcol,1)
endproc

Q:
From the Lianja.showdialogpanel() UI Page, I can interact with the main Page?
A:
You can use Lianja.get() from the Custom UI Page in the Navigation Panel or opened by Lianja.showdialogpanel(). Public memory variables will also be available to the Custom UI Page, along with access to the database.


Lianja.showDialog() and Lianja.showDialogPane() return 1 if you click the ‘Done’ button and 0 otherwise.
Display of the buttons on a showDialog() is optional – full arguments are listed
here.
As Fabio says, if you
want to return a particular value, you can set a public variable.
You can also
perform a Lianja UI action (Lianja.showdocument()) as you exit the dialog, e.g. select a particular Page or Section and search for a record, or filter the data.


Q:
I opened my app and goto “Console” workspace
When I issue the command, “Lianja.ShowDialog(“Some title”,”Leave_Balance”), the system display only a blank popup window instead of my page in the popup window.
A:
Lianja.showDialog() displays pages from the UI page library not the current app.
Save the page in the UI a Page library to be able to use it like that.


Lianja.showDialog() surely as they can be modal or non modal.


Multiple Lianja pages can be displayed modal/non-modal using LIanja.showDialog() and/or Lianja.showDialogPanel().
When a UI page is loaded into a dialog or dialogpanel it is added into the LOM (Lianja Object Model) and can be manipulated using Lianja.getElementByID() and/or Lianja.showDocument().
In v1.3 Lianja.showDialog() and Lianja.showDialogPanel() have been extended so that they can render a custom UI that you create yourself.


Q:
I have a page with form section and I need to popup an editable grid when user click on a command button on the form section.
May I know how can this be done without totally displaying a new page with a grid section?
A:
In v1.3, You can use Lianja.showDialog() and specify a .prg that generates the contents of the popup dialog.
You can also use a
page that you have designed visually and saved in the UI page library.


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.

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.

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.

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.

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);

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

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


Prior to this version (1.3Beta5) Lianja.showDialog() and Lianja.showDialogPanel() only worked with page library files.
Now the filename can be a .vpx (as previously) or a .rsp, .jssp function that creates a custom section and embeds it in the Dialog.



Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s