Demo Apps

With the Demo Kit, we deliver some demo apps that show you how you can use the various features and controls of SAPUI5.

You can open the apps directly at Demo Apps. You can also download the source files there to have a look at the code.

We have the following categories of demo apps:

Showcase apps that show you how to use specific controls or features
Apps that are created with our tutorials (see Get Started: Setup, Tutorials, and Demo Apps)
Template apps (see App Templates: Kick Start Your App Development)
Other demo apps for Key User Adaptation, Application Path Framework (APF), and Charts

The following tables give an overview of what each demo app shows.

Features, Layouts, and Specific Topics

Demo App	Feature	Layouts	Specific Topic
Shopping Cart	XML View Busy Indicators Device Adaptation Expression Binding Input validation (see Validation Messages)	`sap.ui.layout.BlockLayout` `sap.ui.layout.VerticalLayout` `sap.ui.layout.form.SimpleForm`	Filtering, custom filter Sorting Formatting Behavior-driven Development with Gherkin Mock Server Local storage
Browse Orders	XML View Busy Indicators Device Adaptation Expression Binding	`sap.ui.layout.ResponsiveGridLayout` `sap.ui.layout.form.SimpleForm` `sap.f.FlexibleColumnLayout`	Sorting Grouping Formatting Mock Server
Shop Administration Tool	XML View Busy Indicators Device Adaptation Expression Binding Custom Controls	`sap.ui.layout.BlockLayout` `sap.ui.layout.ResponsiveGridLayout` `sap.uxap.ObjectPageLayout`	Formatting
Employee Directory	XML View	`sap.ui.layout.form.SimpleForm`	Mock Server Routing and Navigation
Hello World	JS View
Bulletin Board	XML View Busy Indicators	`sap.ui.layout.form.SimpleForm`	Sorting Formatting Mock Server Custom type
Manage Products	XML View Busy Indicators		Sorting Formatting Mock Server
Worklist Template	XML View Busy Indicators		Filtering Formatting Mock Server Sorting
Worklist (FLP) Template	XML View JS View Busy Indicators	`sap.ushell.ui.shell.RightFloatingContainer` `sap.ushell.ui.shell.ShellAppTitle` `sap.ushell.ui.shell.ShellHeader` `sap.ushell.ui.shell.ShellHeadItem` `sap.ushell.ui.shell.ShellId` `sap.ushell.ui.shell.ShellLayout` `sap.ushell.ui.shell.SplitContainer`	Filtering Formatting Mock Server Sorting Integration with SAP Fiori launchpad SAP Fiori launchpad sandbox
Master-Detail Template	XML Fragments XML View Busy Indicators Device Adaptation Expression Binding	`sap.f.FlexibleColumnLayout`	Formatting List selector Mock Server Sorting
Master-Detail (FLP) Template	XML Fragments XML View JS View Busy Indicators Device Adaptation Expression Binding	`sap.ushell.ui.shell.ShellHeadItem` `sap.ushell.ui.shell.ShellAppTitle` `sap.ushell.ui.shell.ShellLayout`	Formatting Mock Server Sorting Integration with SAP Fiori launchpad SAP Fiori launchpad sandbox
UI Adaptation at Runtime			SAPUI5 Flexibility: Enable Your App for UI Adaptation
UI Adaptation at Runtime for SAP Fiori Elements			SAPUI5 Flexibility: Enable Your App for UI Adaptation
APF Demo Application	XML View JS View	`sap.ui.layout.VerticalLayout`	Developing Apps with Analysis Path Framework (APF) Component Container
APF Configuration Modeler	XML View JS View	`sap.ushell.ui.shell.ShellHeader`	APF Configuration Modeler Component Container
Chart Demo App	XML View

Controls

Demo App	`sap.m`	`sap.m.semantic`	Other Libraries
Shopping Cart	`Carousel` `ColumnListItem` `DatePicker` `FormattedText` `LightBox` `List` `MessagePage` `MessagePopover` `NavContainer` `NotificationListItem` `ObjectListItem` `PullToRefresh` `RangeSlider` `SearchField` `SegmentedButton` `StandardListItem` `Toolbar` `Wizard`
Browse Orders	`IconTabBar` `List` `ObjectHeader` `PullToRefresh` `SearchField` `SegmentedButton` `SplitApp` `Table`	`DetailPage` `GroupSelect` `MasterPage` `SendEmailAction`
Shop Administration Tool	`App` `ColumnListItem` `List` `MessagePopover` `ResponsivePopover` `SearchField` `StandardListItem` `Table` `Toolbar`		`sap.tnt.NavigationListItem` `sap.tnt.ToolHeader` `sap.tnt.ToolPage` Micro charts of `sap.ui.comp.smartmicrochart`
Employee Directory	`App` `IconTabBar` `List` `Toolbar`
Hello World	`App`
Bulletin Board	`App` `ColumnListItem` `IconTabBar` `Toolbar`	`FullscreenPage` `SendEmailAction`
Manage Products	`App` `Toolbar`	`FullscreenPage` `SendEmailAction`
Worklist Template	`App` `ColumnListItem` `MessagePage` `SearchField` `Table` `Toolbar`	`SemanticPage` `SendEmailAction`
Worklist (FLP) Template	`App` `ColumnListItem` `FormattedText` `HBox` `List` `MessagePage` `OverflowToolbar` `Page` `ScrollContainer` `SearchField` `Table` `Toolbar` `ToggleButton` `Vbox`	`FullscreenPage` `SendEmailAction`
Master-Detail Template	`ColumnListItem` `OverflowToolbar` `List` `MessagePage` `ObjectHeader` `Page` `SearchField` `Table` `Toolbar` `ViewSettingsDialog`	`titleHeading` `SemanticPage` `FilterAction` `SendEmailAction`	`sap.f.FlexibleColumnLayout` (2 columns)
Master-Detail (FLP) Template	`App` `Button` `ColumnListItem` `FormattedText` `IconTabBar` `HBox` `List` `MessagePage` `ObjectListItem` `ObjectNumber` `ObjectHeader` `PullToRefresh` `ScrollContainer` `SearchField` `SplitApp` `Table` `Toolbar` `ToolSpacer` `ViewSettingsDialog`	`DetailPage` `FilterAction` `GroupSelect` `MasterPage` `SendEmailAction` `SortSelect`
APF Demo Application	`App` `Bar` `Button` `CheckBox` `FacetFilter` `FacetFilterItem` `FormattedText` `Label` `MessagePopover` `NavContainer` `OverflowToolbarButton` `Page` `ScrollContainer` `SearchField` `Title` `ToggleButton` `Toolbar` `ToolSpacer`
APF Configuration Modeler	`App` `Bar` `Button` `Column` `ColumnListItem` `Input` `Label` `Page` `ScrollContainer` `Title` `Toolbar` `ToolSpacer` `Vbox`
Chart Demo App	`List` `SplitApp` `Toolbar`		`sap.viz.ui5.4controls.Popover` `sap.viz.ui5.controls.VizFrame` D3 charts (https://d3js.org)

Demo Apps

Demo Apps

Features, Layouts, and Specific Topics

Controls

In this section:

Related information