Module: alfresco/documentlibrary/views/AlfGalleryView

alfresco/documentlibrary/views/AlfGalleryView

This defines the widget model for rendering the gallery view. By default this is a grid based layout of thumbnails that can be scaled using a slider control. There are a number of ways in which this can be configured to obtain alternative rendering.

By default the thumbnail size will be determined by the available horizontal space for the configured number of columns however it is possible to configure resizeByColumnCount to be false such that the thumbnails will have a constant width defined by the configured thumbnailSize.

When used in a list that is configured for infinite scrolling it is sensible to configure showNextLink to be true such that a link is provided when the scrolling is not available when the thumbnails are so small that an entire page of data fits within the browser window.

If something other than thumbnails needs to be displayed then it is possible to enable highlighting so that it is clear what item is currently focused - this will help greatly with keyboard navigation.

If more information needs to be displayed for an individual cell then it is possible to configure one or more expandTopics that when published will reveal a panel in which additional data can be rendered.

Author:
  • Dave Draper
Copyright:
  • Copyright (C) 2005-2020 Alfresco Software Limited
License:
Source:

Examples

A document list (for a site with name "site1") containing the default gallery view (rendering thumbnails). The number of thumbnails rendered per row is determined by the "columns" attribute.

{
  name: "alfresco/documentlibrary/AlfDocumentList",
  config: {
    siteId: "site1",
    containerId: "documentLibrary",
    widgets: [
      {
        name: "alfresco/documentlibrary/views/AlfGalleryView",
        config: {
          columns: 8
        }
      }
    ]
  }
}

A document list (for a site with name "site1") containing the default gallery view (rendering thumbnails). Each thumbnail will be 200 pixels wide and as many as possible will be fit into each row depending upon the browser window size.

{
  name: "alfresco/documentlibrary/AlfDocumentList",
  config: {
    siteId: "site1",
    containerId: "documentLibrary",
    widgets: [
      {
        name: "alfresco/documentlibrary/views/AlfGalleryView",
        config: {
          resizeByColumnCount: false,
          thumbnailSize: 200
        }
      }
    ]
  }
}

A document list (for a site with the name "site1") containing the default gallery view (rendering thumbnails). The slider will be displayed in the toolbar.

{
  id: "TOOLBAR",
  name: "alfresco/documentlibrary/AlfToolbar"
},
{
  name: "alfresco/documentlibrary/AlfDocumentList",
  config: {
    additionalControlsTarget: "TOOLBAR",
    siteId: "site1",
    containerId: "documentLibrary",
    widgets: [
      {
        name: "alfresco/documentlibrary/views/AlfGalleryView"
      }
    ]
  }
}

A document list (for a site with the name "site1") containing an alternative rendering to show the name of each document.

{
  name: "alfresco/documentlibrary/AlfDocumentList",
  config: {
    siteId: "site1",
    containerId: "documentLibrary",
    widgets: [
      {
        name: "alfresco/documentlibrary/views/AlfGalleryView",
        config: {
          widgets: [
            {
              name: "alfresco/lists/views/layouts/CellContainer",
              config: {
                widgets: [
                  {
                    name: "alfresco/renderers/Property",
                    config: {
                      propertyToRender: "displayName"
                    }
                  }
                ]
              }
            }
          ]
        }
      }
    ]
  }
}

A document list (for a site with the name "site1") containing an alternative rendering to show the name of each document. When the CellContainer is clicked it will reveal an expanded section showing a ClassicWindow with the name as it's title.

{
  name: "alfresco/documentlibrary/AlfDocumentList",
  config: {
    siteId: "site1",
    containerId: "documentLibrary",
    widgets: [
      {
        name: "alfresco/documentlibrary/views/AlfGalleryView",
        config: {
          enableHighlighting: true,
          itemKeyProperty: "nodeRef",
          expandTopics: ["EXPAND"],
          widgets: [
            {
              name: "alfresco/lists/views/layouts/CellContainer",
              config: {
                publishTopic: "EXPAND",
                publishPayloadType: "PROCESS",
                publishPayloadModifiers: ["processCurrentItemTokens"],
                publishPayloadItemMixin: true,
                publishPayload: {
                  widgets: [
                    {
                      name: "alfresco/layout/ClassicWindow",
                      config: {
                        title: "{displayName}"
                      }
                    }
                  ]
                },
                widgets: [
                  {
                    name: "alfresco/renderers/Property",
                    config: {
                      propertyToRender: "displayName"
                    }
                  }
                ]
              }
            }
          ]
        }
      }
    ]
  }
}

Extends

Mixes In

Members

columns :number

This is the number of columns to use in the grid.
Type:
  • number
Default Value:
  • 4
Source:

columnsPreferenceProperty :string

The preference property to use for retrieving and setting the users preferred number of columns
Type:
  • string
Since:
  • 1.0.35
Default Value:
  • "org.alfresco.share.documentList.galleryColumns"
Source:

cssRequirements :object[]

An array of the CSS files to use with this widget.
Type:
  • object[]
