Class sap.ui.layout.DynamicSideContentModule: sap/ui/layout/DynamicSideContent

extends Control

The DynamicSideContent control allows additional (side) content to be displayed alongside or below the main content, within the container the control is used in. There are different size ratios between the main and the side content for the different breakpoints. The side content position (alongside/below the main content) and visibility (visible/hidden) can be configured per breakpoint. There are 4 predefined breakpoints: - Screen width > 1440 px (XL breakpoint) - Screen width <= 1440 px (L breakpoint) - Main content width <= 600 px (M breakpoint) - Screen width <= 720 px (S breakpoint)


Since: 1.30.
Constructor Summary
new sap.ui.layout.DynamicSideContent(sId?, mSettings?)Constructor for a new DynamicSideContent.
Event Summary
breakpointChanged(oControlEvent)Fires when the current breakpoint has been changed.
Events borrowed from class sap.ui.core.Control
validateFieldGroup
Events borrowed from class sap.ui.base.ManagedObject
formatError, modelContextChange, parseError, validationError, validationSuccess
Method Summary
sap.ui.layout.DynamicSideContent.extend(sClassName, oClassInfo?, FNMetaImpl?)Creates a new subclass of class sap.ui.layout.DynamicSideContent with name sClassName and enriches it with the information contained in oClassInfo.
sap.ui.layout.DynamicSideContent.getMetadata()Returns a metadata object for class sap.ui.layout.DynamicSideContent.
addMainContent(oControl)Adds a control to the main content area.
addSideContent(oControl)Adds a control to the side content area.
attachBreakpointChanged(oData?, fnFunction, oListener?)Attaches event handler fnFunction to the breakpointChanged event of this sap.ui.layout.DynamicSideContent.
destroyMainContent()Destroys all the mainContent in the aggregation mainContent.
destroySideContent()Destroys all the sideContent in the aggregation sideContent.
detachBreakpointChanged(fnFunction, oListener)Detaches event handler fnFunction from the breakpointChanged event of this sap.ui.layout.DynamicSideContent.
fireBreakpointChanged(mArguments?)Fires event breakpointChanged to attached listeners.
getContainerQuery()Gets current value of property containerQuery.
getCurrentBreakpoint()Returns the breakpoint for the current state of the control.
getEqualSplit()Gets current value of property equalSplit.
getMainContent()Gets content of aggregation mainContent.
getShowMainContent()Gets the value of showMainContent property.
getShowSideContent()Gets the value of showSideContent property.
getSideContent()Gets content of aggregation sideContent.
getSideContentFallDown()Gets current value of property sideContentFallDown.
getSideContentPosition()Gets current value of property sideContentPosition.
getSideContentVisibility()Gets current value of property sideContentVisibility.
indexOfMainContent(oMainContent)Checks for the provided sap.ui.core.Control in the aggregation mainContent.
indexOfSideContent(oSideContent)Checks for the provided sap.ui.core.Control in the aggregation sideContent.
insertMainContent(oMainContent, iIndex)Inserts a mainContent into the aggregation mainContent.
insertSideContent(oSideContent, iIndex)Inserts a sideContent into the aggregation sideContent.
removeAllMainContent()Removes all the controls from the aggregation mainContent.
removeAllSideContent()Removes all the controls from the aggregation sideContent.
removeMainContent(vMainContent)Removes a mainContent from the aggregation mainContent.
removeSideContent(vSideContent)Removes a sideContent from the aggregation sideContent.
setContainerQuery(bContainerQuery)Sets a new value for property containerQuery.
setEqualSplit(bState?)Sets or unsets the page in equalSplit mode.
setShowMainContent(bVisible, bSuppressVisualUpdate)Sets the showMainContent property.
setShowSideContent(bVisible, bSuppressVisualUpdate)Sets the showSideContent property.
setSideContentFallDown(sSideContentFallDown)Sets a new value for property sideContentFallDown.
setSideContentPosition(sSideContentPosition)Sets a new value for property sideContentPosition.
setSideContentVisibility(sSideContentVisibility)Sets a new value for property sideContentVisibility.
toggle()Used for the toggle button functionality.
Methods borrowed from class sap.ui.core.Control
addStyleClass, allowTextSelection, attachBrowserEvent, attachValidateFieldGroup, checkFieldGroupIds, clone, detachBrowserEvent, detachValidateFieldGroup, fireValidateFieldGroup, getAccessibilityInfo, getBusy, getBusyIndicatorDelay, getControlsByFieldGroupId, getFieldGroupIds, getIdForLabel, getRenderer, getVisible, hasStyleClass, invalidate, isBusy, onAfterRendering, onBeforeRendering, placeAt, removeStyleClass, rerender, setBusy, setBusyIndicatorDelay, setFieldGroupIds, setVisible, toggleStyleClass, triggerValidateFieldGroup
Methods borrowed from class sap.ui.core.Element
$, addCustomData, addDependent, addEventDelegate, applyFocusInfo, bindElement, data, destroy, destroyCustomData, destroyDependents, destroyLayoutData, destroyTooltip, enhanceAccessibilityState, findElements, fireEvent, focus, getCustomData, getDependents, getDomRef, getElementBinding, getFocusDomRef, getFocusInfo, getInterface, getLayoutData, getMetadata, getTooltip, getTooltip_AsString, getTooltip_Text, indexOfCustomData, indexOfDependent, init, insertCustomData, insertDependent, prop, removeAllCustomData, removeAllDependents, removeCustomData, removeDependent, removeEventDelegate, setLayoutData, setTooltip, toString, unbindElement
Methods borrowed from class sap.ui.base.ManagedObject
addAggregation, addAssociation, applySettings, attachFormatError, attachModelContextChange, attachParseError, attachValidationError, attachValidationSuccess, bindAggregation, bindContext, bindObject, bindProperty, destroyAggregation, detachFormatError, detachModelContextChange, detachParseError, detachValidationError, detachValidationSuccess, findAggregatedObjects, fireFormatError, fireModelContextChange, fireParseError, fireValidationError, fireValidationSuccess, getAggregation, getAssociation, getBinding, getBindingContext, getBindingInfo, getBindingPath, getEventingParent, getId, getModel, getObjectBinding, getOriginInfo, getParent, getProperty, hasModel, indexOfAggregation, insertAggregation, isBound, isInvalidateSuppressed, isTreeBinding, propagateMessages, removeAggregation, removeAllAggregation, removeAllAssociation, removeAssociation, setAggregation, setAssociation, setBindingContext, setModel, setProperty, unbindAggregation, unbindContext, unbindObject, unbindProperty, validateAggregation, validateProperty
Methods borrowed from class sap.ui.base.EventProvider
attachEvent, attachEventOnce, detachEvent, hasListeners
Constructor Detail
new sap.ui.layout.DynamicSideContent(sId?, mSettings?)
Constructor for a new DynamicSideContent.

