A combination of message and illustration to represent an empty or a success state.
An IllustratedMessage
is a recommended combination of a solution-oriented message, an engaging illustration, and conversational tone to better communicate an empty or a success state than just show a message alone. Empty states are moments in the user experience where there’s no data to display. Success states are occasions to celebrate and reward a user’s special accomplishment or the completion of an important task.
The IllustratedMessage
control is meant to be used inside container controls, for example a Card
, a Dialog
, or a Page
.
The IllustratedMessage
consists of the following elements, which are displayed below each other in the following order:
The IllustratedMessage
control can adapt depending on the API settings provided by the app developer and the available space of its parent container. Some of the structural elements are displayed differently or are omitted in the different breakpoint sizes (XS, S, M, L).
Constructor for a new IllustratedMessage
.
Accepts an object literal mSettings
that defines initial property values, aggregated and associated objects as well as event handlers. See sap.ui.base.ManagedObject#constructor for a general description of the syntax of the settings object.
new sap.f.IllustratedMessage(sId?, mSettings?)
Param | Type | Default Value | Description |
---|---|---|---|
sId? | string | ID for the new control, generated automatically if no ID is given |
|
mSettings? | object | Initial settings for the new control |
Name | Type | Default Value | Description |
---|---|---|---|
description | string | empty string | Defines the description displayed below the title. If there is no initial input from the app developer and the default illustration set is being used, a default description for the current illustration type is going to be displayed. The default description is stored in the |
enableFormattedText | boolean | false | Defines whether the value set in the For details regarding supported HTML tags, see sap.m.FormattedText. |
illustrationSize | sap.f.IllustratedMessageSize | Auto | Determines which illustration breakpoint variant is used. As |
illustrationType | string | sap.f.IllustratedMessageType.NoSearchResults | Determines which illustration type is displayed. Note: The sap.f.IllustratedMessageType enumeration contains a default illustration set. If you want to use another illustration set, you have to register it in the sap.f.IllustrationPool. Example input for the
Since: 1.88.Visibility: public |
title | string | empty string | Defines the title that is displayed below the illustration. If there is no initial input from the app developer and the default illustration set is being used, a default title is displayed corresponding to the current |
Default Aggregation:
Name | Cardinality | Type | Description |
---|---|---|---|
_formattedText | 0..1 | sap.m.FormattedText |
The description displayed under the title when |
_illustration | 0..1 | sap.f.Illustration |
Defines the illustration used, according to the It is placed above all other aggregations. Not displayed |
_text | 0..1 | sap.m.Text |
The description displayed under the title when |
_title | 0..1 | sap.m.Title |
The text displayed under the illustration. |
additionalContent | 0..n | sap.m.Button |
Defines the controls placed below the description as additional content. Note: Not displayed when |
Method | Description |
---|---|
addAdditionalContent |
Adds some additionalContent to the aggregation additionalContent. |
destroyAdditionalContent |
Destroys all the additionalContent in the aggregation additionalContent. |
sap.f.IllustratedMessage.extend |
Creates a new subclass of class sap.f.IllustratedMessage with name
|
getAdditionalContent |
Gets content of aggregation additionalContent. Defines the controls placed below the description as additional content. Note: Not displayed when |
getDescription |
Gets current value of property description. Defines the description displayed below the title. If there is no initial input from the app developer and the default illustration set is being used, a default description for the current illustration type is going to be displayed. The default description is stored in the Default value is |
getEnableFormattedText |
Gets current value of property enableFormattedText. Defines whether the value set in the For details regarding supported HTML tags, see sap.m.FormattedText. Default value is |
getIllustrationSize |
Gets current value of property illustrationSize. Determines which illustration breakpoint variant is used. As Default value is |
getIllustrationType |
Gets current value of property illustrationType. Determines which illustration type is displayed. Note: The sap.f.IllustratedMessageType enumeration contains a default illustration set. If you want to use another illustration set, you have to register it in the sap.f.IllustrationPool. Example input for the
Default value is |
sap.f.IllustratedMessage.getMetadata |
Returns a metadata object for class sap.f.IllustratedMessage. |
getTitle |
Gets current value of property title. Defines the title that is displayed below the illustration. If there is no initial input from the app developer and the default illustration set is being used, a default title is displayed corresponding to the current Default value is |
indexOfAdditionalContent |
Checks for the provided |
insertAdditionalContent |
Inserts a additionalContent into the aggregation additionalContent. |
removeAdditionalContent |
Removes a additionalContent from the aggregation additionalContent. |
removeAllAdditionalContent |
Removes all the controls from the aggregation additionalContent. Additionally, it unregisters them from the hosting UIArea. |
setDescription |
Sets a new value for property description. Defines the description displayed below the title. If there is no initial input from the app developer and the default illustration set is being used, a default description for the current illustration type is going to be displayed. The default description is stored in the When called with a value of Default value is |
setEnableFormattedText |
Sets a new value for property enableFormattedText. Defines whether the value set in the For details regarding supported HTML tags, see sap.m.FormattedText. When called with a value of Default value is |
setIllustrationSize |
Sets a new value for property illustrationSize. Determines which illustration breakpoint variant is used. As When called with a value of Default value is |
setTitle |
Sets a new value for property title. Defines the title that is displayed below the illustration. If there is no initial input from the app developer and the default illustration set is being used, a default title is displayed corresponding to the current When called with a value of Default value is |
Adds some additionalContent to the aggregation additionalContent.
Param | Type | DefaultValue | Description |
---|---|---|---|
oAdditionalContent | sap.m.Button |
The additionalContent to add; if empty, nothing is inserted |
Creates a new subclass of class sap.f.IllustratedMessage 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.
Param | Type | DefaultValue | Description |
---|---|---|---|
sClassName | string |
Name of the class being created |
|
oClassInfo | object |
Object literal with information about the class |
|
FNMetaImpl | function |
Constructor function for the metadata object; if not given, it defaults to the metadata implementation used by this class |
Gets content of aggregation additionalContent.
Defines the controls placed below the description as additional content.
Note: Not displayed when illustrationSize
is set to Base
.
Gets current value of property description.
Defines the description displayed below the title.
If there is no initial input from the app developer and the default illustration set is being used, a default description for the current illustration type is going to be displayed. The default description is stored in the sap.f
resource bundle.
Default value is empty string
.
Gets current value of property enableFormattedText.
Defines whether the value set in the description
property is displayed as formatted text in HTML format.
For details regarding supported HTML tags, see sap.m.FormattedText.
Default value is false
.
Gets current value of property illustrationSize.
Determines which illustration breakpoint variant is used.
As IllustratedMessage
adapts itself around the Illustration
, the other elements of the control are displayed differently on the different breakpoints/illustration sizes.
Default value is Auto
.
Gets current value of property illustrationType.
Determines which illustration type is displayed.
Note: The sap.f.IllustratedMessageType enumeration contains a default illustration set. If you want to use another illustration set, you have to register it in the sap.f.IllustrationPool.
Example input for the illustrationType
property is sapIllus-UnableToLoad
. The logic behind this format is as follows:
Default value is IllustratedMessageType.NoSearchResults
.
Gets current value of property title.
Defines the title that is displayed below the illustration.
If there is no initial input from the app developer and the default illustration set is being used, a default title is displayed corresponding to the current illustrationType
.
Default value is empty string
.
Checks for the provided sap.m.Button
in the aggregation additionalContent. and returns its index if found or -1 otherwise.
Param | Type | DefaultValue | Description |
---|---|---|---|
oAdditionalContent | sap.m.Button |
The additionalContent whose index is looked for |
Inserts a additionalContent into the aggregation additionalContent.
Param | Type | DefaultValue | Description |
---|---|---|---|
oAdditionalContent | sap.m.Button |
The additionalContent to insert; if empty, nothing is inserted |
|
iIndex | int |
The |
Removes a additionalContent from the aggregation additionalContent.
Param | Type | DefaultValue | Description |
---|---|---|---|
vAdditionalContent | int string sap.m.Button |
The additionalContent to remove or its index or id |
Removes all the controls from the aggregation additionalContent.
Additionally, it unregisters them from the hosting UIArea.
Sets a new value for property description.
Defines the description displayed below the title.
If there is no initial input from the app developer and the default illustration set is being used, a default description for the current illustration type is going to be displayed. The default description is stored in the sap.f
resource bundle.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is empty string
.
Param | Type | DefaultValue | Description |
---|---|---|---|
sDescription | string | "" |
New value for property |
Sets a new value for property enableFormattedText.
Defines whether the value set in the description
property is displayed as formatted text in HTML format.
For details regarding supported HTML tags, see sap.m.FormattedText.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is false
.
Param | Type | DefaultValue | Description |
---|---|---|---|
bEnableFormattedText | boolean | false |
New value for property |
Sets a new value for property illustrationSize.
Determines which illustration breakpoint variant is used.
As IllustratedMessage
adapts itself around the Illustration
, the other elements of the control are displayed differently on the different breakpoints/illustration sizes.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is Auto
.
Param | Type | DefaultValue | Description |
---|---|---|---|
sIllustrationSize | sap.f.IllustratedMessageSize | Auto |
New value for property |
Sets a new value for property title.
Defines the title that is displayed below the illustration.
If there is no initial input from the app developer and the default illustration set is being used, a default title is displayed corresponding to the current illustrationType
.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is empty string
.
Param | Type | DefaultValue | Description |
---|---|---|---|
sTitle | string | "" |
New value for property |