Dialog Panels

From Lianjapedia
Jump to: navigation, search

Overview

Dialog Panels provide a clean and consistent UI for presenting additional information to your users that does not appear by default on the page. Dialog Panels animate into view from either the left or the right. On Mobile phones they slide over the viewport and occupy all of it to make best use of the available space. Closing a Dialog Panel causes it to animate back out from where it came from. Use Dialog Panels whenever you can as they are responsive and work on Desktop, Web and Mobile Apps.

Dialog Panel


When used in conjunction with {...} macros, Dialog Panels can display dynamic context sensitive content. This is the code used to display a Google map for the customer currently being displayed in the form. It is called by clicking or touching on the "Customer Location" button in the footer menu:

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


Standard Dialog Panels

Lianja includes many built-in WebViewWidgets that can be used in Dialogs and Dialog Panels to speed up development.

See Using WebViewWidgets for details.

Custom Dialog Panels

You can create custom dialog panels in a variety of ways.

Lianja.showDialogPanel( 
        title as Character, 
        page as Character
        [, width as Numeric
        [, action as Character
        [, text as Character]]] )

Typically the page can be:

  • A Lianja/VFP .rsp page url that dynamically generates HTML that is embedded in the dialog panel
  • A Javascript .jssp page url that dynamically generates HTML that is embedded in the dialog panel
  • A Python .pysp page url that dynamically generates HTML that is embedded in the dialog panel
  • A URL that fetches dynamic content from a remote web server
  • A function which returns a container that is embedded in the dialog panel. Remember to write this in JavaScript or TypeScript for Web/Mobile Apps.
  • A Visual Component created in the Canvas Designer or from a WebView based section. See Visual Components: Dialog Panels for examples.

If width is a negative number, the dialog panel will slide out from the left. If it is positive it will slide in from the right. Specifying a width of "100%" will animate the dialogPanel in place and it will occupy the whole page viewport. On phones, the dialog panel will slide in and always occupy the complete viewport.

Bm-noteicon.png
Pro Tip

Use the LIST HTML command in a .rsp page to generate a bootstrap styled picklist with clickable rows.

Example using a function to dynamically create the dialog panel.

function createEmployeeDetails()
{
    var cont = createObject("container");
    cont.backcolor = "lightgreen";
    return cont;
}
Lianja.showDialogPanel("EMPLOYEE DETAILS", "createEmployeeDetails()");
Bm-noteicon.png
Pro Tip

You can use the a Lianja Framework classes to build the UI to be embedded in the dialog panel.
We recommend you use Lianja UI Layouts to help you build a responsive UI. These can be used in any of the supported scripting languages.