Default Value:
  • [{cssFile:"./css/AlfGalleryView.css"}]
Source:

enableHighlighting :boolean

Indicates whether or not highlighting should be enabled. If this is configured to be true then highlighting of focus and expansion will be handled.
Type:
  • boolean
Since:
  • 1.0.44
Default Value:
  • false
Source:

expandTopics :string[]

This is an array of optional topics that can be subscribed to to create a panel within the grid for showing additional data about a particular cell in the grid. The payload should contain a "widgets" attribute that represents the model to render within the panel.
Type:
  • string[]
Since:
  • 1.0.44
Default Value:
  • null
Source:

itemKeyProperty :string

This is the property that is used to uniquely identify each item rendered in the grid. It is used as the key in the gridCellMapping to map each item to the cell that it is rendered in. This is required in order to know where to exand the grid when the expandTopics is published.
Type:
  • string
Since:
  • 1.0.44
Default Value:
  • null
Source:

manageSelectedItemState :boolean

This enables the mixed in SelectedItemStateMixin capabilities to track items as they are selected and deselected. This should only be changed from the default when the view is not used within a list (as lists will track selected items). This also ensures that when used outside of a list that the selected item state will be maintained when the thumbnails are resized.
Type:
  • boolean
Since:
  • 1.0.39
Default Value:
  • false
Source:

nextLinkLabel :string

The label to use for the next link. This defaults to null, so MUST be set for the next link to be displayed.
Type:
  • string
Default Value:
  • null
Source:

resizeByColumnCount :boolean

Indicates whether resizing of thumbnails should be done by setting the number of columns to be displayed (the number of columns will remain constant and the thumbnail size will change as the size of the view changes). If this is configured to be false then a thumbnailSize will be used and the number of columns will change as the size of the view changes.
Type:
  • boolean
Since:
  • 1.0.40
Default Value:
  • true
Source:
When set to true this will show a link for requesting more data (if available). This should be used when the grid is rendering data in an infinite scroll view. It is required because when the grid cells are small the data may not be sufficient to allow the scrolling events to occur that will request more data.
Type:
  • boolean
Default Value:
  • false
Source:

templateString :String

The HTML template to use for the widget.
Type:
  • String
Source:

thumbnailSize :number

This is the size in pixels to set thumbnails initially. This only applies when resizeByColumnCount is configured to be false.
Type:
  • number
Since:
  • 1.0.40
Default Value:
  • 400
Source:

thumbnailSizePreferenceProperty :string

The preference property to use for retrieving and setting the users preferred thumbnail size. This only applies when resizeByColumnCount is configured to be false.
Type:
  • string
Since:
  • 1.0.40
Default Value:
  • "org.alfresco.share.documentList.thumbnailSize"
Source:

viewSelectionConfig :object

The configuration for selecting the view (configured the menu item)
Type:
  • object
Properties:
Name Type Description
label string | null The label or message key for the view (as appears in the menus)
iconClass string | null The class to place next to the label
Source:

widgets :object[]

The definition for rendering an item in the view.
Type:
  • object[]
Source:

Methods

createListRenderer() → {object}

Creates a new ListRenderer which is used to render the actual items in the view. This function can be overridden by extending views (such as the Film Strip View) to create alternative widgets applicable to that view.
Source:
Returns:
A new ListRenderer
Type
object

getAdditionalControls() → {object}

Overridden to return a new instance of AlfGalleryViewSlider to control the number of columns that should be displayed in the gallery.
Source:
Returns:
A new slider control AlfGalleryViewSlider
Type
object

getViewName() → {string}

Returns the name of the view that is used when saving user view preferences.
Source:
Returns:
"gallery"
Type
string

onViewShown()

Called after the view has been shown (note that renderView does not mean that the view has been displayed, just that it has been rendered.
Source:

postCreate()

If resizeByColumnCount is configured to be true this will subscribe to the SET_COLUMNS topic and each time the column count is changed the updateColumns function will be called.

If resizeByColumnCount]module:alfresco/documentlibrary/views/AlfGalleryView#resizeByColumnCount is configured to be false this will subscribe to the SET_THUMBNAIL_SIZE topic and each time the thumbnail size is changed the updateThumbnailSize function will be called.

Source:
Listens to Events:

renderView(preserveCurrentData)

Extends the default implementation to resize the cells in the gallery.
Parameters:
Name Type Description
preserveCurrentData boolean This should be set to true when you don't want to clear the old data, the most common example of this is when infinite scroll is being used.
Source:

updateColumns(payload)

This function updates the columns attribute with the value attribute of the payload argument and then calls the renderView function followed by the resizeCells function
Parameters:
Name Type Description
payload object
Source:

updateThumbnailSize(payload)

Updates the thumbnailSize to of each displayed item.
Parameters:
Name Type Description
payload object A payload where the value is the new thumbnail size.
Since:
  • 1.0.40
Source:

Events

nextLinkPublishTopic

The topic to publish when the next link is clicked.
Type:
  • string
Default Value:
Source: