Overview

No data screen gives feedback to the user when an app or list is empty, an error has occurred or part of the application needs to be enabled or require user interaction. The layout is the same, but the text and icon can change depending on the use case.

When to Use

1
do
false

Recommended

  • Filtering with no results;
  • Searching with no results;
  • Empty app;
  • Too many items;
  • Part of the application needs to be enabled;
  • Error.

Message Page

HTML
<link href='style.css' rel='stylesheet' type='text/css'/> <!DOCTYPE html> <html><head> <meta http-equiv='X-UA-Compatible' content='IE=edge' /> <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/> <script id='sap-ui-bootstrap' src='https://sapui5.hana.ondemand.com/1.81.0/resources/sap-ui-core.js' data-sap-ui-theme='sap_fiori_3' data-sap-ui-libs='sap.m' data-sap-ui-compatVersion='edge'> </script> <script id="view1" type="sapui5/xmlview"> <core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" height="100%" width="100%"> <MessagePage showHeader="false" title="" enableFormattedText="true" description="The Security Insights service is deployed on AWS Europe (Frankfurt) region and it process all collected data in that region. The service cannot guarantee EU access. To use Security Insights you should enable it." icon="sap-icon://survey"> <buttons> <Button type="Emphasized" text="Enable Security Insights"/> </buttons> </MessagePage> </core:FragmentDefinition> </script> <script> new sap.ui.xmlfragment({fragmentContent: jQuery("#view1").html()}).placeAt("content"); </script> </head> <body> <div id='content' style="height: 400px"></div> </body> </html> <script src='./index.js' type='text/javascript'></script>
CSS
undefined
JS
undefined

See also:

UI5 DemoKit Sample - MessagePage

UI5 API Reference - MessagePage

Fiori Design Guideline - MessagePage

Visual Design Wiki - MessagePage