Working with UI page libraries in RC4

PDF Print E-mail

Due to popular demand in Lianja App Builder RC4 we have added the ability to save pages in a "Visual Page Library" as re-usable UI page components.

This provides developers with the ability to visually lay out pages in the page builder (with all of the power and functionality of related sections) and re-use these pages in dialogs that can be popped-up in any delegate e.g. click on a dialog button, select a menuitem from the custom section menubar etc.

In keeping with the methodology for building Apps visually in Lianja (Apps are made up out of pages, pages are made up out of sections and UI transitions are handled by the Lianja ART engine) the ability to show a dialog that floats on top of the main App window is simple and concise. Take a look below at what you can achieve without any coding being required.


Steps to create UI page component, add it to the page library and use it in your apps is as follows.

  • Create your page and give it a sensible ID that is unique across the components in the Visual Page Library e.g. customers. The ID is the name that the component will be named which you use when popping up a "Page Dialog".
  • When you have tested this and are satisfied with it, click the "Save in page library" button at the top of the page builder workspace. The page will now be saved in the page library.
  • In your delegate where you want to popup the "Page Dialog" just specify something like this:


alternatively you can popup the page dialog programatically like this:

Lianja.showDialog("Edit", "customers", 900, 700, .t., .t., .t., "", "",.f.)

If you want to position on a specific record in the page when it is displayed just specify the "action=search" argument.


You can substitute {} macros like this:


When using the "showdialog" action or invoking the "Lianja.showDialog" method the page is rendered in its own independent dialog. You can also embed the page into an "Attributes" dialog and have it slide in from the right hand side of the main window (just like Attributes dialogs in development mode). This is accomplished using the "showdialogpanel" action or calling "Lianja.showDialogPanel()". This is more consistent on web and mobile apps so it is a recommended "best practice". For example.

$("showdialogpanel:customerpanel?title=Add Customer&width=460&action=add")

or alternatively:

Lianja.showDialogPanel("Add Customer", "customerpanel", 460, "add")

Notice how the action "add" is specified which is the same as displaying the form and clicking the "Add new record" icon in the form actionbar. Also note that when a UI page component is embedded in a "dialogpanel" like this the page header, page footer, left sidebar, right sidebar and actionbar are all hidden automatically.

This can be used very effectively to perform a "Quick Add" of new records when a "lookup" fails as users are entering data in a form. It is good practice to design your form sections with "Labels above" and "Hide section header" when the page is to be used as a "dialogpanel". To handle multi-panel forms we recommend that you use accordion sections.

We have extended delegates quite extensively in RC4 so that they can be "chained" together using || to separate the different actions that you want to perform in them.

In this example below, I have specified a "Custom menu delegate" that performs the action:


The "customerlist" page is embedded in the dialog panel that slides out from the right hand side of the main window.

When the user double-clicks on a customer row in the grid, the double click delegate for the grid causes the customer to be looked up in the Customers page and the dialogpanel is closed.

The "double click" delegate specified is simply this:


Here is an example of the "customerlist" page which is coming from the page library:


Thats it, it's as simple as that.