Difference between revisions of "Dialog Panels"

Revision as of 13:55, 26 December 2017

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

Customizing Dialog Panels

You can customize dialog panels in various ways.

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

Typically the page can be:

• A .rsp page url that dynamically generates HTML that is embedded in the dialog panel
• A .jssp page url that dynamically generates HTML that is embedded in the dialog panel
• A function which returns a container that is embedded in the dialog panel

Example when using a function.

Lianja.showDialogPanel(“EMPLOYEE DETAILS”, "createEmployeeDetails()");

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.