Difference between revisions of "Section Menus"

From Lianjapedia
Jump to: navigation, search
(Custom menu)
Line 124: Line 124:
 
Menu items with a pulldown are displayed with a down arrow to the right of the item text.  Click the arrow to display the pulldown and then select an item.
 
Menu items with a pulldown are displayed with a down arrow to the right of the item text.  Click the arrow to display the pulldown and then select an item.
  
 +
<br clear=all>
 +
 +
From v5.3, preceding a menu option with a '+' will highlight is as the selected menu option e.g. here 'Customers':
 +
<pre>#+Customers,Orders,Order Details</pre>
 +
 +
When another menu option is selected, it is then highlighted.
 +
 +
[[{{ns:file}}:l5_sectionmenu_highlight.png|800px|left|border|link={{filepath:l5_sectionmenu_highlight.png}}|Selected Option Highlight]]
 
<br clear=all>
 
<br clear=all>
  

Revision as of 06:19, 9 March 2020

Sections can have a Menu displayed under their header. Standard Menus can have a single level pulldown. Alternatively, the Menu can be based on a .rsp or .jssp page to create a custom menu panel.

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

For Footer Menus, see Section Footers.

Visible

Section Menu: default Visible is False


By default, the Section Menu is not visible.

Section Menu: set Visible to True


To make the Section Menu visible, check the Visible attribute to True.

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

Notes on Client Support

Height

Section Menu Height


The Height attribute is used to specify the Section Menu height.

Notes on Client Support

Background color

Section Menu Background Color


The Background color is used to specify the menu 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 menu foreground color.

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

Notes on Client Support

Custom menu panel

Section Menu: Custom menu panel


Specify the name of the .rsp or .jssp page used to create the custom menu panel. This page should generate dynamic HTML5/JavaScript.

Clicking the [...] button creates/edits the script.


Custom menu

Section Menu left-aligned (default)


The menu is specified as a comma-separated list of menu items. By default, the menu items are left-aligned.


Section Menu right-aligned


To display the menu items right-aligned, prefix the list of values with >.

Note: a < can be used for left-alignment (also the default).


Section Menu centered


To display the menu items centered, prefix the list of values with |.


Section Menu centered


The # prefix will also center the menu items on the Desktop Client.


Section Menu centered buttons


On Web/Tablet/Mobile clients, the # prefix will display the menu items as centered buttons.



Section Menu with pulldown


Menu items can have a single-level pulldown. The pulldown items are | separated and enclosed in parentheses.


Section Menu with pulldown


Menu items with a pulldown are displayed with a down arrow to the right of the item text. Click the arrow to display the pulldown and then select an item.


From v5.3, preceding a menu option with a '+' will highlight is as the selected menu option e.g. here 'Customers':

#+Customers,Orders,Order Details

When another menu option is selected, it is then highlighted.

Selected Option Highlight


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

Notes on Client Support

Custom action

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 section menu Custom Delegate will be run if set.

Notes on Client Support

Custom Delegate: Custom section menu

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

Section Menu: Custom delegate inline


This can be a single line inline delegate.

The selected menu item can be accessed via {}.

Section 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).

From Lianja v3.2, a second parameter is passed. This is the name of the section as a string and includes the page name, e.g. 'employees.section1'.

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 'customsectionmenu' event
proc employees_section1_customsectionmenu(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 'customsectionmenu' event
function employees_section1_customsectionmenu(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

Context Menu

From Lianja v4.2.

A comma separated list of menu items to popup when a user right clicks on the Section. Selecting an item calls the 'rightclick' delegate with the item text as an argument.

Notes on Client Support

Attribute Notes
Visible Lianja.getElementByID("page.section").menuVisible is exposed on the Desktop client only (Lianja/VFP). (From v1.3.1).
Height -
Background color The Background color is supported on the Desktop client only.
Foreground color The Foreground color is supported on the Desktop client only.
Custom menu The | (center), > (align right) and < (align left) prefixes are available on the Desktop client only.
The # prefix is available on all clients and on non Desktop clients the menu items will be displayed as buttons.
Non-prefixed menu item lists are aligned left.
Lianja.getElementByID("page.section").menu is exposed on the Desktop client only (Lianja/VFP).
Custom action The Custom action is supported on the Desktop client only.
Custom section 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.