Forum Discussion

neil_lindberg's avatar
neil_lindberg
Ideator I
6 years ago

UX - Collapse TOC - v12

I'd really like to collapse this tree dijit widget. I know it is possible:

https://dojotoolkit.org/reference-guide/1.10/dijit/Tree-examples.html

onclick="mytree.collapseAll();"

But, where!? This should be a simple button add and oh-so-convenient!

It is hard for me to track down just where this tree is instantiated. Gosh, I really need to get through "Configuring Solutions" so I can finally email from this thing (I think page 101, where you're editing forms for use in the view(s) of ItemTypes is a big light on the path for me). But, I think my attention to UX might help improve Innovator while it makes me segue a LOT.

From viewing rendered source it looks like you could use pure JS to do this. You'd find all the "secondary" or "TOC" li elements with: class="aras-nav__parent aras-nav__parent_expanded"

...and remove all the aras-nav_parent__expanded(s), leaving just, "aras-nav__parent".

TOC
UX UI

3 Replies

  • christopher_gillis's avatar
    christopher_gillis
    New Member
    6 years ago

    Hi Neil,

    I'd recommend taking a look at the TOC Search Bar community project for an example of both how to add a UI element to the TOC as well as how to manipulate the TOC itself. This project also take a bit of a brute force approach and uses a lot of jQuery to manipulate the classes of the TOC elements to both hide and expand them.

    Chris

    Christopher Gillis

    Aras Labs Software Engineer

  • neil_lindberg's avatar
    neil_lindberg
    Ideator I
    6 years ago

    NOTE: Open a TOC item, such as "Documents", and then:

    document.getElementsByClassName('aras-nav__parent aras-nav__parent_expanded')[0].classList.remove('aras-nav__parent_expanded')

  • neil_lindberg's avatar
    neil_lindberg
    Ideator I
    6 years ago

    Well, while this works it doesn't seem to update whatever dojo has in memory. It's "Brute force" of sorts.

    onclick="${() => Array.from(document.getElementsByClassName('aras-nav__parent aras-nav__parent_expanded')).forEach(e => e.classList.remove('aras-nav__parent_expanded'))}"