Customizing Page Appearance

From Lianjapedia
Jump to: navigation, search

Overview

You build Apps in Lianja App Builder visually using the Page Builder.

If you have not yet done so please read Understanding the Lianja Architecture and also Understanding ART to better understand this article.

An App consists of pages. Pages are made up of Sections. Form sections are made up of FormItems. We call these collectively "UI Elements" or "Visual Elements".

You adjust the appearance and behavior of each UI Element in the Attributes Tab of the App Inspector.

Bm-noteicon.png
Quick Start Guide

Select the "Pages" workspace if it is not already selected.
Select the "Attributes" Tab in the App Inspector if it's not already selected.
Filter the attributes by category from the combobox at the top of the Attributes Tab.
Click on the second column to edit the attribute.
Alternatively type the name of the attribute and it will be selected in the grid.
Clicking on a Page, Section or FormItem in the page will switch to the corresponding Attributes Tab and refresh its attributes.


Bm-attributes.png

Bm-noteicon.png
Pro Tip

Double click any of the Tabs in the App Inspector to detach it into its own floating window.
You can then drag it around the screen into a suitable position and use it without needing to select the Tab in the App Inspector.

See Also

Accordion Behavior, Colors, CSS, Gradients, Lianja 3 App Inspector (Video), Page Attributes, Section Attributes, Shading and Transparency

Page Attributes

Background image

The background image for the page (png | jpg | gif).
Use app:/imagename.ext for app specific images.

  • Currently ignored.

Stretch image

Stretch the background image to fill the page (True | False).

Margin

Margin size around the page.

Page Attribute: Margin


Here, the Margin attribute has been set to 20 (pixels) revealing the orange Background color.


Hide page from menu

Hide page from menu at runtime.

Page Attribute: Hide page from menu


Here, the 'Customer Orders' page has the Hide page from menu attribute checked (true).


  • Note: in Web/Mobile Apps, if the first page in the App has Hide page from menu set, it will be hidden from the menu, but will still be displayed when the App is first loaded. If this is not the desired behavior, specify the page to display in the Initial page App Setting.
  • See also Page Menu.

Stretch last section

Stretch last section to bottom of page.

Page Attribute: Stretch last section


Here, the Stretch last section attribute has been checked (true).


Page Attribute: Stretch last section


And here is the same page with the Stretch last section attribute unchecked (false).


Auto layout sections

Auto layout sections by section percentage.

Page Attribute: Auto layout sections


Here, the Auto layout sections attribute has been checked (true).

Like Stretch last section the sections fill the page. Here though, the section heights are based on the percentage values specified in the section Auto layout percent attribute.


Section Attribute: Auto layout percent


The 'Employee Information' section has an Auto layout percent of 50 and the other sections have it set to 25.


Last section min height

If the last section is less than this height, then set it to this height and show page vertical scrollbar.

  • Currently ignored.

Last section fixed height

The last section is set to this fixed height and the previous section expanded to fill the space.

Page Attribute: Last section fixed height


This works in conjunction with Stretch last section.

Here, the Last section fixed height attribute has been set to 150.

The last section, 'Employees Documents', has a fixed height of 150 pixels and the height of the section above, 'Employee Notes' is adjusted to fill the page.


Hide actionbar

Hide the actionbar.

Page Attribute: Hide actionbar


Hide actionbar is checked (true). Compare this to the screenshot above.


Hide navigation bar slider

Hide the navigation bar slider.

Page Attribute: Hide navigation bar slider


Hide navigation bar slider is checked (true). Compare this to the screenshot above.


Sync actionbar buttons

Keep the actionbar buttons in sync with the current data position. Turn this off to improve performance with large amounts of data.

Show options icon

Show the options menu icon in the actionbar.

Page Attribute: Show options icon


Show options icon is checked (true).

Since the options icon is displayed in the actionbar, Hide actionbar must be unchecked (false).

When the options icon is clicked, the menu defined in Custom options menu is displayed.

Show options icon is supported on the Desktop client only.


Custom options menu

Custom options menu (comma separated list of values).

Page Attribute: Custom options menu


Here, the Custom options menu is defined as 'One,Two,Three'.

When the options icon is clicked, each value in the comma separated list is displayed as a menu option.

When a menu option is selected, the Custom menu delegate is called. The selected menu option value ('Two' here) is passed as a parameter to the delegate procedure or function.

Custom options menu is supported on the Desktop client only.


Show scrollbar

Show a vertical scrollbar for the page.

Page Attribute: Show scrollbar


Show scrollbar is checked (true).


Show scrollbar height

Show vertical scrollbar on low resolution displays less than this height.

Page Attribute: Show scrollbar height


Show scrollbar is unchecked (false), but Show scrollbar height is set to 1200.

On screen resolutions below 1200, as it is here, the scrollbar is shown.


App Settings: Page defaults

Click the Settings icon in the ModeBar to open up the App Settings dialog. These setting apply to all Pages in the App.

Open App Settings


Navigation bar type

Choose the appearance of the data navigation bar to use in this App: 'flat' color (default) or 'gradient' background.

Hide navigation bar slider

As Page attribute above.

Navigation bar CSS

Custom navigation bar CSS.

  • Supported on the desktop client only.
  • See CSS.