Top Panel Menu
Add an expandable top menu panel easily customizable to display a main summary |
Type | XAR |
Category | UI Extension |
Developed by | |
Rating | |
License | GNU Lesser General Public License 2.1 |
Table of contents
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:
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.
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:
- Log in the wiki with a user having Administration rights
- Go to the Administration page and select the Import category
- Follow the on-screen instructions to upload the downloaded XAR
- Click on the uploaded XAR and follow the instructions
- You'll also need to install all dependent Extensions that are not already installed in your wiki
- import extension file
- edit /skins/flamingo/global.vm xwiki package file
include these 5 lines just before foreach ( instruction:
#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:
- 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