Navigation panel

The ‘Page Styling App’ (example_pagestyling) has a Navigation Panel (the left hand side) based on a SQL Select statement.
If you look in the Page Attributes, you can see how it and the Selection delegate are defined. This can also be seen in the ‘NavPanel App’ (example_navpanel).


Q:
I’ve tried to make something like that with the demo “Example dynamic Grid cell colors”. I’ve added a menu on the left side.I just wanted to fill this navigation with order ID’s, so I made the query, but the navigation doesn’t fill with the data from the database. Am I missing something?
A:
Make sure you use the actual column name from the table (not the caption/description) in the SQL Select statement. This needs to be:

Code:
select orderid from orders

and also in the ‘Item sync expression’:

Code:
orders.orderid

 


Q:
I want to change the data on the right side of the form when I double click in the navigation.
A:
If you look back at the Page Attributes in the example_pagestyling App, you will see the Selection delegate. This determines what happens when you click (or double-click if you have Double click to select set to True) in the Navigation Panel.

Here, it is set to:

Code:
$("section:section1?action=search&text={}")

This is an ‘inline delegate‘ to select section1 and search for the value you have selected in the Navigation Panel, passed as {}. To perform the search, the section1 section must have a Search field set that matches the value you are going to pass. Here it is the customers.companyname field and the field has its Search field attribute set to True.



Advertisements

Navigation panel

The ‘Navigation panel’ Page Attributes apply to the Navigation Panel specific to that page and yes you can change the Position and the Caption. You can specify a ‘Data source‘ – example_navpanel demonstrates using a SQL Select statement, example_webapp demonstrates using a text file.
Alternatively, you can specify a ‘Custom UI Page’ you have saved to the Pages Library, like those used by Lianja.showDialogPanel() and Lianja.showDialog().

The ‘Navigation menu’ applies to all Pages and is defined in the App Settings. You can change the ‘Navigation menu caption’, but not the position or the position of the button.
Note you can also use the Esc key to exit the menu


We spoke about using a ‘Custom UI page’ as the Page(s) ‘Navigation Panel’ and modifying the contents programatically, but you can also get a ‘navigationpanel’ object reference for a Page.

Code:
oNav = Lianja.get("mypage").navigationpanel

The object returned is a Tree and the property of most interest here is tree.rowsource. If you take the example_webapp App, it has the Page Navigation Panel ‘Data source’ attribute (corresponds to tree.rowsource) set to ‘navigation_menu.txt’. The ‘Data source’ could also be a comma-separated list of items caption#icon#target. So, for example, I could change the Navigation Panel on the Customers page as follows:

Code:
oNav = Lianja.get("Customers").navigationpanel
oNav.rowsource = "nav_emp_only.txt"

// or

oNav = Lianja.get("Customers").navigationpanel
oNav.rowsource = "!Employees#darkblue,Employees#app:/cat_contacts_sm#employees.catalogview"

“Navigation Panel” for a page can now have grouped sub-panels that can be expanded/collapsed by clicking on the subtitles.
To enable this functionality specify ^subtitle instead of !subtitle.