Accepts an object literal mSettings that defines initial property values, aggregated and associated objects as well as event handlers. See sap.ui.base.ManagedObject for a general description of the syntax of the settings object.

The supported settings are:

In addition, all settings applicable to the base type sap.ui.core.Control can be used as well.

Parameters:
{string}sId? ID for the new control, generated automatically if no ID is given
{object}mSettings? Initial settings for the new control
Event Detail
breakpointChanged(oControlEvent)
Fires when the current breakpoint has been changed.
Parameters:
{sap.ui.base.Event}oControlEvent
{sap.ui.base.EventProvider}oControlEvent.getSource
{object}oControlEvent.getParameters
{string}oControlEvent.getParameters.currentBreakpoint
Since:
1.32
Method Detail
sap.ui.layout.DynamicSideContent.extend(sClassName, oClassInfo?, FNMetaImpl?): function
Creates a new subclass of class sap.ui.layout.DynamicSideContent with name sClassName and enriches it with the information contained in oClassInfo.

oClassInfo might contain the same kind of information as described in sap.ui.core.Control.extend.

Parameters:
{string}sClassName Name of the class being created
{object}oClassInfo? Object literal with information about the class
{function}FNMetaImpl? Constructor function for the metadata object; if not given, it defaults to sap.ui.core.ElementMetadata
Returns:
{function} Created class / constructor function
sap.ui.layout.DynamicSideContent.getMetadata(): sap.ui.base.Metadata
Returns a metadata object for class sap.ui.layout.DynamicSideContent.
Returns:
{sap.ui.base.Metadata} Metadata object describing this class
addMainContent(oControl): sap.m.DynamicSideContent
Adds a control to the main content area. Only the main content part in the aggregation is re-rendered.
Parameters:
{object}oControl Object to be added in the aggregation
Returns:
{sap.m.DynamicSideContent} this pointer for chaining
addSideContent(oControl): sap.m.DynamicSideContent
Adds a control to the side content area. Only the side content part in the aggregation is re-rendered.
Parameters:
{object}oControl Object to be added in the aggregation
Returns:
{sap.m.DynamicSideContent} this pointer for chaining
attachBreakpointChanged(oData?, fnFunction, oListener?): sap.ui.layout.DynamicSideContent
Attaches event handler fnFunction to the breakpointChanged event of this sap.ui.layout.DynamicSideContent.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to this sap.ui.layout.DynamicSideContent itself.

Fires when the current breakpoint has been changed.

