Difference between revisions of "Section Menus"
Yvonne.milne (Talk | contribs) |
Yvonne.milne (Talk | contribs) |
||
(9 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
− | Sections can have a Menu displayed under their header. Menus can have a single level pulldown. | + | ==Overview== |
+ | 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 [[Visual FoxPro Server Pages|.rsp]] or [[JavaScript Server Pages|.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. | Double-click on the Section header or click the cog icon to access the Section Attributes. Scroll down to the Menu sub-section. | ||
+ | |||
+ | <div style="height:140px;margin-bottom:5px;padding:5px;border:0px solid orange;border-left:5px solid orange;background:#fff8dc;vertical-align:middle;position:relative;"> | ||
+ | [[File:bm-noteicon.png|top|40px|link=]]<div style="position:absolute;top:3px;margin-bottom;bottom:5px;margin-left:50px;"><b> Menu Responsive UI</b> | ||
+ | The [[UI_Presentation_Rules#Menu_Responsive_UI_width_breakpoint|Menu responsive UI width breakpoint]] can be set for Web/Mobile Apps.<br> | ||
+ | The Menu will automatically be expanded or collapsed when the breakpoint width<br> | ||
+ | is reached on window resizing or mobile viewport size.<br> | ||
+ | See [[UI_Presentation_Rules#Responsive_UI|UI Presentation Rules: Responsive UI]] for more details.<br/> | ||
+ | </div> | ||
+ | <span style="height:6px;"> </span> | ||
+ | </div> | ||
For Footer Menus, see [[Section Footers]]. | For Footer Menus, see [[Section Footers]]. | ||
Line 53: | Line 64: | ||
[[#Notes on Client Support|Notes on Client Support]] | [[#Notes on Client Support|Notes on Client Support]] | ||
+ | |||
+ | ==Custom menu panel== | ||
+ | [[{{ns:file}}:menu_custom_menupanel.png|450px|thumb|left|link={{filepath:menu_custom_menupanel.png}}|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. | ||
+ | |||
+ | <br clear=all> | ||
==Custom menu== | ==Custom menu== | ||
Line 113: | Line 135: | ||
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> | ||
Line 118: | Line 148: | ||
[[#Notes on Client Support|Notes on Client Support]] | [[#Notes on Client Support|Notes on Client Support]] | ||
+ | |||
==Custom action== | ==Custom action== | ||
Line 153: | Line 184: | ||
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). | 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. | Click the [...] button to create and edit the script function. The Section '''Scripting Language''' attribute determines the language used. | ||
Line 199: | Line 232: | ||
[[#Notes on Client Support|Notes on Client Support]] | [[#Notes on Client Support|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== | ==Notes on Client Support== | ||
Line 206: | Line 244: | ||
!width="80%"|Notes | !width="80%"|Notes | ||
|- | |- | ||
− | |valign="top"|Visible|| | + | |valign="top"|Visible||Lianja.getElementByID("page.section").menuVisible is exposed on the Desktop client only (Lianja/VFP). (From v1.3.1). |
|- | |- | ||
|valign="top"|Height||- | |valign="top"|Height||- | ||
Line 214: | Line 252: | ||
|valign="top"|Foreground color||The Foreground color is supported on the Desktop client only. | |valign="top"|Foreground color||The Foreground color is supported on the Desktop client only. | ||
|- | |- | ||
− | |valign="top"|Custom menu||The | (center), > (align right) and < (align left) prefixes are available on the Desktop client only.<br>The # prefix is available on all clients and on non Desktop clients the menu items will be displayed as buttons.<br>Non-prefixed menu item lists are aligned left.<br> | + | |valign="top"|Custom menu||The | (center), > (align right) and < (align left) prefixes are available on the Desktop client only.<br>The # prefix is available on all clients and on non Desktop clients the menu items will be displayed as buttons.<br>Non-prefixed menu item lists are aligned left.<br>Lianja.getElementByID("page.section").menu is exposed on the Desktop client only (Lianja/VFP). |
|- | |- | ||
|valign="top"|Custom action||The Custom action is supported on the Desktop client only. | |valign="top"|Custom action||The Custom action is supported on the Desktop client only. | ||
Line 223: | Line 261: | ||
[[Category:Attribute Categories]] | [[Category:Attribute Categories]] | ||
+ | [[Category:Sections]] | ||
+ | [[Category:SectionAnatomy]] |
Latest revision as of 06:18, 21 August 2023
Contents
Overview
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.
The Menu responsive UI width breakpoint can be set for Web/Mobile Apps.
The Menu will automatically be expanded or collapsed when the breakpoint width
is reached on window resizing or mobile viewport size.
See UI Presentation Rules: Responsive UI for more details.
For Footer Menus, see Section Footers.
Visible
By default, the Section Menu is not visible.
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.
Height
The Height attribute is used to specify the Section Menu height.
Background color
The Background color is used to specify the menu background color.
Click the [...] button to access the 'Select Color' dialog.
Foreground color
The Foreground color is used to specify the menu foreground color.
As above, click the [...] button to access the 'Select Color' dialog.
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.
The menu is specified as a comma-separated list of menu items. By default, the menu items are left-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).
To display the menu items centered, prefix the list of values with |.
The # prefix will also center the menu items on the Desktop Client.
On Web/Tablet/Mobile clients, the # prefix will display the menu items as centered buttons.
Menu items can have a single-level pulldown. The pulldown items are | separated and enclosed in parentheses.
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.
The Custom menu attribute can be queried or changed programmatically using Lianja.getElementByID("page.section").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.
If no Custom action is specified, the Custom section menu Custom Delegate will be run when a menu item is selected.
This can be a single line inline delegate.
The selected menu item can be accessed via {}.
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"); } };
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. |