Module: alfresco/layout/AlfSideBarContainer

alfresco/layout/AlfSideBarContainer

Author:
  • Dave Draper
License:
Source:

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/AlfAccordionContainer.css"}]
Source:

cssRequirements :object[]

An array of the CSS files to use with this widget.
Type:
  • object[]
Default Value:
  • [{cssFile:"./css/AlfSideBarContainer.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
widget object The widget to add
index integer The index of the widget
Source:

addWidget(widget, index)

Parameters:
Name Type Description
widget object The widget to add
index integer The index of the widget
Source:

endResizing(evt)

Calls resizeHandler and then saves the new width as a user preference.
Parameters:
Name Type Description
evt object 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
evt object The click event
Source:

postCreate()

Source:

postCreate()

Adds widgets to the sidebar and main container node and sets up the event handlers for resize events.
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
show boolean Indicates whether or not to show the sidebar
Source:

resizeHandler(evt, ui)

Parameters:
Name Type Description
evt object The resize event object
ui object The data about the resize
Source:

setSideBarWidth(value)

Sets the initial sidebar width from the users saved preferences.
Parameters:
Name Type Description
value number The saved width preference
Source:

showEventListener(payload)

Parameters:
Name Type Description
payload object The payload published on the subscribed topic
Source:

alfresco/layout/AlfSideBarContainer

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.

Author:
  • Dave Draper
License:
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"
            }
         }
      ]
   }
}

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/AlfAccordionContainer.css"}]
Source:

cssRequirements :object[]

An array of the CSS files to use with this widget.
Type:
  • object[]
Default Value:
  • [{cssFile:"./css/AlfSideBarContainer.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
widget object The widget to add
index integer The index of the widget
Source:

addWidget(widget, index)

Parameters:
Name Type Description
widget object The widget to add
index integer The index of the widget
Source:

endResizing(evt)

Calls resizeHandler and then saves the new width as a user preference.
Parameters:
Name Type Description
evt object 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
evt object The click event
Source:

postCreate()

Source:

postCreate()

Adds widgets to the sidebar and main container node and sets up the event handlers for resize events.
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
show boolean Indicates whether or not to show the sidebar
Source:

resizeHandler(evt, ui)

Parameters:
Name Type Description
evt object The resize event object
ui object The data about the resize
Source:

setSideBarWidth(value)

Sets the initial sidebar width from the users saved preferences.
Parameters:
Name Type Description
value number The saved width preference
Source:

showEventListener(payload)

Parameters:
Name Type Description
payload object The payload published on the subscribed topic
Source: