With the Demo Kit, we deliver some demo apps that show you how you can use the various features and controls of OpenUI5.
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)
The following tables give an overview of what each demo app shows.
| Demo App | Feature | Layouts | Specific Topic |
|---|---|---|---|
| *Shopping Cart* | [XML View](/docs/04_Essentials/xml-view-91f2928.html) [Busy Indicators](/docs/08_More_About_Controls/busy-indicators-0dd2110.html) [Device Adaptation](/docs/05_Developing_Apps/device-adaptation-using-device-models-for-your-app-8dbd35e.html) [Expression Binding](/docs/04_Essentials/expression-binding-daf6852.html) Input validation \(see [Validation Messages](/docs/04_Essentials/validation-messages-a90d93d.html)\) | `sap.ui.layout.BlockLayout` `sap.ui.layout.VerticalLayout` `sap.ui.layout.form.SimpleForm` | Filtering, custom filter Sorting Formatting [Behavior-Driven Development with Gherkin](/docs/04_Essentials/behavior-driven-development-with-gherkin-45ac9f1.html) [Mock Server](/docs/04_Essentials/mock-server-69d3cbd.html) \(OData V2\) Local storage |
| *Browse Orders* | [XML View](/docs/04_Essentials/xml-view-91f2928.html) [Busy Indicators](/docs/08_More_About_Controls/busy-indicators-0dd2110.html) [Device Adaptation](/docs/05_Developing_Apps/device-adaptation-using-device-models-for-your-app-8dbd35e.html) [Expression Binding](/docs/04_Essentials/expression-binding-daf6852.html) | `sap.ui.layout.ResponsiveGridLayout` `sap.ui.layout.form.SimpleForm` `sap.f.FlexibleColumnLayout` | Sorting Grouping Formatting [Mock Server](/docs/04_Essentials/mock-server-69d3cbd.html) \(OData V2\) |
| *Shop Administration Tool* | [XML View](/docs/04_Essentials/xml-view-91f2928.html) [Busy Indicators](/docs/08_More_About_Controls/busy-indicators-0dd2110.html) [Device Adaptation](/docs/05_Developing_Apps/device-adaptation-using-device-models-for-your-app-8dbd35e.html) [Expression Binding](/docs/04_Essentials/expression-binding-daf6852.html) [Custom Controls](/docs/07_Developing_Controls/developing-controls-8dcab00.html) | `sap.ui.layout.BlockLayout` `sap.ui.layout.ResponsiveGridLayout` `sap.uxap.ObjectPageLayout` | Formatting |
| *Employee Directory* | [XML View](/docs/04_Essentials/xml-view-91f2928.html) | `sap.ui.layout.form.SimpleForm` | [Mock Server](/docs/04_Essentials/mock-server-69d3cbd.html) \(OData V2\) [Routing and Navigation](/docs/04_Essentials/routing-and-navigation-3d18f20.html) |
| *Bulletin Board* | [XML View](/docs/04_Essentials/xml-view-91f2928.html) [Busy Indicators](/docs/08_More_About_Controls/busy-indicators-0dd2110.html) | `sap.ui.layout.form.SimpleForm` | Sorting Formatting [Mock Server](/docs/04_Essentials/mock-server-69d3cbd.html) \(OData V2\) Custom type |
| *Manage Products* | [XML View](/docs/04_Essentials/xml-view-91f2928.html) [Busy Indicators](/docs/08_More_About_Controls/busy-indicators-0dd2110.html) | Sorting Formatting [Mock Server](/docs/04_Essentials/mock-server-69d3cbd.html) \(OData V2\) |
| 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` D3 charts \([https://d3js.org](https://d3js.org)\) | |
| *Employee Directory* | `App` `IconTabBar` `List` `Toolbar` | ||
| *Hello World* | `App` | ||
| *Bulletin Board* | `App` `ColumnListItem` `IconTabBar` `Toolbar` | `FullscreenPage` `SendEmailAction` | |
| *Manage Products* | `App` `Toolbar` | `FullscreenPage` `SendEmailAction` |