Quote from luishp on June 27, 2026, 12:07 pm

@m-burdess The built-in List Box in VisualNEO Web is a standard HTML list control, so it doesn't support hierarchical (tree) structures with expandable/collapsible sub-items or images.

If your menu is relatively small, I'd suggest creating it manually using Push Buttons, Paragraphs or HTML. Each Level 1 item can simply show or hide the controls that belong to that section using the ShowObject and HideObject actions, while the Level 3 items execute a GoToPage action.

For example:

► Level 1
    ► Level 2
        • Level 3  -> GoToPage("Page1")
        • Level 3  -> GoToPage("Page2")

► Level 1
    ► Level 2

If you also want icons or images, you can place an Image or SVG Icon next to each item, or build the menu with HTML.

I would avoid using nested Container objects for this purpose because Containers use absolute positioning by default, making this approach difficult to maintain and not well suited to responsive layouts.

If you need a fully featured tree view with unlimited levels, expand/collapse functionality and icons, the best solution is to integrate a JavaScript tree library (for example jsTree or Fancytree) into your VisualNEO Web application. That provides exactly the type of control you're describing while still allowing you to trigger GoToPage or any other NeoScript action when a node is selected.

Quote from m.burdess on June 27, 2026, 1:18 pm

@luishp

Thank you for the two solutions, I have looked at jsTree and will start learning how to use this within the project. I did look at the number for the levels and it comes to :

Level 1 = 22

Level 2 = 66

and Level 3 108

Quote from m.burdess on June 27, 2026, 5:26 pm

Well, two hours later and still no further, Looks like the books are coming out.

Quote from m.burdess on June 29, 2026, 10:56 am

@luishp

I have looked at my 20 plus year old books, but still do not understand

the best solution is to integrate a JavaScript tree library (for example jsTree or Fancytree) into your VisualNEO Web application. That provides exactly the type of control you're describing while still allowing you to trigger GoToPage or any other NeoScript action when a node is selected.

Can you explain " integrate a JavaScript tree Library" , please.

That's why I have stayed working with Visualneo Win.

Yours

Michael

 

Quote from luishp on June 30, 2026, 9:46 am

Hi Michael,

Yes, of course.

By “integrate a JavaScript tree library” I simply mean: use a ready-made JavaScript menu/tree control inside a VisualNEO Web page, instead of trying to build every level manually with VisualNEO Web objects.

A JavaScript tree library is just a small collection of .js and .css files that already knows how to display things like this:

+ Level 1
    + Level 2
        - Level 3
        - Level 3

Some of them also support icons/images, expand/collapse arrows, selected items, etc.

In VisualNEO Web, the general idea would be:

1. Place a Container object on the page.
2. Put the tree menu HTML inside that Container.
3. Load the JavaScript/CSS files used by the tree library.
4. When the user clicks an item, call a VisualNEO Web action such as:

GoToPage "PageName"

VisualNEO Web can communicate with JavaScript. The help file shows that JavaScript can call VisualNEO Web actions using $scope. or neo.. For example:

BeginJS
  neo.GoToPage("PageName");
EndJS

So, with a tree library, the JavaScript click event would call:

neo.GoToPage("MyPage");

That is the connection between the JavaScript tree and VisualNEO Web.

However, I understand completely why this sounds confusing if you are coming from VisualNEO Win. In VisualNEO Win you usually stay inside the VisualNEO environment. In VisualNEO Web, because the final app is HTML/CSS/JavaScript, sometimes the best solution is to use normal web libraries.

For a small menu, I would not start with jsTree or Fancytree. I would probably use simple HTML first, possibly with <details> and <summary>, because modern browsers already support expandable lists without any external library.

Example:

<details>
  <summary>Level 1</summary>

  <details style="margin-left:20px;">
    <summary>Level 2</summary>

    <div style="margin-left:20px; cursor:pointer;" onclick="neo.GoToPage('Page1')">
      Level 3 - Go to Page1
    </div>

    <div style="margin-left:20px; cursor:pointer;" onclick="neo.GoToPage('Page2')">
      Level 3 - Go to Page2
    </div>
  </details>