Parameters:
{object}oData? An application-specific payload object that will be passed to the event handler along with the event object when firing the event
{function}fnFunction The function to be called when the event occurs
{object}oListener? Context object to call the event handler with. Defaults to this sap.ui.layout.DynamicSideContent itself
Since:
1.32
Returns:
{sap.ui.layout.DynamicSideContent} Reference to this in order to allow method chaining
destroyMainContent(): sap.ui.layout.DynamicSideContent
Destroys all the mainContent in the aggregation mainContent.
Returns:
{sap.ui.layout.DynamicSideContent} Reference to this in order to allow method chaining
destroySideContent(): sap.ui.layout.DynamicSideContent
Destroys all the sideContent in the aggregation sideContent.
Returns:
{sap.ui.layout.DynamicSideContent} Reference to this in order to allow method chaining
detachBreakpointChanged(fnFunction, oListener): sap.ui.layout.DynamicSideContent
Detaches event handler fnFunction from the breakpointChanged event of this sap.ui.layout.DynamicSideContent.

The passed function and listener object must match the ones used for event registration.

Parameters:
{function}fnFunction The function to be called, when the event occurs
{object}oListener Context object on which the given function had to be called
Since:
1.32
Returns:
{sap.ui.layout.DynamicSideContent} Reference to this in order to allow method chaining
fireBreakpointChanged(mArguments?): sap.ui.layout.DynamicSideContent
Fires event breakpointChanged to attached listeners.

Expects the following event parameters:

  • currentBreakpoint of type string
Parameters:
{Map}mArguments? The arguments to pass along with the event
Since:
1.32
Returns:
{sap.ui.layout.DynamicSideContent} Reference to this in order to allow method chaining
getContainerQuery(): boolean
Gets current value of property containerQuery.

If set to TRUE, then not the media Query (device screen size) but the size of the container, surrounding the control, defines the current range.

Default value is false.

Returns:
{boolean} Value of property containerQuery
getCurrentBreakpoint(): String
Returns the breakpoint for the current state of the control.
Returns:
{String} currentBreakpoint
getEqualSplit(): boolean
Gets current value of property equalSplit.

Defines whether the control is in equal split mode. In this mode, the side and the main content take 50:50 percent of the container on all screen sizes except for phone, where the main and side contents are switching visibility using the toggle method.

Default value is false.

Returns:
{boolean} Value of property equalSplit
getMainContent(): sap.ui.core.Control[]
Gets content of aggregation mainContent.

Main content controls.

Returns:
{sap.ui.core.Control[]}
getShowMainContent(): boolean
Gets the value of showMainContent property.
Returns:
{boolean} Side content visibility state
getShowSideContent(): boolean
Gets the value of showSideContent property.
Returns:
{boolean} Side content visibility state
getSideContent(): sap.ui.core.Control[]
Gets content of aggregation sideContent.

Side content controls.

Returns:
{sap.ui.core.Control[]}
getSideContentFallDown(): sap.ui.layout.SideContentFallDown
Gets current value of property sideContentFallDown.

Determines on which breakpoints the side content falls down below the main content.

Default value is OnMinimumWidth.

Returns:
{sap.ui.layout.SideContentFallDown} Value of property sideContentFallDown
getSideContentPosition(): sap.ui.layout.SideContentPosition
Gets current value of property sideContentPosition.

Determines whether the side content is on the left or on the right side of the main content.

Default value is End.

Since:
1.36
Returns:
{sap.ui.layout.SideContentPosition} Value of property sideContentPosition
getSideContentVisibility(): sap.ui.layout.SideContentVisibility
Gets current value of property sideContentVisibility.

Determines on which breakpoints the side content is visible.

Default value is ShowAboveS.

Returns:
{sap.ui.layout.SideContentVisibility} Value of property sideContentVisibility
indexOfMainContent(oMainContent): int
Checks for the provided sap.ui.core.Control in the aggregation mainContent. and returns its index if found or -1 otherwise.
Parameters:
{sap.ui.core.Control}oMainContent The mainContent whose index is looked for
Returns:
{int} The index of the provided control in the aggregation if found, or -1 otherwise
indexOfSideContent(oSideContent): int
Checks for the provided sap.ui.core.Control in the aggregation sideContent. and returns its index if found or -1 otherwise.
Parameters:
{sap.ui.core.Control}oSideContent The sideContent whose index is looked for
Returns:
{int} The index of the provided control in the aggregation if found, or -1 otherwise
insertMainContent(oMainContent, iIndex): sap.ui.layout.DynamicSideContent
Inserts a mainContent into the aggregation mainContent.
Parameters:
{sap.ui.core.Control}oMainContent the mainContent to insert; if empty, nothing is inserted
{int}iIndex the 0-based index the mainContent should be inserted at; for a negative value of iIndex, the mainContent is inserted at position 0; for a value greater than the current size of the aggregation, the mainContent is inserted at the last position
Returns:
{sap.ui.layout.DynamicSideContent} Reference to this in order to allow method chaining
insertSideContent(oSideContent, iIndex): sap.ui.layout.DynamicSideContent
Inserts a sideContent into the aggregation sideContent.
Parameters:
{sap.ui.core.Control}oSideContent the sideContent to insert; if empty, nothing is inserted
{int}iIndex the 0-based index the sideContent should be inserted at; for a negative value of iIndex, the sideContent is inserted at position 0; for a value greater than the current size of the aggregation, the sideContent is inserted at the last position
Returns:
{sap.ui.layout.DynamicSideContent} Reference to this in order to allow method chaining
removeAllMainContent(): sap.ui.core.Control[]
Removes all the controls from the aggregation mainContent.

Additionally, it unregisters them from the hosting UIArea.

Returns:
{sap.ui.core.Control[]} An array of the removed elements (might be empty)
removeAllSideContent(): sap.ui.core.Control[]
Removes all the controls from the aggregation sideContent.

Additionally, it unregisters them from the hosting UIArea.

Returns:
{sap.ui.core.Control[]} An array of the removed elements (might be empty)
removeMainContent(vMainContent): sap.ui.core.Control
Removes a mainContent from the aggregation mainContent.
Parameters:
{int|string|sap.ui.core.Control}vMainContent The mainContentto remove or its index or id
Returns:
{sap.ui.core.Control} The removed mainContent or null
removeSideContent(vSideContent): sap.ui.core.Control
Removes a sideContent from the aggregation sideContent.
Parameters:
{int|string|sap.ui.core.Control}vSideContent The sideContentto remove or its index or id
Returns:
{sap.ui.core.Control} The removed sideContent or null
setContainerQuery(bContainerQuery): sap.ui.layout.DynamicSideContent
Sets a new value for property containerQuery.

If set to TRUE, then not the media Query (device screen size) but the size of the container, surrounding the control, defines the current range.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is false.

Parameters:
{boolean}bContainerQuery New value for property containerQuery
Returns:
{sap.ui.layout.DynamicSideContent} Reference to this in order to allow method chaining
setEqualSplit(bState?): sap.m.DynamicSideContent
Sets or unsets the page in equalSplit mode.
Parameters:
{boolean}bState? Determines if the page is set to equalSplit mode
Returns:
{sap.m.DynamicSideContent} this pointer for chaining
setShowMainContent(bVisible, bSuppressVisualUpdate): sap.m.DynamicSideContent
Sets the showMainContent property.
Parameters:
{boolean}bVisible Determines if the main content part is visible
{boolean}bSuppressVisualUpdate Determines if the visual state is updated
Returns:
{sap.m.DynamicSideContent} this pointer for chaining
setShowSideContent(bVisible, bSuppressVisualUpdate): sap.m.DynamicSideContent
Sets the showSideContent property.
Parameters:
{boolean}bVisible Determines if the side content part is visible
{boolean}bSuppressVisualUpdate Determines if the visual state is updated
Returns:
{sap.m.DynamicSideContent} this pointer for chaining
setSideContentFallDown(sSideContentFallDown): sap.ui.layout.DynamicSideContent
Sets a new value for property sideContentFallDown.

Determines on which breakpoints the side content falls down below the main content.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is OnMinimumWidth.

Parameters:
{sap.ui.layout.SideContentFallDown}sSideContentFallDown New value for property sideContentFallDown
Returns:
{sap.ui.layout.DynamicSideContent} Reference to this in order to allow method chaining
setSideContentPosition(sSideContentPosition): sap.ui.layout.DynamicSideContent
Sets a new value for property sideContentPosition.

Determines whether the side content is on the left or on the right side of the main content.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is End.

Parameters:
{sap.ui.layout.SideContentPosition}sSideContentPosition New value for property sideContentPosition
Since:
1.36
Returns:
{sap.ui.layout.DynamicSideContent} Reference to this in order to allow method chaining
setSideContentVisibility(sSideContentVisibility): sap.ui.layout.DynamicSideContent
Sets a new value for property sideContentVisibility.

Determines on which breakpoints the side content is visible.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is ShowAboveS.

Parameters:
{sap.ui.layout.SideContentVisibility}sSideContentVisibility New value for property sideContentVisibility
Returns:
{sap.ui.layout.DynamicSideContent} Reference to this in order to allow method chaining
toggle(): sap.m.DynamicSideContent
Used for the toggle button functionality. When the control is on a phone screen size only, one control area is visible. This helper method is used to implement a button/switch for changing between the main and side content areas. Only works if the current breakpoint is "S".
Returns:
{sap.m.DynamicSideContent} this pointer for chaining