Section Footers

From Lianjapedia
Jump to: navigation, search

Sections can have a Footer displayed at the bottom of the Section. The Footer can be made Visible or hidden. It can display a Caption. It can have a Custom menu.

Double-click on the Section header or click the cog icon to access the Section Attributes. Scroll down to the Footer sub-section.

Visible

Footer: default Visible is False


By default, the Section Footer is not visible.

Footer: set Visible to True


To make the Footer visible, check the Visible attribute to True.

The Footer must be visible to display a Footer Caption or Footer Custom menu.

The Visible attribute can be queried or changed programmatically using Lianja.getElementByID("page.section").footervisible.

Notes on Client Support

Caption

Footer Caption


The Caption attribute is used to specify text to be displayed in the Footer.


Footer Caption with HTML formatting


The Footer Caption can be formatted with HTML.

It can also contain {} expression substitution.



Caption: This is the <b>caption</b> and the time is <font color='red'>{time()}</font>


The Caption attribute can be queried or changed programmatically using Lianja.getElementByID("page.section").footercaption.

Notes on Client Support

Height

Footer Height


The Height attribute is used to specify the footer height.

Notes on Client Support

Background color

Footer Background Color


The Background color is used to specify the footer background color.

Click the [...] button to access the 'Select Color' dialog.

Notes on Client Support

Foreground color

The Foreground color is used to specify the footer foreground color.

As above, click the [...] button to access the 'Select Color' dialog.

Note: save (Done) and exit the Section Attributes to see the color change as it is greyed out while the dialog is active.

Notes on Client Support

CSS style

CSS style (separate attributes with ; or use app:/filename.css or specify CSS classes separated by spaces).

See also CSS

Notes on Client Support

Custom menu

Footer Menu: default 'cog' menu


The Custom menu attribute is used to specify a comma-separated list of values as the menu items of the Section footer menu.

Footer Menu: running default 'cog' menu


The menu is accessed via the 'cog' icon in the bottom left hand corner of the Section Footer.

Footer Menu: default 'cog' menu and Caption


With a default 'cog' Custom menu, a Caption can also be specified.

Footer Menu


Alternatively, the menu can be displayed as a series of hyperlinks.

To display as hyperlinks, prefix the list of values with !.

Note: if the menu items are displayed as hyperlinks (or buttons as below), the Caption is not displayed.

Footer Menu


Or as a series of buttons.

To display as centered buttons, prefix the list of values with #.


Footer Menu


To display as left aligned buttons, prefix the list of values with #<.

Footer Menu


To display as right aligned buttons, prefix the list of values with #>.

Footer Menu


Or prefix the list with + to display the menu items as horizontally autosized buttons (tablet style buttons).

The Custom menu attribute can be queried or changed programmatically using Lianja.getElementByID("page.section").footermenu.

Notes on Client Support

Lianja v9 Enhancements

From Lianja v9.0 the footer buttons can be displayed as an icon and text combination:

Footer Menu


Specify a comma-separated list in the format

icon@caption,icon@caption

Lianja Library icons and images included in the distribution can be accessed as:

lib:/icons

and

lib:/images

To invert white icons to black, postfix the filename with a ! or a - as in the example_accordionstack App in the screenshot above:

lib:/icons/portrait.png-@Photo,lib:/icons/document.png-@Details,lib:/icons/document-edit.png-@Notes

Custom action

Footer Menu: Custom action


When a menu item is selected, the action specified in the Custom action attribute will be performed.

The action is a SHOWDOCUMENT() action.

The selected menu item can be accessed via {}.

If no Custom action is specified, the Custom footer menu Custom Delegate will be run if set.


Notes on Client Support

Footer button CSS

Footer Menu: Button CSS style


If the Footer Custom menu is displayed in button format (#,#<,#> or + prefixes), the Footer button CSS attribute can be used to specify the CSS style for the buttons.

This can be a list of semi-colon separated attributes, or the name of a CSS file. Click the [...] button to create and edit a CSS file.
There are three property selectors to provide CSS skinning of the Footer buttons:

  • lianja_ui_custom_button
  • lianja_ui_custom_button_hover
  • lianja_ui_custom_button_pressed

e.g.

[lianja_ui_custom_button="1"] { border:1px solid white; background black; color: white; font: bold 16px; }
[lianja_ui_custom_button_hover="1"] { background: #cfcfcf; }
[lianja_ui_custom_button_pressed="1"] { background: lightblue; }

See also CSS

Notes on Client Support

Footer button width

Footer Menu: Button width


If the Footer Custom menu is displayed in (non-autosized) button format (#,#< or #> prefixes), the Footer button width attribute can be used to specify the width of the buttons.

Setting the width to 0 will autosize all the buttons to the width of the widest.


Notes on Client Support

Custom Delegate: Custom footer menu

If no Custom action is specified, the Custom footer menu Custom Delegate will be run when a menu item is selected.

Footer Menu: Custom delegate inline


This can be a single line inline delegate.

The selected menu item can be accessed via {}.

Footer Menu: Custom delegate script


Or it can be the name of the script function to be called. The selected menu item text is passed to the function as a parameter ('selitem' in the examples below).

Click the [...] button to create and edit the script function. The Section Scripting Language attribute determines the language used.



Lianja/VFP function example

////////////////////////////////////////////////////////////////
// Event delegate for 'custommenu' event
proc employees_section1_custommenu(selitem)
	do case
	case selitem = "page2"
		messagebox("You selected page2")
	case selitem = "page3"
		messagebox("You selected page3")
	otherwise
		messagebox("You selected page4")
	endcase
endproc

JavaScript function example

////////////////////////////////////////////////////////////////
// Event delegate for 'custommenu' event
function employees_section1_custommenu(selitem)
{
	if (selitem == "page2")
	{
		messagebox("You selected page2");
	}
	else if (selitem == "page3")
	{
		messagebox("You selected page3");
	}
	else
	{
		messagebox("You selected page4");
	}
};

Notes on Client Support

Notes on Client Support

Attribute Notes
Visible Lianja.getElementByID("page.section").footervisible is exposed on the Desktop Client only (Lianja/VFP).
Caption The Caption can only be combined with the Footer Custom menu on the Desktop Client. On non Desktop clients with a Footer Custom menu specified, only the menu is displayed.
HTML formatting is ignored in non Desktop Clients.
Lianja.getElementByID("page.section").footercaption is exposed on the Desktop Client only (Lianja/VFP, JavaScript).
Height -
Background color -
Foreground color -
CSS style -
Custom menu The 'cog' icon is on Desktop client only. On other clients, the menu items are displayed in the Footer, left-aligned.
The #< and #> prefixes are available on the Desktop client only.
All clients support the use of the # prefix to display the menu items as centered buttons and the + prefix to display the menu items as autosized buttons.
Lianja.getElementByID("page.section").footermenu is exposed on the Desktop Client only (Lianja/VFP).
Custom action The Custom action is supported on the Desktop client only.
Footer button CSS The Footer button CSS style is supported on the Desktop client only.
Footer button width The Footer button width is supported on the Desktop client only.
Custom footer menu The Custom delegate script function must be written in JavaScript for non Desktop clients. Using an inline delegate is supported on the Desktop client only.