Top Panel Menu

Version 8.1 by Pascal Bastien on 2019/03/11 18:15

cogAdd an expandable top menu panel easily customizable to display a main summary
TypeXAR
CategoryUI Extension
Developed by

Pascal Bastien

Rating
1 Votes
LicenseGNU Lesser General Public License 2.1

Installable with the Extension Manager

Description

Provides an application to display a customizable and expandable top menu panel.
To fill the menu content simply create children pages with naming convention.
When this extension is installed, a standard user can customize easily the menu by creating pages and filling links entries (buletted list).

See a menu behavour example: Demo_Top_Panel_Menu.gif

Extension content

This extension is completed with 2 tabs and a few links, but you are invited to modify them and add another tabs.

Customize your menu

The menu documentation is displayed in CustomExtension.TopPanelMenu.Top panel menu documentation.WebHome page.

Important elements of menu to add and/or modify are:

  • tabs (Tab-xx)
    and the expanded menu, when clicking on a tab, displays:
  • one or more columns (Col-xx)
  • and 1 to several links (or text) groups: (Listitem-xx)

All code is in CustomExtension.TopPanelMenu.Content.WebHome and the children pages contain the list of shortcuts (Listitem-xx).

To add a tab in menu (Tab-xx), you have to create a children page, in /CustomExtension/TopPanelMenu/Content/ location, named "Tab-xx" (xx is usually a number to sort tabs) and the page title, the tab label to displayed.

To add a column (Col-xx) in the expanded menu, you have to create a children page, in /CustomExtension/TopPanelMenu/Content/Tab-xx/ location, named "Col-xx" (xx to sort columns). The title does not matter here  eg CustomExtension.TopPanelMenu.Content.Tab-01.Col-01.WebHome page.

To add a shortcut group ( Listitem-xx ), simply create a children page of /CustomExtension/TopPanelMenu/Content/Tab-xx/Col-xx/WebHome with the name "Listitem-xx" ( xx to sort groups) and the page title, the title of the links group, eg CustomExtension.TopPanelMenu.Content.Tab-01.Col-01.Listitem-01.WebHome

Finally links are added to this last page as a bulleted list.

To delete a links group, a column or a tab, simply delete the page concerned and its childrens pages.

It is possible to move a group of links, a column or a tab, just move the page and its childrens pages (uncheck redirection) taking care to move it to the correct location ( tree: Content-> Tab- xx-> Col-xx-> Listitem-xx ) and name the page correctly: Tab-xx, Col-xx, Listitem-xx

To navigate in the different pages to create / modify the menu, it is wise to use the breadcrumb.

Here is the correspondence between the name of the page and the menu displayed.
MenuAndPageName.png

tested on

  • Xwiki 9.11.4
  • Xwiki 10.11.3

Prerequisites & Installation Instructions

We recommend using the Extension Manager to install this extension (Make sure that the text "Installable with the Extension Manager" is displayed at the top right location on this page to know if this extension can be installed with the Extension Manager). Note that installing Extensions when being offline is currently not supported and you'd need to use some complex manual method.

You can also use the following manual method, which is useful if this extension cannot be installed with the Extension Manager or if you're using an old version of XWiki that doesn't have the Extension Manager:

  1. Log in the wiki with a user having Administration rights
  2. Go to the Administration page and select the Import category
  3. Follow the on-screen instructions to upload the downloaded XAR
  4. Click on the uploaded XAR and follow the instructions
  5. You'll also need to install all dependent Extensions that are not already installed in your wiki
  • import TopPanelMenu-v1.0.xar extension file
  • edit /skins/flamingo/global.vm xwiki package file
    include these 5 lines just before foreach ( instruction:
## Include custom top panel menu
#if ($xcontext.user != 'XWiki.XWikiGuest' && $doc!="CustomExtension.TopPanelMenu.Content.WebHome") ## displayed only when a user is log on
  $xwiki.includeForm("CustomExtension.TopPanelMenu.Content.WebHome")
#end
##
 #foreach ($uix in $services.uix.getExtensions('org.xwiki.platform.template.header.after', {'sortByParameter': 'order'}))
  • after a refresh of xwiki in your browser, you can see this 2 examples Tab in the menu:
    2Tabs.png
  • now you can customize your menu.

This application is composed by:

  • the application root: CustomExtension.ToppanelMenu
    • Main summary, the summary table (displayed in the menu and in a flat way)
    • Menu content, location of menu content, aka all children page (Tab-xx,Col-xx,Listitem-xx)
    • Style, location of CSS styling
      • Flat, CSS styling of the menu in flat way
      • NavBar, CSS styling of the expandable menu
    • Top panel menu documentation, displayed menu documentation
    • Translations, menu translation
Tags:
    

Get Connected