How is it made: Page styling example

[ederooy]

I want to create something like the Page styling example but I can't figure it out how it works. I want to have a vertical grid for products. If the user clicks on the item the form on the right side will change and show the information.

The right side I can figure out, but I can't recall how the left side is build. I even can't change something in it.

Can somebody please explain how this is build.

Erwin de Rooy

[yvonne.milne]

Hi Erwin,

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

For alternative App navigation methods, this may also be of interest: Understanding Lianja UI Navigation.



Regards,

Yvonne

[yvonne.milne]

If you make changes to an App and then want to go back to an earlier version or the original, use the Versions workspace to access and restore previous files. You will find the App definition (the .lianja file) and any script files (.prg, .js etc.) you have altered and saved listed by date. Double-click a file name to view it in the Editor and click the 'Restore from backup' button to restore it.



Regards,

Yvonne

[ederooy]

Thanks for your quick reply. I must say I'm just a beginner. 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?

[yvonne.milne]

Hi Erwin,

Make sure you use the actual column name from the table (not the caption/description) in the SQL Select statement. This needs to be:

select orderid from orders

and also in the 'Item sync expression':

orders.orderid

Regards,

Yvonne

[ederooy]

I've noticed it. I first tried that but the data didn't showup. I've changed it again, closed program, startup again, and now it's showing the data. When I use the refresh button it doesn't show any changes I make. Maybe I've got some cache problems?

Now I want to change the data on the right side of the form when I double click in the navigation. How can I manage this? When I work horizontaly I can link these fields to each other. How can I do this with the navigation?

[yvonne.milne]

Hi Erwin,

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:

$("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.



Regards,

Yvonne