UI5 Web Components
Search
IllustratedMessage
v1.0.0-rc.15
@ui5/webcomponents-fiori
<ui5-illustrated-message>

Illustrated message

Action 1 Action 2 
<ui5-illustrated-message name="UnableToUpload">
	<ui5-button design="Emphasized">Action 1</ui5-button>
	<ui5-button>Action 2</ui5-button>
</ui5-illustrated-message>

Illustrated message in dialog

Open Dialog Close 
<ui5-button id="openDialogButton">Open Dialog</ui5-button>

<ui5-dialog id="hello-dialog" header-text="Error">
	<ui5-illustrated-message name="UnableToLoad"></ui5-illustrated-message>
	<ui5-bar design="Footer" slot="footer">
		<ui5-button id="closeDialogButton" design="Emphasized" slot="endContent">Close</ui5-button>
	</ui5-bar>
</ui5-dialog>

Illustrated message with custom title and link in subtitle

Something went wrong
Please try again or contact us at example@example.com
Try again 
<ui5-illustrated-message name="UnableToUpload">
	<ui5-title slot="title" level="H1">Something went wrong</ui5-title>
	<div slot="subtitle">Please try again or contact us at <ui5-link>example@example.com</ui5-link></div>
	<ui5-button icon="refresh">Try again</ui5-button>
</ui5-illustrated-message>

Overview

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. Each illustration has default internationalised title and subtitle texts. Also they can be managed with titleText and subtitleText properties. To display the desired illustration, use the name property, where you can find the list of all available illustrations.

Note: By default the “BeforeSearch” illustration is loaded. To use other illustrations, make sure you import them in addition, for example:
import "@ui5/webcomponents-fiori/dist/illustrations/NoData.js"
Note: Illustrations starting with the “Tnt” prefix are part of another illustration set. For example to use the “TntSuccess” illustration, add the following import::
import "@ui5/webcomponents-fiori/dist/illustrations/tnt/Success.js"

Structure

The IllustratedMessage consists of the following elements, which are displayed below each other in the following order:
  • Illustration
  • Title
  • Subtitle
  • Actions

Usage

ui5-illustrated-message is meant to be used inside container component, for example a ui5-card, a ui5-dialog or a ui5-page

ES6 Module Import

import "@ui5/webcomponents-fiori/dist/IllustratedMessage.js";

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
accessibleNameRef
accessible-name-ref
string
""
Receives id(or many ids) of the elements that label the component.
since v1.7.0
name
IllustrationMessageType
"BeforeSearch"
Defines the illustration name that will be displayed in the component.

Available illustrations are:
  • AddColumn
  • AddPeople
  • AddDimensions
  • BalloonSky
  • BeforeSearch
  • Connection
  • EmptyCalendar
  • EmptyList
  • EmptyPlanningCalendar
  • ErrorScreen
  • FilterTable
  • GroupTable
  • NoActivities
  • NoData
  • NoEntries
  • NoFilterResults
  • NoMail_v1
  • NoMail
  • NoNotifications
  • NoSavedItems_v1
  • NoSavedItems
  • NoSearchResults
  • NoTasks_v1
  • NoTasks
  • NoDimensionsSet
  • PageNotFound
  • ReloadScreen
  • ResizeColumn
  • SearchEarth
  • SearchFolder
  • SimpleBalloon
  • SimpleBell
  • SimpleCalendar
  • SimpleCheckMark
  • SimpleConnection
  • SimpleEmptyDoc
  • SimpleEmptyList
  • SimpleError
  • SimpleMagnifier
  • SimpleMail
  • SimpleNoSavedItems
  • SimpleNotFoundMagnifier
  • SimpleReload
  • SimpleTask
  • SleepingBell
  • SortColumn
  • SuccessBalloon
  • SuccessCheckMark
  • SuccessHighFive
  • SuccessScreen
  • Tent
  • UnableToLoad
  • UnableToLoadImage
  • UnableToUpload
  • UploadToCloud
  • UploadCollection
  • TntChartArea
  • TntChartArea2
  • TntChartBar
  • TntChartBPMNFlow
  • TntChartBullet
  • TntChartDoughnut
  • TntChartFlow
  • TntChartGantt
  • TntChartOrg
  • TntChartPie
  • TntCodePlaceholder
  • TntCompany
  • TntComponents
  • TntExternalLink
  • TntFaceID
  • TntFingerprint
  • TntLock
  • TntMission
  • TntNoApplications
  • TntNoFlows
  • TntNoUsers
  • TntRadar
  • TntSecrets
  • TntServices
  • TntSessionExpired
  • TntSessionExpiring
  • TntSuccess
  • TntSuccessfulAuth
  • TntSystems
  • TntTeams
  • TntTools
  • TntUnableToLoad
  • TntUnlock
  • TntUnsuccessfulAuth
  • TntUser2


Note: By default the BeforeSearch illustration is loaded.
When using an illustration type, other than the default, it should be loaded in addition:
import "@ui5/webcomponents-fiori/dist/illustrations/NoData.js";

Note: TNT illustrations cointain Tnt prefix in their name. You can import them removing the Tnt prefix like this:
import "@ui5/webcomponents-fiori/dist/illustrations/tnt/SessionExpired.js";
size
IllustrationMessageSize
"Auto"
Determines which illustration breakpoint variant is used.

Available options are:
  • Auto
  • Base
  • Spot
  • Dialog
  • Scene
As IllustratedMessage adapts itself around the Illustration, the other elements of the component are displayed differently on the different breakpoints/illustration sizes.
since v1.5.0
subtitleText
subtitle-text
string
""
Defines the subtitle of the component.

Note: Using this property, the default subtitle text of illustration will be overwritten.

Note: Using subtitle slot, the default of this property will be overwritten.
titleText
title-text
string
""
Defines the title of the component.

Note: Using this property, the default title text of illustration will be overwritten.

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
default
HTMLElement [0..n]
Defines the component actions.
subtitle
HTMLElement
Defines the subtitle of the component.

Note: Using this slot, the default subtitle text of illustration and the value of subtitleText property will be overwritten.
title
HTMLElement
Defines the title of the component.

Note: Using this slot, the default title text of illustration and the value of title property will be overwritten.
Theme: Morning Horizon (Light) Evening Horizon (Dark) Horizon High Contrast Black Horizon High Contrast White Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel