Navigation Panel Customization

I am still working on my migration from Confluence to XWiki (which is going very well), and I have a few questions about customizing the XWiki navigation panel so it behaves a bit more like Confluence. In particular, the Confluence navigation panel has the following features:

  • It allows each user to dynamically customize the panel width by dragging the edge of the panel.
  • It disables wrapping for page names in the navigation panel and truncates long names in the list in order to ensure that there was only one page per line in the page tree. (So “This is a really long page name” would get displayed as something like “This is a really lo…” in the panel.)
  • It always shows all child pages in a subtree without requiring the user to click a “Show More” link.

Is there a way to configure XWiki’s navigation panel so its behavior matches any/all of the items above?

After browsing the XWiki settings in both the general Panel and Navigation Panel configs, I was only able to find one setting which allowed me to globally adjust the panel width to Small/Medium/Large which is a far less flexible solution than I was hoping to find. I could not find any other configuration options for the other things in the above list. So any assistance/suggestions would be welcome here.

I like the idea of truncating page titles in the tree.

I don’t have an answer I’m just jumping in to follow. Though I imagine it might possibly be done with some custom CSS.

Still looking into this, but I did find something of interest for the third bullet point above.

If you navigate to <your_xwiki_base_url>/Panels/Navigation, you can edit the Navigation panel code directly. Underneath, it looks like the panel is using a documentTree macro which has a limit property that has a default of 15 items. So it seems like you could increase this limit parameter to something large in order to not have the “Show More” link show up over and over. I am not sure how permanent of a solution this is though or how good of an idea it is to edit panels directly, but this looks like one possible hack. However, I would probably only want to first find a way to truncate page titles in the list so I don’t fill my panel with wrapped text (which is something that I’m still playing around with).

Another update on this. The StylesheetExtension in the below topic seems to be a good hack for the CSS in order to shorten the names for long pages in the Navigation Panel and enforce one page per line in the navigation list:

Combine this CSS with a direct edit to the Navigation Panel code which adds limit=1000 as a parameter for the documentTree macro, and it will display all pages in the navigation tree with one page per line. (Based on a quick scan of the documentTree macro source code, there does not appear to be an “unlimited” option for the limit parameter so my arbitrary limit of 1000 could be increased if necessary.)

This should continue to work as long as: (1) the HTML class attributes for XWiki’s document tree don’t change, and (2) the Navigation Panel doesn’t get updated in a way that blows away the custom limit for the documentTree macro.

However, it would be nice if this solution could be rolled into something a bit more permanent. Here are a few thoughts:

  1. The documentTree macro uses the XWiki Tree Widget which in turn is based on jsTree. I read through the jsTree documentation, and it looks like there may be an ellipsis setting built into jsTree itself. I did not test this setting directly in jsTree, but if that ends up being the case then it may be possible to add an option to the Tree Widget which provides access to the ellipsis feature via jsTree. (There may still be CSS adjustments that need to be made in order to set a fixed width for the panel contents and trigger the ellipsis option.)
  2. Adding a “limit = -1” option or similar to the addChildNodes macro which removes the limit and then adding a limit parameter option to the Navigation Panel config in the Global Administration would probably be the simplest fix for the size limit.
  3. It would also be nice to have a tooltip pop up which displays the full page name when you hover over a shortened page link. I am still looking into potential ways to implement that.

So there’s an idea dump for now. I’m still trying different solutions here and seeing if I can find a better way to handle this.

3 Likes

Hello!

Thank you for these suggestions. Curious if you ever came across a way to dynamically customize the panel width a la Confluence?

I am using the hack in the link below, but it’s a little awkward because it requires you to first scroll to the bottom of the navigation tree and grab the corner of the panel. So it’s not quite like Confluence where you can just grab anywhere on the panel edge and resize, and your panel width is not remembered if you navigate to a different page. A while ago, I tried to hack it further in order to allow the user to grab anywhere on the edge, but I ran into issues and haven’t revisited it yet.

I wish that this was a built-in XWiki feature because this is something that my users were (and still are) immediately frustrated by after migrating from Confluence to XWiki.

1 Like