Module: alfresco/layout/AlfTabContainer

alfresco/layout/AlfTabContainer

This layout widget provides the ability to display tabbed content where tabs can be dynamically added, selected and removed as required. Unless explicitly requested, only the content of the intially selected tab will be rendered - the content of the other tabs will be rendered as they are selected. The height of the widget will grow and shrink based on the content of each tab by default unless the height is explicitly set to a non-percentage value.

If you want the widget to respond to publications to dynamically add, [select]{@link module:alfresco/layout/AlfTabContainer#tabSelectionTopic}, disable or [delete]{@link module:alfresco/layout/AlfTabContainer#tabDeletionTopic} tabs then you will need to configure the topics to subscribe to. Subscriptions will be made at the configured pubSubScope of the widget.

You can also request an additional publication occur when requesting to add a new tab by including a "publishOnAdd" attribute in the payload that is an object containing a "publishTopic" attribute (with optional "publishPayload", "publishGlobal", "publishToParent" and "publishScope" attributes).

PLEASE NOTE: It is not possible to use this module to control the layout of controls within a form. If you wish to create a form containing tabbed controls then you should use the TabbedControls widget

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

Examples

Basic configuration (first tab will be selected):

{
   name: "alfresco/layout/AlfTabContainer",
   config: {
      widgets: [
         {
            id: "TAB1",
            name: "alfresco/logo/Logo",
            title: "Tab with Alfresco Logo",
            config: {
               logoClasses: "alfresco-logo-only"
            }
         },
         {
            id: "TAB2",
            name: "alfresco/logo/Logo",
            title: "Tab with Surf Logo",
            config: {
               logoClasses: "surf-logo-large"
            }
         }
      ]
   }
}

Use "delayProcessing" to force second tab to render before selection:

{
   name: "alfresco/layout/AlfTabContainer",
   config: {
      widgets: [
         {
            id: "TAB1",
            name: "alfresco/logo/Logo",
            title: "Tab with Alfresco Logo",
            selected: true,
            config: {
               logoClasses: "alfresco-logo-only"
            }
         },
         {
            id: "TAB2",
            name: "alfresco/logo/Logo",
            title: "Tab with Surf Logo",
            delayProcessing: false,
            config: {
               logoClasses: "surf-logo-large"
            }
         }
      ]
   }
}

Use "selected" make the second tab initially selected:

{
   name: "alfresco/layout/AlfTabContainer",
   config: {
      widgets: [
         {
            id: "TAB1",
            name: "alfresco/logo/Logo",
            title: "Tab with Alfresco Logo",
            config: {
               logoClasses: "alfresco-logo-only"
            }
         },
         {
            id: "TAB2",
            name: "alfresco/logo/Logo",
            title: "Tab with Surf Logo",
            selected: true,
            config: {
               logoClasses: "surf-logo-large"
            }
         }
      ]
   }
}

Define topics to dynamically manipulate tabs:

{
   name: "alfresco/layout/AlfTabContainer",
   config: {
      tabSelectionTopic: "SELECT_TAB_TOPIC",
      tabDisablementTopic: "DISABLE_TAB_TOPIC",
      tabAdditionTopic: "ADD_TAB_TOPIC",
      tabDeletionTopic: "DELETE_TAB_TOPIC",
      widgets: [
         {
            id: "TAB1",
            name: "alfresco/logo/Logo",
            title: "Tab with Alfresco Logo",
            selected
            config: {
               logoClasses: "alfresco-logo-only"
            }
         }
      ]
   }
}

Example publication to add a new tab (based on previous example topic):

{
   publishTopic: "ADD_TAB_TOPIC",
   publishPayload: {
      widgets: [
         {
            name: "alfresco/html/Label",
            title: "New",
            closable: true,
            selected: true,
            config: {
               label: "This tab was dynamically added"
            }
         }
      ]
   }
}

Extends

Mixes In

Members

_tabContainerChildrenPromise :object

A promise of the children of the tabContainerWidget that is resolved when it is created.
Type:
  • object
Since:
  • 1.0.79
Source:

cssRequirements :object[]

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

delayProcessingDefault :boolean

This is the default delayed processing behaviour of tabs. By default a tabs content will not be created until it is displayed (unless the tab is configured to request otherwise). However, this can be overridden to switch the default so that all tab content will be created as soon as the container is created.
Type:
  • boolean
Default Value:
  • true
Source:

doLayout :Boolean

Should TabContainer layout mathematics be invoked?
Type:
  • Boolean
Default Value:
  • false
Source:

height :string

Height of the finished AlfTabContainer as any recognised css size with units
Type:
  • string
Default Value:
  • "100%"
Source:

padded :boolean

This can be configured to give all tabs some padding around their content. The amount of padding is controlled by the LESS variable "tab-padding"
Type:
  • boolean
Since:
  • 1.0.79
Default Value:
  • false
Source:

tabAdditionTopic :string

The topic whose publication should trigger the addition of a tab
Type:
  • string
Default Value:
  • null
Source:

tabContainerWidget :object

This will hold a reference to the tab container widget.
Type:
  • object
Default Value:
  • null
Source:

tabDeletionTopic :string

The topic whose publication should trigger the deletion of a tab
Type:
  • string
Default Value:
  • null
Source:

tabDisablementTopic :string

The topic whose publication should trigger the disablement/enablement of a tab
Type:
  • string
Default Value:
  • null
Source:

tabSelectionTopic :string

The topic whose publication should trigger the selection of a tab
Type:
  • string
Default Value:
  • null
Source:

templateString :string

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

width :string

Width of the finished AlfTabContainer as any recognised css size with units
Type:
  • string
Default Value:
  • "100%"
Source:

<inner> _delayedProcessingWidgets :array

This array is used to store widgets for delayed processing
Type:
  • array
Source:

Methods

<private> _tabChanged(name, oldTab, newTab)

Event triggered when the selected tab changes. Used to load delayed processing widgets.
Parameters:
Name Type Description
name string
oldTab object
newTab object
Source:

addWidget(widget, index)

This function adds widgets to the TabContainer widget
Parameters:
Name Type Description
widget object The widget to add
index integer The index of the required tab position
Source:

createTabContainer()

Creates the "dijit/layout/TabContainer" wrapped by this widget and sets up associated subscriptions, etc.
Since:
  • 1.0.46
Source:

getTabContainerChildren() → {promise}

Returns a promise of the children of the tabContainerWidget that will be resolved when it is created.
Since:
  • 1.0.79
Source:
Returns:
A promise of the children of the tab container
Type
promise

indexOfTabId(id) → {number}

Parameters:
Name Type Description
id string The ID of an existing tab to search for
Since:
  • 1.0.35
Source:
Returns:
The index of the duplicate tab and -1 if a duplicate does not exist
Type
number

onResize(evt)

Resizes the TabContainer on resize events.
Parameters:
Name Type Description
evt object The resize event.
Source:

onTabAdd(payload)

This function adds a new tab.
Parameters:
Name Type Description
payload object Details of the tab to add
Source:

onTabDelete(payload)

This function deletes a tab based upon parameter 'payload.index' or 'payload.id' or 'payload.title'.
Parameters:
Name Type Description
payload object Details of the tab to delete
Source:

onTabDisable(payload)

This function disables or enables a tab based upon parameter 'payload.index' or 'payload.id' or 'payload.title', and 'payload.value' for the state.
Parameters:
Name Type Description
payload object Details of the tab to disable or enable
Source:

onTabSelect(payload)

This function selects a tab based upon parameter 'payload.index' or 'payload.id' or 'payload.title'.
Parameters:
Name Type Description
payload object Details of the tab to select
Source:

postCreate()

Calls createTabContainer to create the "dijit/layout/TabContainer" that is wrapped by this widget.
Source: