panels.pngProvides placeholders to put content located left or right of the page's content
TypeXAR
Developed by

XWiki Development Team

Rating
Rate!
1 Votes
LicenseGNU Lesser General Public License 2.1
Bundled With

XWiki Enterprise

Description

What's a Panel?

A Panel is a rectangular zone that is usually displayed in a left or right column in the UI (it can also be displayed in the content column through the #displayPanelLayout Macro) and that can contain anything: navigation, searches, page creation, statistics display, etc. Panels generally contain clickable links. These links are written manually or are automatically generated by scripts.

A full set of Panels is available by default, designed for the main uses. Furthermore, it is possible to create new Panels for specific needs. The Panel Application offers an Administration UI to configure how to display Panels and to choose which Panels to display (see below). This means that in order to create, modify or set Panels, you need to have administration rights.

Access to the Panels list

Where to find them

There are several possibilities to access the Panels Application:

  • By navigating directly to the URL: http://<server>/xwiki/bin/view/Panels/.
  • By accessing it through the Applications Index:

    panels-application-index.png

  • By typing "Panels" in the search engine.
  • By accessing "Administration" - "Look & Feel" - "Panel Wizard" section, by clicking on the "Go to Panels home page" button.
  • By using the Dashboard and clicking on the Panels page (provided you are in Advanced user mode since otherwise we're masking that technical page for simple users - See Page Editing for more details).
  • Between version 6.0 and 8.2 access was possible from the Applications Panel:

    panels-application.png

Panels's home page

This home page shows a list of the available Panels, containing:

  • a description
  • a visualization link (clicking the Panel's name displays its location page)
  • an edition link ("Edit" : the Panel opens in form edition mode, giving you access to the settings fields)
  • a deletion link ("Delete" : deletes the Panel's page)

panels-home.png

Existing Panels

This Panels Application provides several existing Panels that you can use directly in your wiki. Here's a description of some of these Panels:

Navigation Panel

Allows navigating to all pages in the wiki. It opens by default the pages available for the current location:

navigationpanel.png

Children Panel

XWiki 7.3+ Displays Child pages of the current page:

children.png

Siblings Panel

XWiki 7.3+ Displays Sibling pages of the current page:

siblings.png

SpaceDocs Panel

Starting with XWiki 7.3 this Panel has been deprecated and you should use the Children or Siblings Panels instead

Displays the list of pages in the current Space (but not Nested Pages):

spacedocs.png

Spaces Panel

Starting with XWiki 8.0 this Panel has been deprecated and you should use the Navigation Panel instead

Displays the list of Spaces in the current wiki (but not Nested Spaces):

spaces.png

Application Panel

The application panel displays the list of all existing applications in the wiki. It adapt itself to the width of the panel columns, so you can see it with 2 different designs:

 Small width (FontAwesome)Medium & large width (FontAwesome)
appbarsmallFontAwesome.pngappbarmediumFontAwesome.png
Since 6.2-milestone1, the icons displayed in the AppBar depend on the current icon theme. See Icon Theme Application.
 Small width (Silk)Medium & large width (Silk)
appbarsmallSilk.pngappbarmediumSilk.png

Since 6.2-milestone1, on devices with small screen, when panels are displayed under the page content (currently, it is the case for Flamingo only), the appbar is displayed differently to use all the available width:
AppBarLowRes.png

Since 6.3-milestone2, you can select which applications are displayed in the Application Panel, and which are not:
customizable-app-bar.png
You just need to drag & drop the applications from a list to the other!

Since 8.4-rc-1, you can also re-order the applications that are displayed, still by using the drag & drop mechanism:

appbar-reorder.gif

To change this configuration, go to the Administration of the Wiki, in the "Applications Panel" section.

Create Page Panel

Starting with XWiki 7.2+ and the introduction of Nested Pages this Panel has been deprecated since the concept of Space is now hidden and replaced by the concept of Nested Pages. In addition this panel only allows to create pages under one leve and not multiple hierarchical levels.

createpagepanel.png

Panel's structure

Take a look at the "QuickLinks" panel in the list. We will use it as an example.

Click the panel's name (URL: http://<server>/xwiki/bin/view/Panels/QuickLinks)

Click the edit link > allows you to see the different fields in order to edit the panel. You can fill in or select these fields :

QuickLinks.png

"Name" field

The name of the wiki page where the panel is stored. Here the name is: "QuickLinks".

"Type" field

There are two available options : "view" or "edit". According to your selection, the panel will be displayed when the wiki page is either in view mode or in edit mode. Most of the panels are used in view mode. For the new panel you're creating, leave the selector on "view".

"Category" field

Panels are sorted by category according to their purpose. The categories are: 

CategoryPanel's name example
InformationRecently Modified
InformationQuick Links
NavigationNavigation
ToolsNew Page
ToolsSearch
Administration(empty category as of today)
Other(empty category as of today)

"Description" field

Contains a short description of the wiki. This text will appear in the panels home page.

"Content" field

This section contains the panel's code. In our example we provide an edit link for this panel for administrators.

Creation - Edition

Introduction

To create or to modify panels, you need to have administration rights.

Create a new panel

Go to this page : http://<server>/xwiki/bin/view/Panels/

In the field "Create new panel" type the name of your new panel, for instance "User Guide".

Click the "Create" button in order to open the creation's panel form.

Notice that this page has been created under http://<server>/xwiki/bin/view/Panels/User+Guide

New panel creation form

Now you have the panel creation form on your screen, in edition mode. If this is not the case, please go back to the previous section.

Fill in or select the following sections : "Name", "Type", "Category" and "Description" according to the information already presented in the previous section ("Panel's structure).

"Content" field

By default, two lines are displayed in this section:

#panelheader('User Guide')

#panelfooter()
Editing the panel's header

#panelheader allows you to change the name displayed in the panel's header. If User Guide is ok, leave it as it is : by default those words have been automatically inserted when you created the panel a few minutes ago.

The code of the link will take place between #panelheader('User Guide') and #panelfooter(). For instance, if you want to create a link to the sandbox home page, type:

#panelheader('User Guide')

* [[Accueil Sandbox>>Sandbox.WebHome]]

#panelfooter()

To add a second link to the blog's home page, type:

#panelheader('User Guide')

* [[Accueil Sandbox>>Sandbox.WebHome]]
* [[Blog>>Blog.WebHome]]

#panelfooter()

To finish your panel, click "Save & View" : you've just completed your first panel!

You may add as many links as you wish. Here you can find some tips about the links syntax.

To learn more on the topic of Panels, you may study the content of panels executing scripts, such as "Space Docs". This panel renders a list of all the documents contained in a specific space.

"Content" field: finding the current panel column width

Since 6.1, a panel can have several widths depending on the configuration of the panel column. To know the current width and display something else depending of it, you can use the $xwikiPanelWidth variable. The possibles values are: "Small", "Medium" and "Large".

Configuration and set up

Introduction

There are different ways to configure panels. To modify the panels positions you must have administration rights. The configuration can be set at different scales : for all the wiki or at a page level. For instance, the following panels : "Archives", "Categories", "Recent Posts", "Unpublished"  are specific to the Blog application.

Administration section: "page elements" category

In your browser, Click the "Administration" in the right top corner, inside the Drawer.

This page allows you to set your preferences for the entire wiki.

AdminAccueil.png

Click on the Look & Feel icon.

AdminLookAndFeel.png

Then click on the "Page Elements" icon.

AdminPageElements.png

The fields used to control panels are located in the "Panels" subsection.

In the graphic above, panels are configured for display in the left column.

The selected panels are listed in the Show Left Panels field. Here the panels selection is "Applications" and "Navigation".

Don't forget to click "Save" to apply your new preferences.

 The "Applications" and "Navigation" panels have been selected for this configuration. Panel names have to be typed in the following manner : "Panels.NameOfThePanel". The word "Panels" corresponds to the name of the page where Panels are stored. For instance, in order to set the Quick Links panel (URL : http://<server>/xwiki/bien/view/Panels/QuickLinks) type Panels.QuickLinks in the field. Switch the slash [ / ] with a dot [ . ] 

Editing panels layout

If you want to configure all the panels in the right column, you should select "yes" for the field "Show right panels". Copy / paste the three items contained in the field "Left Panels" into the field "Right Panels". After this  select "no" for the "Show right panels" field.

You can also select the width of each panel column between 3 choices: small, medium and large. The default is medium.

Don't forget to click "Save" to apply your new preferences.

Panel Wizard

There is also an other way to change the panels configuration, using a more intuitive interface.

In the "Look & Feel" page, click on "Panel Wizard". You will have the following page:

panelWizard.png

In the first tab, you will see the list of available panels. You just have to drag & drop them to the panel column of your choice. And if you want to remove one of the panels, just drag & drop it from the panel column to the middle section.

In the second tab "page layout", you will be able to chose whether or not you want to have the left and the right column, and you will be able to choose the columns' width and every changes will be displayed instantly. 

panelWizard2.png

Don't forget to click "Save" to apply your new preferences.

Controlling where to display Panels

Panels can be configured to be displayed at the wiki level (i.e. all pages) by using the Panel Wizard as mentioned above. It's also possible to override the Panels to be displayed at any Page level (again using the Panel Wizard but from that Page's administration page).

If you need finer-grained control such as displaying a Panel only for a given page, you'd need to edit the Panel and add a condition in the Panel's script content. For example imagine you'd like to display the "My Recent Modifications" Panel only for the Home Page (Main.WebHome). To do so edit the Panel (http://<server>/xwiki/bin/inline/Panels/MyRecentModifications) and modify the content as follows:

#if ($doc.fullName == "Main.WebHome")
#set($recentDocs = $xwiki.searchDocuments("where 1=1 and doc.author='$context.user' order by doc.date desc", 5, 0))
...
#end
Tags:
Created by Vincent Massol on 2007/11/30 13:38
    

Get Connected