This layout widget provides a resizeable sidebar that can be snapped open and closed into which widgets can be placed. Each widget in the widgets array can given an optional align attribute that if set to "sidebar" will result in that widget being placed into the sidebar (widgets without an align attribute or with the align attribute set to any other value will be placed into the main panel).
If you don't want the sidebar to be resizeable then you can set the isResizable to be false. This will result in a simple border separating the sidebar and main areas.
- Copyright:
- Copyright (C) 2005-2020 Alfresco Software Limited
- License:
- GNU Lesser General Public License, see: Open Source Licensing
- Source:
Examples
Example configuration placing one widget in the sidebar and the other in the main panel
{
name: "alfresco/layout/AlfSideBarContainer",
config: {
widgets: [
{
name: "alfresco/html/Label",
align: "sidebar",
config: {
label: "This is in the sidebar"
}
},
{
name: "alfresco/html/Label",
config: {
label: "This is in the main panel"
}
}
]
}
}Example configuration where the sidebar cannot be resized (with custom width)
{
name: "alfresco/layout/AlfSideBarContainer",
config: {
isResizable: false,
initialSidebarWidth: 250,
widgets: [
{
name: "alfresco/html/Label",
align: "sidebar",
config: {
label: "This is in the sidebar"
}
},
{
name: "alfresco/html/Label",
config: {
label: "This is in the main panel"
}
}
]
}
}Extends
Mixes In
- external:dojo/_TemplatedMixin
- module:alfresco/core/Core
- module:alfresco/core/CoreWidgetProcessing
Members
-
accordionWidget :object
-
This will hold a reference to the accordion widget.
Type:
- object
- Default Value:
- null
- Source:
-
cssRequirements :object[]
-
An array of the CSS files to use with this widget.
Type:
- object[]
- Default Value:
- [{cssFile:"./css/AlfSideBarContainer.css"}]
- Source:
-
cssRequirements :object[]
-
An array of the CSS files to use with this widget.
Type:
- object[]
- Default Value:
- [{cssFile:"./css/AlfAccordionContainer.css"}]
- Source:
-
customResizeTopics :array
-
It is possible to optionally provide an array of events that the widget should subscribe to that trigger resize events. This has initially been added to address the problem that occurred when the alfresco/wrapped/DocumentList widget would resize itself after the initial sizing causing the sidebar to render incorrectly. By allowing custom events to be subscribed to it is possible to work around issues such as these.
Type:
- array
- Default Value:
- null
- Source:
-
footerHeight :integer
-
This property allows the height of the sidebar to accommodate a "sticky" footer. The height is otherwise calculated as the height of the view port minus the top position of the side bar (unless either side bar or main content are larger). By setting this property it is possible to also deduct the height of a sticky footer.
Type:
- integer
- Default Value:
- 0
- Source:
-
hiddenSidebarWidth :integer
-
Type:
- integer
- Source:
-
initialSidebarWidth :number
-
The initial width (in pixels) of the sidebar
Type:
- number
- Default Value:
- 350
- Source:
-
isResizable :boolean
-
Indicates whether or not the sidebar should be resizable or not.
Type:
- boolean
- Since:
- 1.0.40
- Default Value:
- true
- Source:
-
lastSidebarWidth :number
-
The last registered width (in pixels) of the sidebar (needed for window resize events)
Type:
- number
- Default Value:
- null
- Source:
-
minSidebarWidth :number
-
The minimum width (in pixels) for the sidebar
Type:
- number
- Default Value:
- 150
- Source:
-
resizeHandlerNode :element
-
This will be set to the resize drag handle
Type:
- element
- Default Value:
- null
- Source:
-
showSidebar :boolean
-
Indicates whether or not to show the sidebar when initially rendered.
Type:
- boolean
- Source:
-
showSidebarPreferenceId :string
-
This is the dot-notation property to use in the user preferences object to retrieve and persist the preferred width of the sidebar.
Type:
- string
- Default Value:
- "org.alfresco.share.documentList.showSidebar"
- Source:
-
sidebarWidthPreferenceId :string
-
This is the dot-notation property to use in the user preferences object to retrieve and persist the preferred width of the sidebar.
Type:
- string
- Default Value:
- "org.alfresco.share.sideBarWidth"
- Source:
-
templateString :string
-
The HTML template to use for the widget.
Type:
- string
- Source:
-
templateString :string
-
The HTML template to use for the widget.
Type:
- string
- Source:
Methods
-
addWidget(widget, index)
-
Parameters:
Name Type Description widgetobject The widget to add indexinteger The index of the widget - Source:
-
addWidget(widget, index)
-
Parameters:
Name Type Description widgetobject The widget to add indexinteger The index of the widget - Source:
-
endResizing(evt)
-
Calls resizeHandler and then saves the new width as a user preference.
Parameters:
Name Type Description evtobject The resize event - Source:
-
onResizeHandlerClick(evt)
-
Handles a user explicitly clicking on the resize handle node to toggle the sidebar being shown
Parameters:
Name Type Description evtobject The click event - Source:
-
postCreate()
-
Adds widgets to the sidebar and main container node and sets up the event handlers for resize events.
- Source:
-
postCreate()
-
- Source:
-
postMixInProperties()
-
Makes a request to get the users sidebar width preference.
- Source:
-
render(show)
-
Renders the sidebar container (basically controls whether or not the side bar is displayed or not).
Parameters:
Name Type Description showboolean Indicates whether or not to show the sidebar - Source:
-
resizeHandler(evt, ui)
-
Parameters:
Name Type Description evtobject The resize event object uiobject The data about the resize - Source:
-
setSideBarWidth(value)
-
Sets the initial sidebar width from the users saved preferences.
Parameters:
Name Type Description valuenumber The saved width preference - Source:
-
showEventListener(payload)
-
Parameters:
Name Type Description payloadobject The payload published on the subscribed topic - Source: