Customizing Page Appearance
- 1 Overview
- 2 See Also
- 3 Page Attributes
- 3.1 Background image
- 3.2 Stretch image
- 3.3 Margin
- 3.4 Hide page from menu
- 3.5 Stretch last section
- 3.6 Auto layout sections
- 3.7 Last section min height
- 3.8 Last section fixed height
- 3.9 Hide actionbar
- 3.10 Hide navigation bar slider
- 3.11 Sync actionbar buttons
- 3.12 Show options icon
- 3.13 Custom options menu
- 3.14 Show scrollbar
- 3.15 Show scrollbar height
- 4 App Settings: Page defaults
You build Apps in Lianja App Builder visually using the Page Builder.
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.
The background image for the page (png | jpg | gif).
Use app:/imagename.ext for app specific images.
- Currently ignored.
Stretch the background image to fill the page (True | False).
- See Background image.
Margin size around the page.
Here, the Margin attribute has been set to 20 (pixels) revealing the orange Background color.
Hide page from menu at runtime.
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.
Here, the Stretch last section attribute has been checked (true).
And here is the same page with the Stretch last section attribute unchecked (false).
Auto layout sections
Auto layout sections by section percentage.
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.
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.
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 the actionbar.
Hide actionbar is checked (true). Compare this to the screenshot above.
Hide the navigation bar slider.
Hide navigation bar slider is checked (true). Compare this to the screenshot above.
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.
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 (comma separated list of values).
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 a vertical scrollbar for the page.
Show scrollbar is checked (true).
Show scrollbar height
Show vertical scrollbar on low resolution displays less than this 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.
Choose the appearance of the data navigation bar to use in this App: 'flat' color (default) or 'gradient' background.
Custom navigation bar CSS.
- Supported on the desktop client only.
- See CSS.