Difference between revisions of "Section Menus"
Yvonne.milne (Talk | contribs) |
Yvonne.milne (Talk | contribs) (→Custom menu) |
||
(12 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. | + | 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 | + | 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]]. | For Footer Menus, see [[Section Footers]]. | ||
Line 19: | Line 19: | ||
To make the Section Menu visible, check the Visible attribute to True. | To make the Section Menu visible, check the Visible attribute to True. | ||
<br clear=all> | <br clear=all> | ||
+ | |||
+ | The Visible attribute can be queried or changed programmatically using [[Working with the Lianja Object Model|Lianja.getElementByID("page.section").menuVisible]]. | ||
[[#Notes on Client Support|Notes on Client Support]] | [[#Notes on Client Support|Notes on Client Support]] | ||
Line 51: | Line 53: | ||
[[#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 59: | Line 72: | ||
The menu is specified as a comma-separated list of menu items. By default, the menu items are left-aligned. | The menu is specified as a comma-separated list of menu items. By default, the menu items are left-aligned. | ||
+ | |||
+ | <br clear=all> | ||
+ | |||
+ | [[{{ns:file}}:menu_custom_menu3.png|450px|thumb|left|link={{filepath:menu_custom_menu3.png}}|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). | ||
<br clear=all> | <br clear=all> | ||
Line 70: | Line 93: | ||
<br clear=all> | <br clear=all> | ||
− | [[{{ns:file}}: | + | [[{{ns:file}}:menu_custom_menu6.png|450px|thumb|left|link={{filepath:menu_custom_menu6.png}}|Section Menu centered]] |
− | + | The '''#''' prefix will also center the menu items on the Desktop Client. | |
− | + | <br clear=all> | |
+ | |||
+ | [[{{ns:file}}:menu_custom_menu7.png|450px|thumb|left|link={{filepath:menu_custom_menu7.png}}|Section Menu centered buttons]] | ||
+ | |||
+ | |||
+ | |||
+ | On Web/Tablet/Mobile clients, the '''#''' prefix will display the menu items as centered buttons. | ||
<br clear=all> | <br clear=all> | ||
+ | |||
[[{{ns:file}}:menu_custom_menu4.png|450px|thumb|left|link={{filepath:menu_custom_menu4.png}}|Section Menu with pulldown]] | [[{{ns:file}}:menu_custom_menu4.png|450px|thumb|left|link={{filepath:menu_custom_menu4.png}}|Section Menu with pulldown]] | ||
Line 85: | Line 115: | ||
Menu items can have a single-level pulldown. The pulldown items are '''|''' separated and enclosed in parentheses. | Menu items can have a single-level pulldown. The pulldown items are '''|''' separated and enclosed in parentheses. | ||
+ | |||
<br clear=all> | <br clear=all> | ||
Line 93: | 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> | ||
Line 98: | Line 137: | ||
[[#Notes on Client Support|Notes on Client Support]] | [[#Notes on Client Support|Notes on Client Support]] | ||
+ | |||
==Custom action== | ==Custom action== | ||
Line 133: | Line 173: | ||
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 179: | Line 221: | ||
[[#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 186: | Line 233: | ||
!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 194: | Line 241: | ||
|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) | + | |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 203: | Line 250: | ||
[[Category:Attribute Categories]] | [[Category:Attribute Categories]] | ||
+ | [[Category:Sections]] | ||
+ | [[Category:SectionAnatomy]] |
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.
Contents
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. |