</details>

This is not as powerful as jsTree, but it is much easier to understand and it can be made responsive more easily than using lots of VisualNEO Web Containers, because Containers are absolutely positioned by default.

So my practical suggestion would be:

• small/simple tree: use HTML with <details> / <summary>;
• large tree with icons, search, many levels, etc.: use a JavaScript tree library;
• avoid building the whole tree with many nested Containers unless the layout is fixed-size and not intended to be responsive.

Quote from m.burdess on July 4, 2026, 6:52 pm

@luishp

Thank you for answer, but I'm still having problems with the JavaScript. I have look a W3School site but do not understand, where to place the library. I have created a Tree in HTML, that looks ok.

<details>
  <summary><span style='font-size:10px; cursor:pointer;'>&#10133;</span> Master Indexes</summary>

    <div style="margin-left:20px; cursor:pointer;" onclick="neo.GoToPage('Page2')">
   <a><span style='font-size:10px;'>&#10134;</span> Name Index</a>
    </div>

    <div style="margin-left:20px; cursor:pointer;" onclick="neo.GoToPage('Page2')">
     <a><span style='font-size:10px;'>&#10134;</span> Place Index</a>
    </div>
</details>

  <div style="margin-left:0px; cursor:pointer;" onclick="neo.GoToPage('Page2')">
  <a><summary><span style='font-size:10px;'>&#10134;</span>Apprentices</summary></a>
  </div>

<details>
  <summary><span style='font-size:10px;'>&#10133;</span>Armed Services</summary>

    <div style="margin-left:20px; cursor:pointer;" onclick="neo.GoToPage('Page2')">
      <span style='font-size:10px;'>&#10134;</span> Army Lists
    </div>

    <div style="margin-left:20px; cursor:pointer;" onclick="neo.GoToPage('Page2')">
     <span style='font-size:10px;'>&#10134;</span> Other Army Records
    </div>
 <div style="margin-left:20px; cursor:pointer;" onclick="neo.GoToPage('Page1')">
     <span style='font-size:10px;'>&#10134;</span> Navy Lists
    </div>

    <div style="margin-left:20px; cursor:pointer;" onclick="neo.GoToPage('Page2')">
     <span style='font-size:10px;'>&#10134;</span> Other Navy Records
    </div>
 <div style="margin-left:20px; cursor:pointer;" onclick="neo.GoToPage('Page1')">
     <span style='font-size:10px;'>&#10134;</span> RAF
    </div>

    <div style="margin-left:20px; cursor:pointer;" onclick="neo.GoToPage('Page2')">
     <span style='font-size:10px;'>&#10134;</span> Royal Marines
    </div>
 <div style="margin-left:20px; cursor:pointer;" onclick="neo.GoToPage('Page1')">
     <span style='font-size:10px;'>&#10134;</span> Merchnt Navy
    </div>

    <div style="margin-left:20px; cursor:pointer;" onclick="neo.GoToPage('Page2')">
     <span style='font-size:10px;'>&#10134;</span> Medal Roll
    </div>
 <div style="margin-left:20px; cursor:pointer;" onclick="neo.GoToPage('Page1')">
     <span style='font-size:10px;'>&#10134;</span> CWG
    </div>
  </details>
</details>

This code look ok, even if its some 800 line in the app.

Can you point me to a example app that shows the steps I need to allow the menu to send me to a page.

Yours

Michael

 

Quote from luishp on July 6, 2026, 10:45 pm

@m-burdess sorry, there was an error in my code.
When using pure HTML you should do this:

<div style="margin-left:20px; cursor:pointer;" onclick="document.location='index.html#!/Page2'">
<a><span style='font-size:10px;'>&#10134;</span> LInk text</a>
</div>

Just change Page2 for the page name you want to link to.

Quote from m.burdess on July 9, 2026, 10:14 am

@luishp

Thank you, it work's

 

Michael