semantic/SemanticPage
SAP SE
Provides enhanced functionality by internally aggregating {@link sap.f.DynamicPage} and contains controls with semantic-specific meaning.
<h3>Overview</h3>
Content specified in the <code>sap.f.semantic.SemanticPage</code> aggregations is automatically
positioned in dedicated sections of the title or the footer of the page, depending on
the control's semantics.
The actions in the <code>SemanticPage</code> title are grouped to text actions or icon actions.
When an aggregation is set, the actions appear in the following predefined order (from left to right):
<ul>Text actions:
<li>The main semantic text action - <code>titleMainAction</code></li>
<li>Any custom text actions - <code>titleCustomTextActions</code></li>
<li>The semantic text actions - <code>editAction</code>, <code>deleteAction</code>, <code>copyAction</code> and <code>addAction</code></li></ul>
<ul>Icon actions:
<li>Any custom icon actions - <code>titleCustomIconActions</code></li>
<li>The simple semantic icon actions - <code>favoriteAction</code> and <code>flagAction</code></li>
<li>The share menu semantic icon actions as a drop-down list with the following order:
<ul><li><code>sendEmailAction</code></li>
<li><code>discussInJamAction</code></li>
<li><code>shareInJamAction</code></li>
<li><code>sendMessageAction</code></li>
<li><code>printAction</code></li>
<li>Any <code>customShareActions</code></li></ul></li>
<li>The navigation semantic actions - <code>fullScreenAction</code>, <code>exitFullScreenAction</code>,
and <code>closeAction</code></li></ul>
The actions in the <code>SemanticPage</code> footer are positioned either on its left or right area and have the following predefined order:
<ul>Footer left area:
<li>The semantic text action - <code>messagesIndicator</code></li>
<li>The semantic label - <code>draftIndicator</code></li></ul>
<ul>Footer right area:
<li>The main semantic text action - <code>footerMainAction</code></li>
<li>The semantic text actions - <code>positiveAction</code> and <code>negativeAction</code></li>
<li>Any custom text actions - <code>footerCustomActions</code></li></ul>
<h3>Usage</h3>
Using the <code>SemanticPage</code> facilitates the implementation of the SAP Fiori 2.0 design guidelines.
<h3>Responsive behavior</h3>
The responsive behavior of the <code>SemanticPage</code> depends on the behavior of the content that is displayed.
To adjust the <code>SemanticPage</code> content padding, the <code>sapUiContentPadding</code>,
<code>sapUiNoContentPadding</code>, and <code>sapUiResponsiveContentPadding</code> CSS classes can be used.
1.46.0
sap.ui.core/Control
Determines whether the header is expanded.
The header can be also expanded/collapsed by user interaction,
which requires the property to be internally mutated by the control to reflect the changed state.
<b>Note:</b> Please be aware, that initially collapsed header state is not supported,
so <code>headerExpanded</code> should not be set to <code>false</code> when initializing the control.
Determines whether the header is pinnable.
Preserves the current header state when scrolling.
For example, if the user expands the header by clicking on the title
and then scrolls down the page, the header will remain expanded.
<b>Note:</b> Based on internal rules, the value of the property is not always taken into account - for example,
when the control is rendered on tablet or mobile and the title and the header
are with height larger than a given threshold.
Determines whether the user can switch between the expanded/collapsed states of the
header by clicking on the title.
If set to <code>false</code>, the title is not clickable and the application
must provide other means for expanding/collapsing the header, if necessary.
Determines whether the footer is visible.
Determines which of the title areas (Begin, Middle) is primary.
<b>Note:</b> The primary area is shrinking at a lower rate, remaining visible as long as it can.
Please use the <code>titleAreaShrinkRatio</code> property instead.
The value of <code>titleAreaShrinkRatio</code> must be set in <code>Heading:Content:Actions</code> format
where Heading, Content and Actions are numbers greater than or equal to 0. The greater value a
section has the faster it shrinks when the screen size is being reduced.
<code>titlePrimaryArea=Begin</code> can be achieved by setting a low number for the Heading area to
<code>titleAreaShrinkRatio</code>, for example <code>1:1.6:1.6</code>.
<code>titlePrimaryArea=Middle</code> can be achieved by setting a low number for the Content area to
<code>titleAreaShrinkRatio</code>, for example <code>1.6:1:1.6</code>.
Assigns shrinking ratio to the <code>SemanticPage</code> title areas (Heading, Content, Actions).
The greater value a section has the faster it shrinks when the screen size is being reduced.
The value must be set in <code>Heading:Content:Actions</code> format where Title, Content and Actions
are numbers greater than or equal to 0. If set to 0, the respective area will not shrink.
For example, if <code>2:7:1</code> is set, the Content area will shrink seven times faster than
the Actions area. So, when all three areas have width of 500px and the available space is reduced by 100px
the Title area will be reduced by 20px, the Content area - by 70px and the Actions area - by 10px.
If all the areas have assigned values greater than 1, the numbers are scaled so that at least one of them
is equal to 1. For example, value of <code>2:4:8</code> is equal to <code>1:2:4</code>.
<Note:> When this property is set the <code>titlePrimaryArea</code> property has no effect.
Optimizes <code>SemanticPage</code> responsiveness on small screens and behavior
when expanding/collapsing the <code>SemanticPageHeader</code>.
<b>Note:</b> It is recommended to use this property when displaying content
of adaptive controls that stretch to fill the available space. Such controls may be
{@link sap.ui.table.Table} and {@link sap.ui.table.AnalyticalTable} depending on their settings.
The <code>SemanticPage</code> heading.
A typical usage is the <code>sap.m.Title</code> or any other UI5 control,
that serves as a heading for an object.
<b>Notes:</b>
<ul>
<li>The control will be placed in the title`s leftmost area.</li>
<li><code>titleHeading</code> is mutually exclusive with <code>titleSnappedHeading</code>
and <code>titleExpandedHeading</code>. If <code>titleHeading</code> is provided, both
<code>titleSnappedHeading</code> and <code>titleExpandedHeading</code> are ignored.
<code>titleHeading</code> is useful when the content of <code>titleSnappedHeading</code> and
<code>titleExpandedHeading</code> needs to be the same as it replaces them both.</li>
<li>If the <code>titleSnappedOnMobile</code> aggregation is set, its content
overrides this aggregation when the control is viewed on a phone mobile device and
the <code>SemanticPage</code> header is in its collapsed (snapped) state.</li>
</ul>
The <code>titleExpandedHeading</code> is positioned in the <code>SemanticPage</code> title left area
and is displayed when the header is in expanded state only.
Use this aggregation to display a title (or any other UI5 control that serves
as a heading) that has to be present in expanded state only.
<b>Note:</b> In order for <code>titleExpandedHeading</code> to be taken into account,
<code>titleHeading</code> has to be empty. Combine <code>titleExpandedHeading</code> with
<code>titleSnappedHeading</code> to switch content when the header switches state.
The <code>titleSnappedHeading</code> is positioned in the <code>SemanticPage</code> title left area
and is displayed when the header is in collapsed (snapped) state only.
Use this aggregation to display a title (or any other UI5 control that serves
as a heading) that has to be present in collapsed state only.
<b>Notes:</b>
<ul>
<li>In order for <code>titleSnappedHeading</code> to be taken into account,
<code>titleHeading</code> has to be empty. Combine <code>titleSnappedHeading</code> with
<code>titleExpandedHeading</code> to switch content when the header switches state.</li>
<li>If the <code>titleSnappedOnMobile</code> aggregation is set, its content
overrides this aggregation when the control is viewed on a phone mobile device and
the <code>SemanticPage</code> header is in its collapsed (snapped) state.</li>
</ul>
The <code>SemanticPage</code> breadcrumbs.
A typical usage is the <code>sap.m.Breadcrumbs</code> control or any other UI5 control,
that implements the <code>sap.m.IBreadcrumbs</code> interface.
<b>Notes:</b>
<ul>
<li>The control will be placed in the title`s top-left area.</li>
<li>If the <code>titleSnappedOnMobile</code> aggregation is set, its content
overrides this aggregation when the control is viewed on a phone mobile device and
the <code>SemanticPage</code> header is in its collapsed (snapped) state.</li>
</ul>
The only content that is displayed in the <code>SemanticPage</code> title
when it is viewed on a phone mobile device and the <code>SemanticPage</code> header
is in collapsed (snapped) state.
Using this aggregation enables you to provide a simple, single-line title that
takes less space on the smaller phone screens when the
<code>SemanticPage</code> header is in its collapsed (snapped) state.
<b>Note:</b> The content set in this aggregation overrides all the other
<code>SemanticPage</code> aggregations displayed in the title and is only visible
on phone mobile devices in collapsed (snapped) state of the
<code>SemanticPage</code> header.
The content, displayed in the title, when the header is in collapsed state.
<b>Notes:</b>
<ul>
<li>The controls will be placed in the title`s left area,
under the <code>titleHeading</code> aggregation.</li>
<li>If the <code>titleSnappedOnMobile</code> aggregation is set, its
content overrides this aggregation when the control is viewed on a phone mobile
device and the <code>SemanticPage</code> header is in its collapsed (snapped) state.</li>
</ul>
The content,displayed in the title, when the header is in expanded state.
<b>Note:</b> The controls will be placed in the title`s left area,
under the <code>titleHeading</code> aggregation.
The content, displayed in the title.
<b>Notes:</b>
<ul>
<li>The controls will be placed in the middle area.</li>
<li>If the <code>titleSnappedOnMobile</code> aggregation is set, its
content overrides this aggregation when the control is viewed on a phone mobile
device and the <code>SemanticPage</code> header is in its collapsed (snapped) state.</li>
</ul>
A semantic-specific button which is placed in the <code>SemanticPage</code> title as first action.
<b>Note:</b> If the <code>titleSnappedOnMobile</code> aggregation is set, its
content overrides this aggregation when the control is viewed on a phone mobile
device and the <code>SemanticPage</code> header is in its collapsed (snapped) state.
A semantic-specific button which is placed in the <code>TextActions</code> area of the <code>SemanticPage</code> title.
<b>Note:</b> If the <code>titleSnappedOnMobile</code> aggregation is set, its
content overrides this aggregation when the control is viewed on a phone mobile
device and the <code>SemanticPage</code> header is in its collapsed (snapped) state.
A semantic-specific button which is placed in the <code>TextActions</code> area of the <code>SemanticPage</code> title.
<b>Note:</b> If the <code>titleSnappedOnMobile</code> aggregation is set, its
content overrides this aggregation when the control is viewed on a phone mobile
device and the <code>SemanticPage</code> header is in its collapsed (snapped) state.
A semantic-specific button which is placed in the <code>TextActions</code> area of the <code>SemanticPage</code> title.
<b>Note:</b> If the <code>titleSnappedOnMobile</code> aggregation is set, its
content overrides this aggregation when the control is viewed on a phone mobile
device and the <code>SemanticPage</code> header is in its collapsed (snapped) state.
A semantic-specific button which is placed in the <code>TextActions</code> area of the <code>SemanticPage</code> title.
<b>Note:</b> If the <code>titleSnappedOnMobile</code> aggregation is set, its
content overrides this aggregation when the control is viewed on a phone mobile
device and the <code>SemanticPage</code> header is in its collapsed (snapped) state.
A semantic-specific button which is placed in the <code>IconActions</code> area of the <code>SemanticPage</code> title.
<b>Note:</b> If the <code>titleSnappedOnMobile</code> aggregation is set, its
content overrides this aggregation when the control is viewed on a phone mobile
device and the <code>SemanticPage</code> header is in its collapsed (snapped) state.
A semantic-specific button which is placed in the <code>IconActions</code> area of the <code>SemanticPage</code> title.
<b>Note:</b> If the <code>titleSnappedOnMobile</code> aggregation is set, its
content overrides this aggregation when the control is viewed on a phone mobile
device and the <code>SemanticPage</code> header is in its collapsed (snapped) state.
A semantic-specific button which is placed in the <code>IconActions</code> area of the <code>SemanticPage</code> title.
<b>Note:</b> If the <code>titleSnappedOnMobile</code> aggregation is set, its
content overrides this aggregation when the control is viewed on a phone mobile
device and the <code>SemanticPage</code> header is in its collapsed (snapped) state.
A semantic-specific button which is placed in the <code>IconActions</code> area of the <code>SemanticPage</code> title.
<b>Note:</b> If the <code>titleSnappedOnMobile</code> aggregation is set, its
content overrides this aggregation when the control is viewed on a phone mobile
device and the <code>SemanticPage</code> header is in its collapsed (snapped) state.
A semantic-specific button which is placed in the <code>IconActions</code> area of the <code>SemanticPage</code> title.
<b>Note:</b> If the <code>titleSnappedOnMobile</code> aggregation is set, its
content overrides this aggregation when the control is viewed on a phone mobile
device and the <code>SemanticPage</code> header is in its collapsed (snapped) state.
The <code>titleCustomTextActions</code> are placed in the <code>TextActions</code> area of the
<code>SemanticPage</code> title, right before the semantic text action.
<b>Notes:</b>
<ul>
<li>If the <code>titleSnappedOnMobile</code> aggregation is set, its
content overrides this aggregation when the control is viewed on a phone mobile
device and the <code>SemanticPage</code> header is in its collapsed (snapped) state.</li>
<li>Buttons that are part of this aggregation will always have their <code>type</code>
property set to <code>Transparent</code> by design.</li>
</ul>
The <code>titleCustomIconActions</code> are placed in the <code>IconActions</code> area of the
<code>SemanticPage</code> title, right before the semantic icon action.
<b>Note:</b> If the <code>titleSnappedOnMobile</code> aggregation is set, its
content overrides this aggregation when the control is viewed on a phone mobile
device and the <code>SemanticPage</code> header is in its collapsed (snapped) state.
The header content.
The <code>SemanticPage</code> content.
<b>Note:</b> The SAP Fiori Design guidelines require that the
<code>SemanticPage</code>'s header content and the <code>SemanticPage</code>'s content
are aligned vertically. When using {@link sap.ui.layout.form.Form},
{@link sap.m.Panel}, {@link sap.m.Table} and {@link sap.m.List} in the content area of
<code>SemanticPage</code>, if the content is not already aligned, you need to adjust
their left text offset to achieve the vertical alignment. To do this, apply the
<code>sapFSemanticPageAlignContent</code> CSS class to them and set their <code>width</code>
property to <code>auto</code> (if not set by default).
Example:
<pre>
<code> <Panel class=“sapFSemanticPageAlignContent” width=“auto”></Panel> </code>
</pre>
Please keep in mind that the alignment is not possible when the controls are placed in
a {@link sap.ui.layout.Grid} or in other layout controls that use
<code>overflow:hidden</code> CSS property.
A semantic-specific button which is placed in the <code>FooterRight</code> area of the <code>SemanticPage</code>
footer with default text value set to <code>Save</code>.
A semantic-specific button which is placed in the <code>FooterLeft</code> area of the <code>SemanticPage</code>
footer as a first action.
A semantic-specific button which is placed in the <code>FooterLeft</code> area of the <code>SemanticPage</code>
footer as a second action.
A semantic-specific button which is placed in the <code>FooterRight</code> area of the <code>SemanticPage</code>
footer with default text value set to <code>Accept</code>.
A semantic-specific button which is placed in the <code>FooterRight</code> area of the <code>SemanticPage</code>
footer with default text value set to <code>Reject</code>.
The <code>footerCustomActions</code> are placed in the <code>FooterRight</code> area of the
<code>SemanticPage</code> footer, right after the semantic footer actions.
<b>Note:</b> Buttons that are part of this aggregation will always have their <code>type</code>
property set to <code>Transparent</code> by design.
A semantic-specific button which is placed in the <code>ShareMenu</code> area of the <code>SemanticPage</code> title.
<b>Note:</b> If the <code>titleSnappedOnMobile</code> aggregation is set, its
content overrides this aggregation when the control is viewed on a phone mobile
device and the <code>SemanticPage</code> header is in its collapsed (snapped) state.
A button which is placed in the <code>ShareMenu</code> area of the <code>SemanticPage</code> title.
<b>Note:</b> If the <code>titleSnappedOnMobile</code> aggregation is set, its
content overrides this aggregation when the control is viewed on a phone mobile
device and the <code>SemanticPage</code> header is in its collapsed (snapped) state.
A semantic-specific button which is placed in the <code>ShareMenu</code> area of the <code>SemanticPage</code> title.
<b>Note:</b> If the <code>titleSnappedOnMobile</code> aggregation is set, its
content overrides this aggregation when the control is viewed on a phone mobile
device and the <code>SemanticPage</code> header is in its collapsed (snapped) state.
A semantic-specific button which is placed in the <code>ShareMenu</code> area of the <code>SemanticPage</code> title.
<b>Note:</b> If the <code>titleSnappedOnMobile</code> aggregation is set, its
content overrides this aggregation when the control is viewed on a phone mobile
device and the <code>SemanticPage</code> header is in its collapsed (snapped) state.
A semantic-specific button which is placed in the <code>ShareMenu</code> area of the <code>SemanticPage</code> title.
<b>Note:</b> If the <code>titleSnappedOnMobile</code> aggregation is set, its
content overrides this aggregation when the control is viewed on a phone mobile
device and the <code>SemanticPage</code> header is in its collapsed (snapped) state.
A semantic-specific button which is placed in the <code>ShareMenu</code> area of the <code>SemanticPage</code> title.
<b>Note:</b> If the <code>titleSnappedOnMobile</code> aggregation is set, its
content overrides this aggregation when the control is viewed on a phone mobile
device and the <code>SemanticPage</code> header is in its collapsed (snapped) state.
The <code>customShareActions</code> are placed in the <code>ShareMenu</code> area of the
<code>SemanticPage</code> title, right after the semantic actions.
<b>Note:</b> If the <code>titleSnappedOnMobile</code> aggregation is set, its
content overrides this aggregation when the control is viewed on a phone mobile
device and the <code>SemanticPage</code> header is in its collapsed (snapped) state.
Accessible landmark settings to be applied to the containers of the <code>sap.f.SemanticPage</code> control.
If not set, no landmarks will be written.
The aggregation holds <code>DynamicPage</code>, used internally.