Sidebar Widget


Apps - Widget - Sidebar icon.png This widget type belongs to the Basic category in the widget library. It enables you to call a child page from another page in the same app (also known as a parent page), and to display it in a vertical or horizontal pane in the parent page.

  • Modifications made to the child page will automatically be displayed in the parent page.

Notes

  Open url.png See General remarks on widgets.

  • The child page must belong to the same app.
  • The entire child page is displayed. You cannot select a specific zone in it.
  • Parent pages and child pages cannot call themselves.
  • To improve performance, child pages are not visible in the graphic editor. They are visible only in execute mode.

Operating principle

         Operating principle.png

(1) Page B is the current page in which a button for calling page A is located.

When users click the button, child page A will appear in the current page B. The child page will be called indirectly and will not be anchored in the parent page.

  • (2) Display in a horizontal pane.
  • (3) Display in a vertical pane.

Best Practice

  • Using this widget enables you to restrict the number of elements that are recurrently created in app pages, reduce the number of pages to be maintained, and improve performance.
  • Apply a different background color to the parent page in order to highlight the child page in its pane. Open url.png See the examples.
  • Use the Embedded Page widget to ensure that the child page remains visible at all times in the parent page.

Example

Display of a side menu: the child page will open in a horizontal pane above the current page

Parent page Opening the child page
Example - Parent page - Run mode.png Example - Child page - Run mode.png

List of properties

Content

Page: List of app pages. Select the child page to be displayed in the slide-out pane in the parent page.

  • The message, "The page ... will be displayed in run mode" will appear. Switch to execute mode to preview the child page in the pane.
     

Direction: Direction and opening of the pane.

  • Horizontal: Opens from left to right or from right to left.
  • Vertical: Opens from top to bottom or from bottom to top.
     

Open Button: Text button or icon button for opening the pane.

Close Button: Text button or icon button for closing the pane.

Width: Size of the pane, in pixels or as a percentage.

Active Shadow: Used to indicate if a different background color is applied to the parent page when the pane opens (box is checked) or not (box is not checked). If the box is not checked, the background color of the parent page will remain the same.

Shadow Color (Note: Only if the Active Shadow box is checked): Background color applied to the parent page.

Opacity (Note: Only if the Active Shadow box is checked): Opacity level of the background color of the parent page. You can select it using the slider or enter it directly in the field. The higher the opacity level, the more the color will be visible.


The Active Shadow box is not checked The Active Shadow box is checked
Opacity = 30 Opacity = 100
Shadow off.png Shadow on - Low opacity.png Shadow on - High opacity.png

Theme

  Open url.png See the description of properties.

Tags:
Last modified by Unknown User on 2020/05/15 14:13
Created by Administrator XWiki on 2020/03/24 12:26

Shortcuts

Powered by XWiki ©, EasyVista 2020