Samples

Start here

The ones to read first, in order. One class, one view, one roundtrip - the shape every other sample in this repository grows from, plus the developer tools you will open when something does not render.

• Basics IHello World, the Smallest AppRuns in the browserUI5 1.71+z2ui5_cl_smp_app_493
• Basics IIData Binding: Input and ButtonRuns in the browserUI5 1.71+z2ui5_cl_smp_app_494
• Basics IIILifecycle: Init, Event, NavigatedRuns in the browserUI5 1.71+z2ui5_cl_smp_app_495
• Basics IVEvents, Views and RoundtripsRuns in the browserUI5 1.71+z2ui5_cl_smp_app_004
• Basics VThe Developer Tools (Ctrl+F12)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_496
• Basics VIUnit Tests for the App LogicRuns in the browserUI5 1.71+z2ui5_cl_smp_app_503
• Basics VIITranslatable Texts (Text Elements)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_519

Get your data on screen

How an ABAP field becomes something a user reads and edits: binding an attribute, the types that convert it, formatters, and views built from data rather than written out.

• BindingA View Built From RTTI, No Field NamedRuns in the browserUI5 1.71+z2ui5_cl_smp_app_497
• BindingCurrency Amounts (sap.ui.model.type.Currency)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_067
• BindingDynamic Table Typed at Runtime (RTTI)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_061
• BindingExpression Binding, Types and Composite PartsRuns in the browserUI5 1.71+z2ui5_cl_smp_app_027
• BindingModel setSizeLimit for Large Tables (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_071
• BindingOmit Initial ValuesRuns in the browserUI5 1.71+z2ui5_cl_smp_app_507
• BindingPath Only (_bind_path)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_508
• BindingPre-serialized JSON (json)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_509
• BindingSingle Table Cell (tab_index)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_144
• BindingStructure Fields and INCLUDEsRuns in the browserUI5 1.71+z2ui5_cl_smp_app_166
• BindingTypes for Integer, Decimal, Date and TimeRuns in the browserUI5 1.71+z2ui5_cl_smp_app_047
• FormatterABAP Date and Time Strings (DATS/TIMS)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_450
• FormatterDate Object for the DatePickerRuns in the browserUI5 1.71+z2ui5_cl_smp_app_457
• FormatterDate Objects for the PlanningCalendarRuns in the browserUI5 1.71+z2ui5_cl_smp_app_456
• FormatterInline Icons in a TextRuns in the browserUI5 1.71+z2ui5_cl_smp_app_466
• FormatterWhen Not to Use One: Compute in ABAPRuns in the browserUI5 1.71+z2ui5_cl_smp_app_453
• TemplatingDynamic Content in a Nested ViewRuns in the browserUI5 1.71+z2ui5_cl_smp_app_176
• TemplatingMetadata-Driven Table and FormRuns in the browserUI5 1.71+z2ui5_cl_smp_app_173

Show many rows

Internal tables on screen - the responsive table, the grid table for large sets, lists and trees - with growing, selection, editing and everything a row can carry.

• Grid TableCollapsible Subtotals in a TreeTable (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_545
• Grid TableCopy & Paste, CellSelector (UI5 1.119+) (A)Runs in the browserUI5 1.119+z2ui5_cl_smp_app_538
• Grid TableEvents on Cell LevelRuns in the browserUI5 1.71+z2ui5_cl_smp_app_160
• Grid TableFull Example with sap.ui.tableRuns in the browserUI5 1.71+z2ui5_cl_smp_app_070
• Grid TableKeep Column Filters on Refresh (C)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_143
• Grid TableSubtotals and Grand Total per CurrencyRuns in the browserUI5 1.71+z2ui5_cl_smp_app_544
• ListFilter and Sort the Binding from ABAP (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_454
• ListLive Filter on the Client, No Roundtrip (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_455
• ListStandardListItem, Highlight and EventsRuns in the browserUI5 1.71+z2ui5_cl_smp_app_048
• TableCopy Options of the CopyProvider (UI5 1.119+) (A)Runs in the browserUI5 1.119+z2ui5_cl_smp_app_539
• TableDrag and Drop Rows (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_459
• TableEditable Cells, Add and Delete RowsRuns in the browserUI5 1.71+z2ui5_cl_smp_app_011
• TableFilter Rows in the BackendRuns in the browserUI5 1.71+z2ui5_cl_smp_app_045
• TableLarge Table with Growing and ScrollContainerRuns in the browserUI5 1.71+z2ui5_cl_smp_app_006
• TableLive Search over a Large TableRuns in the browserUI5 1.71+z2ui5_cl_smp_app_059
• TableRefused Cell Values (t_model_skipped)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_504
• TableSearch in the Backend (SearchField)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_053
• TableSelection Modes: Single and Multi SelectRuns in the browserUI5 1.71+z2ui5_cl_smp_app_019
• TreeDrag and Drop Nodes (A,C)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_461
• TreeEditable Nodes with CustomTreeItem (C)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_463
• TreeInside a Dialog (C)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_462
• TreeNested ABAP Table in a sap.m.TreeRuns in the browserUI5 1.71+z2ui5_cl_smp_app_460

Talk to the user

The other direction: events arriving from the view, messages and message boxes going back, the popups, popovers and menus that ask before something happens - and an assistant that answers back.

• AIChat Assistant with FeedInput and FeedListItem (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_540
• AIExplain This Data in a DynamicSideContent Panel (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_541
• EventControl Objects in t_arg (FacetFilter)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_197
• EventCustom Data Attached to ControlsRuns in the browserUI5 1.71+z2ui5_cl_smp_app_536
• EventExpressions, Formatters and Literals in t_argRuns in the browserUI5 1.71+z2ui5_cl_smp_app_537
• EventExtra Arguments with t_argRuns in the browserUI5 1.71+z2ui5_cl_smp_app_167
• EventKeep the Last Keystroke with check_queue_lastRuns in the browserUI5 1.71+z2ui5_cl_smp_app_511
• EventKeyboard Shortcuts, Ctrl+S (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_471
• EventLink with preventDefaultRuns in the browserUI5 1.71+z2ui5_cl_smp_app_472
• EventLiteral Arguments (check_arg_literal)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_506
• EventPrevent Default per ColumnRuns in the browserUI5 1.71+z2ui5_cl_smp_app_505
• MenuFull Path of the Selected Item (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_473
• MenuMenu as Popover with core:requireRuns in the browserUI5 1.71+z2ui5_cl_smp_app_163
• MessageMessage Model and MessageManager (C)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_467
• MessageMessageBox for Any DataRuns in the browserUI5 1.71+z2ui5_cl_smp_app_502
• MessageMessageBox from SY, BAPIRET2 or ExceptionRuns in the browserUI5 1.71+z2ui5_cl_smp_app_008
• MessageMessageBox via the Global Object (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_512
• MessageMessageBox, Types and Custom ActionsRuns in the browserUI5 1.71+z2ui5_cl_smp_app_382
• MessageMessagePopover URL Policy (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_474
• MessageMessageToast via the Global Object (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_381
• MessageMessageView and MessagePopover (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_452
• PopoverBasic Example with PlacementRuns in the browserUI5 1.71+z2ui5_cl_smp_app_026
• PopoverOpen from a Table Row (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_052
• PopoverOpen Together with the View BuildRuns in the browserUI5 1.71+z2ui5_cl_smp_app_490
• PopoverQuickView Contact CardRuns in the browserUI5 1.71+z2ui5_cl_smp_app_109
• PopoverSelect from a ListRuns in the browserUI5 1.71+z2ui5_cl_smp_app_081
• PopoverToggle by ID (toggleBy) (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_465
• PopupDialog inside a DialogRuns in the browserUI5 1.71+z2ui5_cl_smp_app_161
• PopupEdit a Row in a Second AppRuns in the browserUI5 1.71+z2ui5_cl_smp_app_500
• PopupElement Binding to the Selected Row (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_470
• PopupNavigate between Dialogs (NavContainer) (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_170
• PopupValue Help: Suggestions and F4 DialogRuns in the browserUI5 1.71+z2ui5_cl_smp_app_009
• PopupWays to Open a Dialog (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_012

Move through the app

More than one view and more than one app: navigation and app calls, views nested inside views, and the small things that decide where the user is looking - focus, scrolling, a timer.

• FocusFocus a Table Cell by Column and Row (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_421
• FocusJump to the Next Input on Enter (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_189
• FocusSet Focus and Select Text in an Input (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_133
• HashApp State, Bookmark and Share (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_498
• HashApp-Owned Routing (#/detail) (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_499
• HashRouting Mode FRESH (a New Instance) (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_468
• HashRouting Mode KEEP (Back to the State) (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_480
• NavigationCall and Leave Apps (nav_app_call)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_024
• NavigationData Loss Protection on Leaving (A,C)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_279
• NavigationPage Transitions (view_display transition) (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_531
• NavigationReturn Data and Events to the CallerRuns in the browserUI5 1.71+z2ui5_cl_smp_app_488
• NavigationUncaught Error and Error PopupRuns in the browserUI5 1.71+z2ui5_cl_smp_app_464
• Nested ViewBasic Example (nest_view_display)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_065
• Nested ViewDestroy and Target a Slot (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_510
• Nested ViewEmbed Another App's ViewRuns in the browserUI5 1.71+z2ui5_cl_smp_app_104
• Nested ViewMaster-Detail with FlexibleColumnLayoutRuns in the browserUI5 1.71+z2ui5_cl_smp_app_097
• Nested ViewThree Columns with FlexibleColumnLayoutRuns in the browserUI5 1.71+z2ui5_cl_smp_app_098
• ScrollScroll a Control into View (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_363
• ScrollScroll to a Pixel Position (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_362
• TimerProgress Indicator during a Backend Call (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_064
• TimerRefresh the View Every n Seconds (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_028

Reach outside the view

Where an app stops being only a view: the browser it runs in, the device it runs on, files in and out, custom CSS, and driving a control from the backend by its id.

• BrowserCopy to Clipboard (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_325
• BrowserKeyboard Layout of an Input (inputmode) (C)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_516
• BrowserLocal and Session Storage (A,C)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_327
• BrowserLogout from the Client (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_361
• BrowserOffline Queue for a Stock Count (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_543
• BrowserOpen a URL in a New Tab (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_073
• BrowserOpen Mail, Phone and SMS Links (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_316
• BrowserReload the Page (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_492
• BrowserScan Field with Submit (InputExt) (A,C)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_530
• BrowserSet the Tab Favicon (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_491
• BrowserSet the Tab Title (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_125
• Control BehaviourAggregation Item by Index (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_514
• Control BehaviourExpand a Panel by ID (setExpanded) (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_448
• Control BehaviourInline CSS on a Control (css) (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_513
• Control BehaviourMultiInput with Tokens (C)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_078
• Control BehaviourOpen the PDF Viewer by ID (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_449
• Control BehaviourRegister an Icon Font (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_518
• Control BehaviourSwitch NavContainer Page by ID (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_088
• Control BehaviourThe Global Busy Indicator (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_515
• Control BehaviourWizard with Steps (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_202
• CSSColor Table Cells from the BackendRuns in the browserUI5 1.71+z2ui5_cl_smp_app_305
• CSSFlexBox Layouts with Custom ClassesRuns in the browserUI5 1.71+z2ui5_cl_smp_app_255
• CSSShip Your Own CSS with the ViewRuns in the browserUI5 1.71+z2ui5_cl_smp_app_050
• CSSStyle by Data with CustomData writeToDomRuns in the browserUI5 1.71+z2ui5_cl_smp_app_535
• DeviceCamera, Take Photos (C)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_306
• DeviceDevice Model: Phone, Tablet, Desktop (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_445
• DeviceFrontend Info: UI5 Version, Theme, OS, BrowserRuns in the browserUI5 1.71+z2ui5_cl_smp_app_122
• DeviceGeolocation from the Browser (C)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_120
• FileDownload to the Browser (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_186
• FileUpload to the Backend (C)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_074
• FileUpload with an UploadSet (C)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_517
• FileZIP and CSV Download with cl_abap_zip (A)Runs in the browserUI5 1.71+z2ui5_cl_smp_app_542

sap.f

• Shell Bar with title mega menuShell Bar example showing the control title as part of a mega menu, configurable by the app developer.Runs in the browserUI5 1.73+z2ui5_cl_smpc_app_110
• Grid List - Basic examplesA GridList with the default grid layout, resized live with a slider to show how the grid reflows.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_111
• Card ControlThis sample illustrates how to specify the predefined header and the content of the Card control.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_117
• Grid List - Different Modes With Various Item TypesThis is a sample for GridList with different modes of selection.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_133
• Side Panel with single action itemDemonstrates the usage of Side Panel with single action item.Runs in the browserUI5 1.107+z2ui5_cl_smpc_app_136
• Grid List with GridBoxLayoutThis layout allows to display same height grid items with configurable width.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_144
• Grid List - Drag and DropThis sample represents GridList with enabled Drag and Drop functionality.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_148
• Shell Bar with menu buttonShell Bar example with a menu button and a plain title.Runs in the browserUI5 1.73+z2ui5_cl_smpc_app_152
• Product Switch with NavigationThis sample demonstrates the navigation behavior of Product Switch, configurable by the app developer.Runs in the browserUI5 1.72+z2ui5_cl_smpc_app_165
• Semantic Page using Draft IndicatorThis sample demonstrates the use of a DraftIndicator in the footer area.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_166
• Grid ContainerThis sample represents the general usage of GridContainer.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_168
• Dynamic Page Freestyle ExampleDynamic Page freestyle example with a responsive sap.m.Table in the content area, showing that each control can be placed in the title and the header content areas.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_170
• Grid List features - Grouping, Header, GrowingThis sample illustrates subgroups with headers, custom header and lazy loading of GridList items.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_176
• Grid List - Break point examples - S, M, L, XLThis sample illustrates how to configure the responsive settings for different container sizes.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_213
• Shell Bar with searchShell Bar example with configured search functionality.Runs in the browserUI5 1.73+z2ui5_cl_smpc_app_218
• Grid List with Responsive Column LayoutThis layout displays a variable number of grid columns depending on available screen size. Grid row's height is dynamically determined by the height of the highest grid element on this row.Runs in the browserUI5 1.72+z2ui5_cl_smpc_app_222
• Flexible Column Layout (with Event Bus)Clicking on a link in a column opens the next column.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_234
• Dynamic Page with Sticky SubheaderDynamic Page containing an sap.m.IconTabBar in the sticky subheader content area.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_238
• Dynamic Page with Responsive AvatarDynamic Page demonstrating the breakpointChange event to adjust Avatar sizes responsively based on breakpoints.Runs in the browserUI5 1.147+z2ui5_cl_smpc_app_244
• Flexible Column Layout Landmark Info For ColumnsFlexible Column Layout where the first and the last columns have custom Landmark InfoRuns in the browserUI5 1.95+z2ui5_cl_smpc_app_449
• Flexible Column Layout Landmark Info For ArrowsFlexible Column Layout where the all the arrows have custom Landmark InfoRuns in the browserUI5 1.95+z2ui5_cl_smpc_app_450
• Grid Container - Drag and DropThis sample represents GridContainer with enabled Drag and Drop functionality.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_526
• Grid Container - Drag and Drop From List to GridContainerThis sample represents how items from a control which is not GridContainer can be dragged and dropped over a GridContainer.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_527
• Grid Container - Keyboard navigation between multiple gridsThis sample demonstrates the keyboard navigation between multiple gridsRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_528
• Semantic Page - Freestyle SampleThis sample demonstrates a SemanticPage with all semantic-specific actions both in the title and in the footer areas.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_529
• Dynamic Page with Analytical TableDynamic Page containing an Analytical Table in the content area aligned with the SAP Fiori List Report floorplan.Runs in the browserUI5 1.119+z2ui5_cl_smpc_app_559
• Dynamic Page with WizardDynamic Page containing a sap.m.Wizard and WizardProgressNavigator in the content area.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_560
• Flexible Column Layout with programmatic scrolling to an itemFlexibleColumnLayout where the app programmatically scrolls to some item within the newly navigated column, once the column is fully resizedRuns in the browserUI5 1.77+z2ui5_cl_smpc_app_577
• Flexible Column Layout with Routing and first page in fullscreen onlyFlexible Column Layout as an app with routing that displays different pages in the initial column. The first page is only displayed in OneColumn layout typeRuns in the browserUI5 1.73+z2ui5_cl_smpc_app_578
• Flexible Column Layout with Routing and One Initial ColumnFlexible Column Layout as an app with routing that starts with a single initial column.Runs in the browserUI5 1.128+z2ui5_cl_smpc_app_579
• Flexible Column Layout with Routing and Two Initial ColumnsFlexible Column Layout as an app with routing that starts with two initial columns.Runs in the browserUI5 1.73+z2ui5_cl_smpc_app_580
• Grid List - Item DesignsThis is a sample for GridList item templates representing a typical tools page dashboard style.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_581
• Navigation with keyboard arrows between multiple GridListsThis sample demonstrates the keyboard navigation between multiple gridsRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_582
• Shell Bar with Product SwitchShell Bar example with enabled Product Switch, configurable by the app developer. The Product Switch control is in experimental state.Runs in the browserUI5 1.73+z2ui5_cl_smpc_app_583
• Shell Bar with Flexible Column LayoutExample of Shell Bar in combination with Flexible Column Layout.Runs in the browserUI5 1.73+z2ui5_cl_smpc_app_584
• Shell Bar with Split AppExample of Shell Bar in combination with Split App.Runs in the browserUI5 1.73+z2ui5_cl_smpc_app_585
• Avatar GroupThis sample demonstrates the different group types and item sizes of the AvatarGroup control.Runs in the browserUI5 1.73+z2ui5_cl_smpc_app_662
• Side PanelDemonstrates the basic usage of Side Panel.Runs in the browserUI5 1.146+z2ui5_cl_smpc_app_663
• Side Panel with overflow menuDemonstrates the usage of Side Panel with overflow menu on desktop and tablet devices.Runs in the browserUI5 1.107+z2ui5_cl_smpc_app_664
• Resizable Side PanelDemonstrates the usage of resizable Side Panel.Runs in the browserUI5 1.107+z2ui5_cl_smpc_app_665
• Product Switch with imageSrcThis sample demonstrates the usage of Product Switch Item with imageSrc, configurable by the app developer.Runs in the browserUI5 1.140+z2ui5_cl_smpc_app_666
• Hero Banner - BasicA basic Hero Banner with a header text and overline text.Runs in the browserUI5 1.152+z2ui5_cl_smpc_app_667
• Hero Banner - Columns RatioDemonstrates the three columnsRatio options: single column (no endContent), Equal, and FirstWider.Runs in the browserUI5 1.152+z2ui5_cl_smpc_app_668
• Hero Banner - Header Block and Actions PlacementDemonstrates actionsPlacement and headerBlockPlacement properties for controlling the position of the header and actions.Runs in the browserUI5 1.152+z2ui5_cl_smpc_app_669
• Hero Banner - Integration CardDemonstrates the use of sap.ui.integration.widgets.Card inside both the startContent (default slot) and endContent aggregations of the Hero Banner.Runs in the browserUI5 1.152+z2ui5_cl_smpc_app_670
• Hero Banner - Use CasesA collection of common Hero Banner use cases: header actions only, content with actions, actions below header, and header at bottom.Runs in the browserUI5 1.152+z2ui5_cl_smpc_app_671

sap.gantt

• sap.gantt - GanttChartWithTablesap.gantt.GanttChartWithTable expressed in abap2UI5 - a SAPUI5-only control, so the demo kit original is outside OpenUI5 and this is orientation rather than a 1:1 port.UI5 1.71+z2ui5_cl_smpc_sapui5_013
• sap.gantt - GanttChartContainersap.gantt.GanttChartContainer expressed in abap2UI5 - a SAPUI5-only control, so the demo kit original is outside OpenUI5 and this is orientation rather than a 1:1 port.UI5 1.71+z2ui5_cl_smpc_sapui5_014

sap.m

• Action List ItemUse the Action List Item to trigger an action directly from a listRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_001
• Page,Toolbar and BarEach screen of a mobile application is typically represented by a 'Page' consisting of a header, a scrollable content area and optionally a footer. The standard header offers a navigation button and a title.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_002
• Breadcrumbs sampleBreadcrumbs is useful for displaying link hierarchyRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_003
• Busy Dialog - StandardA Busy Dialog blocks the user interface until the currently running operation has been finished. No other activities can be started in parallel.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_004
• ButtonButtons trigger user actions and come in a variety of shapes and colors. Placing a button on a page header or footer changes its appearance.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_005
• Carousel with ControlsWith the Carousel a user can browse through multi-page content by swiping left or right.Runs in the browserUI5 1.125+z2ui5_cl_smpc_app_006
• Tri-State Check BoxIn this sample, the CheckBox reflects the selection states of its dependent input fields - selected, not selected, and partially selected.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_007
• Color Palette in a formThe standalone ColorPalette in a container (sap.ui.layout.SimpleForm).Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_008
• Table - ColumnsThe table shares many features with the list and, in addition, introduces columns. The table is fully responsive and can hide columns or shown them in-place if the screen space is not sufficient.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_009
• Table Test with OPAThe following example simulates a click on a list item in a table.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_010
• Combo boxThe combo box control provides a list box with items and a text field allowing the user to either type a value directly into the control or choose from the list of existing items.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_011
• Comparison PatternThe pattern allows users to select multiple items from an sap.m.Table and display information about them in a structured way - all items are displayed next to each other for easy comparison, based on their specifics.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_012
• Cookie Settings Dialog PatternThe Cookie Settings Dialog allows you to easily manage the cookie settings according to the needs of the specific product.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_013
• Custom List ItemWith the Custom List Item you can add any kind of content to lists.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_014
• Custom Tree ItemWith the Custom Tree Item you can add any kind of content to Tree.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_015
• Date Picker - Open by Another ControlThis example shows Date Picker which is opened by another control.Runs in the browserUI5 1.97+z2ui5_cl_smpc_app_016
• Date Range SelectionThe Date Range Selection is an extension of the Date Picker Control and enables the user to select range of dates.Runs in the browserUI5 1.95+z2ui5_cl_smpc_app_017
• Date Time PickerWith the DateTimePicker a Date can be entered or selected including the time part.Runs in the browserUI5 1.99+z2ui5_cl_smpc_app_018
• Dialog with Confirm OptionsCreating a dialog with confirm and reject options that replaces the confirmDialog functionality.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_019
• Display List ItemUse the Display List Item for showing name/value pairs.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_020
• Draft IndicatorThe Draft Indicator shows that eighter currently a draft is saving or that it is already saved. It does not block the current UI screen so other operations could be triggered in parallel.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_021
• Facet Filter - LightThis is a 'Light' version of the Facet Filter. It is for small displays where only a selectable summary bar is shown, and a dialog is shown for setting the facet values.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_022
• Feed ContentShows the tile containing the text of the feed, a subheader, and a numeric value.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_023
• FeedThis sample shows you how to build a complete feed user interface by combining a FeedInput with a list of FeedListItems.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_024
• Feed List ItemThe Feed List Item provides a standard UI for 'feeds' where multiple users publish information on regular basis on a certain topic.Runs in the browserUI5 1.137+z2ui5_cl_smpc_app_025
• Flex Box - NestedFlex Boxes can be nested. Remember also that HBox and VBox are 'convenience' controls based on the Flex Box control.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_026
• Generic Tag with Different ConfigurationsPreviews of the GenericTag control based on combinations of different sets of properties.Runs in the browserUI5 1.97+z2ui5_cl_smpc_app_027
• KPI TileShows KPI Tile samples that can contain header, subheader, key value, trend, scale, unit, and a footer.Runs in the browserUI5 1.92+z2ui5_cl_smpc_app_028
• Header Container - Horizontal ModeThe Header Container with horizontal layout. It provides horizontal scrolling on mobile devices (tablet and phone). On a desktop, it provides scroll left and scroll right buttons.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_029
• Icon Tab Bar - Stretch Content HeightIn this example, the IconTabBar height is stretched to the maximum height of the page content. Note: The height of the parent container must be defined as a fixed value.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_030
• Image with ImageMode.BackgroundVisualizes the state of the control when the mode property is set to ImageMode.Background.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_031
• Input - Value StatesThis example shows different input value states.Runs in the browserUI5 1.94+z2ui5_cl_smpc_app_032
• Link - EmphasizedUsually you use an Object Identifier in the first column of a table. But if you need an active identifier you should use an 'emphasized' link instead.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_033
• List - Counter IndicationThe counter of an item quickly shows how many detail entries are related, without having to navigate to the detail page.Runs in the browserUI5 1.117+z2ui5_cl_smpc_app_034
• List - No Data IndicationIf the list is empty it indicates this state by displaying a message text.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_035
• Message Box Initial FocusShows how to set initial focus to MessageBox button.Runs in the browserUI5 1.84+z2ui5_cl_smpc_app_036
• Message ToastThe Message Toast displays the message text as an overlay to the current screen. It closes automatically after some time without requiring further user interaction.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_037
• Message View connected with Message ModelA sample showing how you can connect the MessageView with MessageManager.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_038
• MultiComboBox - Grouping of itemsItems in the MultiComboBox could be grouped by a propertyRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_039
• MultiInputMultiInput provides functionality to add / remove / enter tokens.Runs in the browserUI5 1.94+z2ui5_cl_smpc_app_040
• Object HeaderThis is a Object Header which displays the basic information about objects similar to the Object List Item. Besides a title and number you can show multiple attributes (on the left) and statuses (on the right).Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_041
• Object StatusThe object status is a small building block representing a status with a semantic color.Runs in the browserUI5 1.80+z2ui5_cl_smpc_app_042
• Panel - Expand / CollapsePanels also have the possibility to expand/collapse their content (including the infoToolbar if available). [since rel. 1.22]Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_043
• PDF Viewer - PopupA PDF viewer opening as a popup dialog.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_044
• RangeSliderWith the RangeSlider a user can specify range from a numerical interval.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_045
• Scroll ContainerThe Scroll Container is a control that can display arbitrary content within a limited screen area and provides touch scrolling to make all content accessible.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_046
• Segmented ButtonThe Segmented Button allows the user to pick one out of many options for displaying the content of the current page. It is a UI pattern from iOS, now also available for other platforms.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_047
• SelectIllustrates the usage of a Select in header, footer and content of a page. Note the different display options.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_048
• StepInputThe StepInput allows the user to change stepwise a value by a predefined step and also to set additional description, such as units of measurement and currencies after the input field.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_049
• Switch"Some say it is only a switch, I say it is one of the most stylish controls in the universe of mobile UI controls." (unknown developer)Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_050
• TextThe text control can be used for embedding longer paragraphs of text into your application, that need text wrapping.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_051
• Text AreaThe Text Area allows to enter multi-line text and automatically breaks to a new line for overflow text. If the text gets too big to be displayed at once the user can scroll up and down.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_052
• Toolbar - Shrinkable itemsToolbar items can shrink/expand when the toolbar is resized. This behavior is enabled/disabled via the ToolbarLayoutData layout. It is also possible to set min/max width for shrinkable items.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_053
• Tree - BasicTree displays data in hierarchical structure.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_054
• Standalone Icon Tab HeaderIcon Tab Header used standalone, outside of Icon Tab Bar.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_055
• ImageContentShows ImageContent that can include an icon, a profile image, or a logo with a tooltip.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_056
• Input List ItemUse the Input List Item on phones to build form like user interfaces.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_057
• Label PropertiesThis sample shows the different behaviors of a label.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_058
• LightBoxDisplays several image thumbnails. Clicking on each of them will open a LightBox.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_059
• MenuThis control is used to show a menu in both desktop and mobile.Runs in the browserUI5 1.84+z2ui5_cl_smpc_app_060
• Menu ButtonThis control is used to open a menu in both desktop and mobile.Runs in the browserUI5 1.94+z2ui5_cl_smpc_app_061
• Message Strip with enableFormattedTextA sample MessageStrip that shows status messages with additional formatting.Runs in the browserUI5 1.129+z2ui5_cl_smpc_app_062
• News ContentThis control is used to display the news content text and subheader in a tile.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_063
• Numeric Content with IconShows NumericContent including an icon.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_064
• Message Popover - Message HandlingThe message handling concept sample shows how you can connect an error inside the page (such as input validation error) with an error, visualized as an item in a message popover.Runs in the browserUI5 1.84+z2ui5_cl_smpc_app_065
• MessagePopoverMessagePopover is a control that displays a summarized list of different types of messages (errors, warnings, success and information). It provides a handy and systemized way to navigate and explore details for every message.Runs in the browserUI5 1.84+z2ui5_cl_smpc_app_066
• Message Popover - Async Message HandlingThe message handling concept sample shows how you can use callback functions for resolving a promise after a link or descriptions have been asynchronously validated.Runs in the browserUI5 1.84+z2ui5_cl_smpc_app_067
• SliderWith the Slider a user can choose a value from a numerical range.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_068
• Radio ButtonTypically the Radio Button is used by other controls. E.g. the List uses it for the single selection. But you can also use the Radio Buttons control directly, to allow selection of exactly one of multiple options.Runs in the browserUI5 1.126+z2ui5_cl_smpc_app_069
• Progress IndicatorShows the progress of a process in a graphical way. To indicate the progress, the inside of the ProgressIndicator is filled with a color.Runs in the browserUI5 1.73+z2ui5_cl_smpc_app_070
• Object IdentifierThe object identifier is a small building block representing an object by a title and short description. Often it is used in the first column of a table.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_071
• Object NumberThe object number is a small building block representing an important, numerical attribute of an object together with it's unit. Often it is used in the last column of a table.Runs in the browserUI5 1.86+z2ui5_cl_smpc_app_072
• Object AttributeThis is an example of Object Attribute used standalone.Runs in the browserUI5 1.97+z2ui5_cl_smpc_app_073
• Object List ItemThe Object List Item has many possibilities to provide a quick overview for an object within a list.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_074
• SelectListA SelectList allows the user to select one item from a list of choices.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_075
• Notification List ItemA list item suitable for showing notifications to the user.Runs in the browserUI5 1.90+z2ui5_cl_smpc_app_076
• Notification List GroupA control suitable for grouping notifications.Runs in the browserUI5 1.90+z2ui5_cl_smpc_app_077
• Tile ContentShows the universal container for different content types and context information in the footer area.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_078
• Title with LinkThis sample shows how to add a link to a title.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_079
• Toggle ButtonToggle Buttons can be toggled between pressed and normal state.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_080
• Pull To RefreshWith the Pull to Refresh you can trigger an update operation by swiping the current page down on touch devices. On other devices the Pull To Refresh is visible all the time and the user clicks it like a button.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_081
• Slide TileShows Generic Tile with the 2x1 frame type displayed as sliding tiles.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_082
• Standard List Item - AvatarThis list item offers a standardized user interface for list content with title, description, and avatar.Runs in the browserUI5 1.98+z2ui5_cl_smpc_app_083
• URL HelperThe URL Helper can be used to easily trigger a phone's native apps like Email, Telephone and SMS. It can be used with any UI control but typically an active Display List Item is chosen.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_084
• Basic TokenizerBasic Tokenizer with tokensRuns in the browserUI5 1.82+z2ui5_cl_smpc_app_085
• OverflowToolbar - Design and stylingThe Design and Style properties can be used to specify the visual design of the OverflowToolbar/Toolbar.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_086
• Fiori Object Page - Standard ClassesThis page implements the same sample as in 'Fiori Sample Page - sapUiFioriObjectPage' using standard margin classes.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_089
• Dialog with Search FieldUse a Search Field inside a Dialog.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_090
• Time Picker - Open by Another ControlThis example demonstrates the Time Picker that is opened by another control.Runs in the browserUI5 1.97+z2ui5_cl_smpc_app_091
• Table - Auto popin of the table columnsThis example demonstrates the automatic pop-in behavior of the table and hiding columns instead of moving them into the pop-in depending on their importance.Runs in the browserUI5 1.77+z2ui5_cl_smpc_app_092
• Tab ContainerThe sap.m.TabContainer allows for working with multiple tabs.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_093
• Popover Controlling Closing BehaviorIn some cases the closing behavior of the Popover can lead to drill down navigation. This sample demonstrates how you can control this.Runs in the browserUI5 1.86+z2ui5_cl_smpc_app_094
• Time Picker SlidersTimePickerSliders used in a Dialog.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_095
• SplitContainer standard use caseSplitContainer maintains two NavContainers if running on tablet or desktop and one NavContainer - on phone. The display of master NavContainer depends on the portrait/landscape orientation of the device and the mode of SplitContainer.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_096
• SplitApp standard use caseThe SplitApp is the base for each master detail application. It extends the sap.m.SplitContainer control.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_097
• View Settings Dialog - StandardThe View Settings Dialog is a standard UI pattern for specifying sorting, grouping and filtering.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_098
• QuickViewCardQuickViewCard embedded in containerRuns in the browserUI5 1.92+z2ui5_cl_smpc_app_099
• QuickViewQuickView basic samples.Runs in the browserUI5 1.92+z2ui5_cl_smpc_app_100
• Wizard standard use caseThe Wizard is useful for breaking down complex tasks into smaller steps.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_101
• Late Model UpdateThe sample demonstrates how to rebind a control to a different data source after a certain delay.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_102
• Select DialogThe Select Dialog allows the user to search for and pick an item from a possibly long option list. Basically it is a convenience function to quickly assemble a Dialog, a Search Field and a List with Standard List Items.Runs in the browserUI5 1.110+z2ui5_cl_smpc_app_103
• Table Select DialogSimilar to the Select Dialog, the Table Select Dialog presents selectable items in a table-based dialog, with filter functions. You can have single select or multi select mode.Runs in the browserUI5 1.110+z2ui5_cl_smpc_app_104
• Semantic Page Full ScreenSemantic Page Full ScreenRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_105
• Semantic Page using Floating FooterIntegration of Floating Footer inside Semantic PageRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_106
• Semantic Page Master-DetailSemantic Page Master/DetailRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_107
• Planning Calendar - without row headerPlanningCalendar with only one row without row header. On click on an interval a new appointment is created.Runs in the browserUI5 1.150+z2ui5_cl_smpc_app_108
• Single Planning Calendar with Multiple Date SelectionSinglePlanningCalendar with multiple date selection functionality.Runs in the browserUI5 1.123+z2ui5_cl_smpc_app_109
• Upload SetThis sample shows an Upload Set control with a list of files to be uploaded and actions you can perform on them.Runs in the browserUI5 1.103+z2ui5_cl_smpc_app_121
• MaskInputThe sap.m.MaskInput control allows users to easily enter data in a certain format and in a fixed-width input (for example: date, time, credit card number, and others).Runs in the browserUI5 1.96+z2ui5_cl_smpc_app_153
• Formatted TextThe control can be used for embedding formatted HTML text into your application.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_154
• Check BoxCheckboxes allow users to select a subset of options. If you want to offer an off/on setting you should use the Switch control instead.Runs in the browserUI5 1.121+z2ui5_cl_smpc_app_155
• Numeric Content of Different ColorsShows NumericContent including numbers, units of measurement, and status arrows indicating a trend. The numbers can be colored according to their meaning.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_156
• Header Container - Vertical ModeThe Header Container with a vertical layout and with divider lines.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_157
• Flex Box - Gap, Row Gap & Column GapYou can add gap between rows and columns.Runs in the browserUI5 1.134+z2ui5_cl_smpc_app_158
• Input - TypesInput type corresponds to the type attribute of the HTML input tag. On touch devices, it controls the keyboard layout. On desktop, the effect of this setting is browser dependent.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_159
• LinkHere are some links. Typically links are used in user interfaces to trigger navigation to related content inside or outside of the current application.Runs in the browserUI5 1.128+z2ui5_cl_smpc_app_160
• Toolbar - ResponsiveToolbar items can be displayed depending on the current device.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_163
• Whitespaces PatternRenders whitespaces properly within controlsRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_185
• Toolbar vs Bar vs OverflowToolbarToolbar handles overflow by shrinking items. OverflowToolbar provides an overflow menu. Bar is able to perfectly center a text if nothing overflows.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_189
• Flex Box - Render TypeFlex items can be rendered differently. By default, they are wrapped in a div element. Optionally, the bare controls can be rendered directly. This can affect the resulting layout.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_190
• Object Attribute inside TableThis is an example of Object Attribute used inside Table.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_191
• Combo box - Two columns layoutUse the combo box dropdown list with two columns layout if you need to display additional information to your options, like e.g. currencies to countries or abbreviations to systems.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_193
• List - FooterWith the 'footerText' property you can set a message that is shown at the very end of the list.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_195
• Object Header - markers aggregationThis sample shows the different states of an Object Header, which can be set using the markers.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_197
• Object List Item - markers aggregationThis sample shows the different states of an Object List Item, which can be set using the markers aggregation.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_198
• ComboBox - Grouping of itemsItems in the ComboBox could be grouped by a propertyRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_199
• Object Header - CondensedThe Object Header is shown in condensed mode with title, number, number unit and one attribute.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_201
• Standard List Item - DescriptionThis list item offers a standardized user interface for list content with title and description.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_202
• Tokenizer in Toolbar and OverflowToolbarTokenizer integration with sap.m.OverflowToolbarRuns in the browserUI5 1.139+z2ui5_cl_smpc_app_203
• Standard List Item - Info State InvertedThis sample demonstrates the inverted rendering behavior of the info text and the info state of the StandardListItem control.Runs in the browserUI5 1.74+z2ui5_cl_smpc_app_204
• Select - with iconsIllustrates the usage of a Select with iconsRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_205
• Object Header - with ImageAn Object Header will also make space for an image if one is specified, via a URL for the 'icon' property. Note: This example shows the image inside ObjectHeader with the responsive property set to false.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_206
• List - Items TypeYou can use the 'type' property of any list item, which inherits from ListItemBase control, to demonstrate all possible types (see sap.m.ListType).Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_207
• Standard List Item - InfoThis list item offers a standardized user interface for list content with title and info.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_208
• Object Header Responsive VThis is a responsive Object Header without a number and with a Title, 3 Statuses/Attributes.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_209
• Table - Alternate Row ColorsTable with alternating light and dark background colors. Note: The effect of this feature is only visible in some themes (e.g. SAP Belize or SAP Quartz).Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_210
• SelectList - with iconsA SelectList with icons.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_211
• Standard List ItemThis list item offers a standardized user interface for list content with only title.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_212
• List - Selection'Single selection' forces the user to choose exactly one out of many items. With the 'multi' selection the user can pick multiple items at the same time. This is helpful for e.g. batch processing.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_224
• Table - Strict layoutThis example demonstrates the Strict layout and the column resizing of the table.Runs in the browserUI5 1.91+z2ui5_cl_smpc_app_225
• PopoverThe Popover controls allows to show contextual information without leaving the current page. Press somewhere outside the popover to close it.Runs in the browserUI5 1.84+z2ui5_cl_smpc_app_229
• InitialPage PatternThe initial page floorplan allows the user to navigate to a single object to view or edit it.Runs in the browserUI5 1.98+z2ui5_cl_smpc_app_233
• Facet Filter - SimpleWith the Facet Filter you can offer multiple filters ('facets') to assist the user in narrowing down the data in, say, a table. With this default 'Simple' type, each filter is displayed in a row for selection.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_235
• Feed InputThis sample shows a standalone feed input with different settings.Runs in the browserUI5 1.139+z2ui5_cl_smpc_app_236
• Object Marker in a tableThe ObjectMarker is a small building block representing an object by an icon or text and icon. Often it is used in a table.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_237
• Nav ContainerThe Nav Container stacks multiple pages and offers an API to switch between them with some animation. Typically application developers would use the App control which inherits from NavContainer.Runs in the browserUI5 1.111+z2ui5_cl_smpc_app_242
• Responsive PopoverThe Responsive Popover is an abstraction of Popover and Dialog. On the phone a Dialog will be shown. On tablet and desktop a Popover is shown.Runs in the browserUI5 1.129+z2ui5_cl_smpc_app_243
• Button with BadgeButton with a Badge attachedRuns in the browserUI5 1.132+z2ui5_cl_smpc_app_249
• Color Palette as popoverThe ColorPalette in a popover (by use of thin wrapper control sap.m.ColorPalettePopover).Runs in the browserUI5 1.122+z2ui5_cl_smpc_app_250
• Busy Dialog - LightThis is a 'light' version of the standard Busy Dialog; it also blocks the user interface until the currently running operation has been finished. It has no UI components, so you must close it programmatically when appropriate.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_251
• Carousel with Multiple Items at OnceThe customLayout aggregation determines how many pages are displayed in Carousel's visible area.Runs in the browserUI5 1.125+z2ui5_cl_smpc_app_252
• Date Picker - Value StatesThis example shows different DatePicker value states.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_253
• Date Range Selection - Value StatesThis example shows different DateRangeSelection value states.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_254
• Date Time Picker - Value StatesThis example shows different DateTimePicker value states.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_255
• Date Range Selection - Open by Another ControlThis example shows Date Range Selection which is opened by another control.Runs in the browserUI5 1.97+z2ui5_cl_smpc_app_256
• Date Time Picker - Open by Another ControlThis example shows Date Time Picker which is opened by another control.Runs in the browserUI5 1.97+z2ui5_cl_smpc_app_257
• Message DialogCreating a dialog for showing UI messages. The possible messages types are: 'None', 'Success', 'Warning' and 'Error'.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_273
• Dialog - FullscreenA dialog that can be toggled to fullscreen mode through a header button, by double-clicking the header, or by using the 'Shift+Ctrl+F' keyboard shortcut.Runs in the browserUI5 1.149+z2ui5_cl_smpc_app_274
• Tile StatusesShows the GenericTile while it is loading, if loading fails, and in disabled status.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_275
• List - GrowingThe Growing feature helps if your content is too big to be loaded/shown at once. It paginates the content into smaller chunks - aka pages - which are loaded/shown one after another. Random access to pages (e.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_276
• Table - ContextualWidth (Dynamic)This example shows the container-based pop-in behavior. The container has dynamic width.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_277
• Message BoxMessageBox is an easy way of displaying a message-type dialog to the user. You can display different types of dialogs: - Types of message (Alert, Confirmation, etc.) - Initial focus can be set to the buttons or the controls used in the messageRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_278
• Image error handling with IllustratedMessageHandle errors using the sap.m.IllustratedMessage with the error event.Runs in the browserUI5 1.98+z2ui5_cl_smpc_app_279
• TextArea - Value UpdateSince 1.30 the value property of sap.m.TextArea is not updated on every keystroke, but first when the user presses Enter or leaves the input. The change was necessary to fully support the standard UI5 data binding with formatters and types.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_280
• MultiComboBox - showSelectAll functionalityMultiComboBox with enabled Select All feature inside suggestions.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_281
• Message View inside DialogA sample with Message View placed inside a Dialog.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_284
• Popover in Custom Within AreaWithin area of sap.ui.core.Popup determines where all popups (including popovers) are positioned.Runs in the browserUI5 1.89+z2ui5_cl_smpc_app_285
• Breadcrumbs sample with current page linkBreadcrumbs sample with current page set as aggregation, resulting in a linkRuns in the browserUI5 1.123+z2ui5_cl_smpc_app_286
• Icon Tab Bar - BadgesThis sample illustrates the possibility to add badges to the icon tab filters.Runs in the browserUI5 1.77+z2ui5_cl_smpc_app_287
• PDF Viewer - EmbeddedA PDF viewer embedded in another control.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_288
• Dynamic Message Strip GeneratorGenerates MessageStrips with random properties.Runs in the browserUI5 1.78+z2ui5_cl_smpc_app_289
• MultiInput with Value HelpMultiInput that includes a SelectDialog as a value help dialogRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_290
• Notification List Group with data bindingsA control suitable for grouping notifications. The sample uses JSON data bindings.Runs in the browserUI5 1.90+z2ui5_cl_smpc_app_291
• Panel - Background DesignPanels support different background designs for better visual distinction inside containers. [since rel. 1.150]Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_292
• Message View with GroupingA sample with Message View and inside a Dialog and grouping of itemsRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_294
• View Settings Dialog - Custom FiltersYou can have custom filters in your View Settings Dialog, as shown in this example here.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_295
• View Settings Dialog - Custom SearchYou can filter the items in the filter details page using different string filter operators.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_296
• View Settings Dialog - Custom TabsYou can have custom tabs with your own defined content in the View Settings Dialog, as shown in this example.Runs in the browserUI5 1.132+z2ui5_cl_smpc_app_297
• Table - View Settings & MenusThe View Settings Dialog is standard UI pattern for specifying sorting, grouping and filtering. For a table it should be triggered by a button in the table header with the 'drop-down-list' icon.Runs in the browserUI5 1.137+z2ui5_cl_smpc_app_298
• Input - DescriptionThis sample illustrates the usage of the description with input fields, e.g. description for units of measurements and currencies.Runs in the browserUI5 1.94+z2ui5_cl_smpc_app_367
• Input - PasswordTo make sure the password is not shown as clear text you set the 'type' of an input control to 'Password'.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_368
• Input - Suggestions wrappingSuggestions wrap automatically when longer then the dropdown widthRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_369
• TextArea - GrowingSince 1.38 the growing property of sap.m.TextArea gives the ability of a control to automatically grow and shrink dynamically with its content.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_370
• TextArea - Value StatesThis sample illustrates the different value states of the sap.m.TextArea control.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_371
• Text - Max LinesThe Text control has a property to limit the number of lines for wrapping texts.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_372
• Select - Validation statesVisualizes the validation state of the control, for example, Error, Warning and Success.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_373
• Select - Wrapping textIllustrates how the text in items wrap.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_374
• Step Input - Value StatesThis example shows different StepInput value states.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_375
• Standard List Item - WrappingThis sample demonstrates the wrapping behavior of the title text and the description text. In desktop mode, the character limit is set to 300 characters, whereas in the phone mode, the character limit is set to 100 characters.Runs in the browserUI5 1.150+z2ui5_cl_smpc_app_376
• Icon Tab Bar - FilterIn this example, the Icon Tab Bar is used to apply filters on a table and display the count of the items for each view.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_377
• Icon Tab Bar - Text and CountIn this example, the Icon Tab Bar tabs display text and corresponding count.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_378
• Icon Tab Bar - Inline ModeIn this example, the Icon Tab Bar tabs display the text and the count in one line.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_379
• Icon Tab Bar - Icons OnlyIn this example, the Icon Tab Bar tabs display icons only.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_380
• Icon Tab Bar - Text OnlyIn this example, the Icon Tab Bar tabs display text only.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_381
• Icon Tab Bar - Sub tabsThis sample illustrates nested tabs with or without own content in their root-level tab.Runs in the browserUI5 1.77+z2ui5_cl_smpc_app_382
• Icon Tab Bar - SeparatorThis is an example how to use separators in the Icon Tab Bar. You can choose an icon as a separator or use the default vertical line.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_383
• ComboBox - Suggestions wrappingSuggestions wrap automatically when longer then the dropdown widthRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_384
• MultiComboBox - Suggestions wrappingSuggestions wrap automatically when longer then the dropdown widthRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_385
• MultiInput - Value StatesThis sample illustrates the different value states of the sap.m.MultiInput control.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_386
• MultiInput - Suggestions wrappingSuggestions wrap automatically when longer then the dropdown widthRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_387
• Feed and News TileShows Feed Tile and News Tile samples that can contain feed content, news content, and a footer.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_388
• Monitor TileShows Monitor Tile samples that can contain header, subheader, icon, key value, unit, and a footer.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_389
• Numeric Content Without MarginsThis is an example of the NumericContent that contains no margins, so the control is aligned to the left and to the top without any margins.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_390
• Segmented Button in Input List ItemSegmented Button used in Input List Item componentRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_391
• Flex Box - Basic AlignmentFlex Box items can be placed in different areas using the justifyContent and alignItem properties.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_392
• Flex Box - Direction & OrderYou can influence the direction and order of elements in horizontal and vertical Flex Box controls with the direction property.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_393
• Flex Box - Opposing AlignmentIn this Flex Box the items are aligned at opposing ends of the container with justifyContent set to 'SpaceBetween'.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_394
• Placing a Title in OverflowToolbar/ToolbarThe sap.m.Title control can be used to place a title inside an OverflowToolbar/Toolbar.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_395
• OverflowToolbar - AlignmentOverflowToolbar and Toolbar are often used for left/right alignment. This is easily achieved with ToolbarSpacer.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_396
• PanelPanels are helpful to group custom content. They can be decorated with header and info toolbars.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_397
• CarouselA sample of a Carousel that contains images.Runs in the browserUI5 1.125+z2ui5_cl_smpc_app_398
• ImageImages are faster than words and attract people's attention. Images can also have an active state or be used in SVG format.Runs in the browserUI5 1.79+z2ui5_cl_smpc_app_399
• Object Header - with Circle-shaped ImageAn Object Header can set shape of the image by using 'imageShape' property. The shapes could be Square (by default) and Circle. Note: This example shows the image inside ObjectHeader with the responsive property set to true.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_400
• Time Picker - Value StatesThis example shows different TimePicker value states.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_404
• Flexible sizing - ToolbarThis page shows flexible sizing with a Toolbar. The upper part extends with its content, but doesn't react to viewport changes. The lower part reacts to the viewport size. The table inside takes the available space.Runs in the browserUI5 1.119+z2ui5_cl_smpc_app_405
• Flexible sizing - Icon Tab BarThis page shows flexible sizing with an Icon Tab Bar: The upper part extends with its content, but doesn't react to viewport changes. The Icon Tab Bar reacts to the viewport size. The table inside takes the available space.Runs in the browserUI5 1.119+z2ui5_cl_smpc_app_406
• Title PropertiesThis sample shows the different behaviors of a title.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_418
• Menu with Selectable ItemsSome menu items can be added to groups to allow single or multiple item selection.Runs in the browserUI5 1.131+z2ui5_cl_smpc_app_419
• Search Field - SuggestionsAdd suggestion capabilities to a basic Search Field.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_420
• QuickViewCard Scroll ExampleQuickViewCard embedded in container with scroll barRuns in the browserUI5 1.92+z2ui5_cl_smpc_app_421
• Select Dialog Lazy LoadingSelect Dialog lazy loading example with JSON model.Runs in the browserUI5 1.117+z2ui5_cl_smpc_app_422
• Segmented Button Content ModesSegmented Button different Content ModesRuns in the browserUI5 1.142+z2ui5_cl_smpc_app_423
• OverflowToolbar - ActiveMaking an OverflowToolbar or a Toolbar active allows them to react to the click event.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_424
• OverflowToolbar - EnabledThe Enabled property can be used to enable or disable all the controls inside the OverflowToolbar/Toolbar.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_425
• Flex Box - Equal Height ColsYou can create balanced areas with Flex Box, such as these columns with equal height regardless of content.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_426
• Carousel Without PagesWhen the carousel has no pages loaded or provided illustrated message will be shown.Runs in the browserUI5 1.125+z2ui5_cl_smpc_app_427
• Header Container Without DividersThe Header Container without divider lines.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_428
• List - Navigation IndicationIf only a subset of the list items are navigable you should indicate those by setting their 'type' to 'Navigation'. This displays an navigation arrow. Do not show arrows if all items are navigable.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_429
• Tokenizer Multi-line and Clear AllTokenizer with Multi-line support and Clear All buttonRuns in the browserUI5 1.142+z2ui5_cl_smpc_app_432
• Progress Indicator With AnnouncementAnnounce the progress of the ProgressIndicator.Runs in the browserUI5 1.78+z2ui5_cl_smpc_app_435
• Tree - Icon & Context MenuTree item with icon. This example also shows the context menu for the items in the Tree control.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_436
• Tree - SelectionThis example shows different selection modes of Tree.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_437
• Responsive RefreshAn 'Responsive Refresh' can be achieved by the combination of a Search Field's refresh button and a Pull To Refresh, both of which appear depending on whether the device is touch-enabled. A growing stream of backend data is simulated here.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_438
• Text - Empty IndicatorThe Text control has a property allowing an empty text indicator to be displayed.Runs in the browserUI5 1.87+z2ui5_cl_smpc_app_439
• Menu with EndContent ItemsEndContent (Button and/or Icon) can be added to some of the menu items.Runs in the browserUI5 1.131+z2ui5_cl_smpc_app_440
• Breadcrumbs sample without current pageThe breadcrumb shows the position of the object page in the application hiearchy, without the current page. Use this breadcrumb for the object page only.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_441
• PDF Viewer - Two PDF DocumentsTwo PDF viewer frames displayed side by side. The second frame has the property isTrustedSource set to false which opens the PDF viewer with the displayType set to LinkRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_442
• Text - Render WhitespaceThe Text control has a property allowing browsers to render whitespace and tabs.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_443
• Notification List Group with max number of notifications reachedNotification List Group with max number of notifications reached. The group will render the max amount of notificatons, depending on device type allowed and then show a warning messge.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_444
• Text - HyphenationThe Text control has a property allowing hyphenation.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_445
• Link - SubtleSubtle links should be used to indicate less important links in tables with a large number of links. In this example all columns contain links, only the first column is non-subtle.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_446
• Message Box DetailsMessageBox with the option to display detailed information.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_447
• Semantic Page using Draft IndicatorIntegration of Draft Indicator inside Semantic PageRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_448
• Tab Container - with icons and additional textThis example shows how you can add additional text and an Icon to the tabs in TabContainer.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_451
• Custom Message Strip DesignDemonstrates MessageStrips with different colorSet and colorScheme properties.Runs in the browserUI5 1.143+z2ui5_cl_smpc_app_452
• Object Header Responsive IThis is a responsive Object Header with a Title, 2 Statuses/Attributes rendered next to the title in a fullScreenOptimized mode (fullScreenOptimized = true).Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_453
• Table Select Dialog GrowingTable Select Dialog can be created with property growing set to true or false.Runs in the browserUI5 1.117+z2ui5_cl_smpc_app_454
• ComboBox - Clear IconThe combo box control can show 'clear' icon, which when pressed will remove the user's input and selected key.Runs in the browserUI5 1.96+z2ui5_cl_smpc_app_455
• Input - Assisted Two ValuesThis example shows how to easily implement an assisted input with two-value suggestions.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_456
• MultiInput Data BindingMultiInput data binding allows data to be bound to tokens in MultiInput.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_457
• MultiComboBox - Two columns layoutUse the dropdown list with two columns layout if you need to display additional information to your options, like e.g. currencies to countries or abbreviations to systems.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_458
• MultiComboBox - Filtering and SuggestionsThe default filtering is 'starts with per term', which filters by the beginning of every word in every column.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_459
• Input - Suggestions - CustomThe default filtering for the suggestionItems aggregation uses a 'begins with' style operator. You can override this with your own custom filter function using the Input control's setFilterFunction method.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_460
• MultiInput with Max TokensNumber of Tokens in MultiInput cannot exceed the maxToken number.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_461
• Input - Value UpdateSince 1.24 the value property of sap.m.Input is not updated on every keystroke, but first when the user presses Enter or leaves the input. The change was necessary to fully support the standard UI5 data binding with formatters and types.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_462
• Combo box - Default FilteringThe default filtering is 'starts with per term', which filters by the beginning of every word in every column. Autocomplete (type-ahead) works only for the first column, the leading value.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_463
• Icon Tab Bar - Overflow BehaviorIn this example when there is not enough space for all tab items to fit on the screen, the rest are displayed in an overflow select list for easier selection.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_465
• Icon Tab Bar - Start and End OverflowThis sample illustrates the start and end overflow mode of the Icon Tab Bar.Runs in the browserUI5 1.90+z2ui5_cl_smpc_app_466
• Icon Tab Bar - Inline mode tab iconsThis sample illustrates tab icons for inline mode.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_467
• Standard List Item - IconThis list item offers a standardized user interface for list content with title, description and icon.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_468
• Combo box - Custom filtering "Contains"You can override the default filtering "Starts with per term" with your own filter function using the setFilterFunction method. The "Contains" approach searches everywhere in the entries.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_470
• Combo box - Custom filtering "Starts with"You can override the default filtering "Starts with per term" with your own filter function using the setFilterFunction method. The "Starts with" approach searches only in the beginning of the entries in both columns.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_471
• Input - Suggestions - DynamicWith the Input control's suggest event, you can handle the suggestionItems yourself dynamically.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_473
• Flex Box - Navigation ExamplesHere is an example of how you can use navigation items as unordered list items in a Flex Box.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_474
• ComboBox - ValidationThe combo box control could be restricted to allow selection only from the items in the list.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_475
• Object Header Responsive VIA responsive Object Header whose intro and title are active links to sap.com, with a Currency-typed number, one attribute, a status and two markers.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_476
• Header Container with Object HeaderThe Header Container combined with sap.m.ObjectHeader.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_477
• MultiInput Custom FilteringThe default filtering for the suggestionItems aggregation uses is a 'starts with per term' style operator. You can overwrite this with your own custom filter function using the Input control's setFilterFunction method.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_478
• Combo box - Search in both columnsCombo box dropdown list with search functionality which checks both columns. When you need to display additional information on your options, like e.g. keys of countries or system abbreviations, and want to search in those as well.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_479
• List - Unread IndicationWith the Unread Indicator you can highlight new items making it easier for the user to discover them.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_480
• MultiComboBox - Custom Filtering and SuggestionsThe default filtering for the suggestionsItems aggregation uses a 'starts with per term' style operator. You can override this with your own custom filter function using the setFilterFunction method.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_481
• Standard List Item - NavigatedThis example demonstrates the navigated property of the list item.Runs in the browserUI5 1.72+z2ui5_cl_smpc_app_482
• Standard List Item - Adapt TitleBy default the title size adapts to the available space and gets bigger if the description is empty. List items with and without descriptions results in titles with different sizes. In this cases it is better to switch the size adaption off.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_483
• TextArea with MaxLength = trueShows the behavior of the control with the new showExceededText property (since 1.48) and maxLength = trueRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_485
• Object Header - Active TitleThe Object Header's title can be active to trigger further actions like showing additional information in a Popover.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_486
• Panel - Sticky headerPanels can also have a sticky header. [since rel. 1.117]Runs in the browserUI5 1.117+z2ui5_cl_smpc_app_487
• Table - Item NavigatedThis example demonstrates the navigated property of the item.Runs in the browserUI5 1.72+z2ui5_cl_smpc_app_488
• Segmented Button in DialogSegmented Button used in Dialog componentRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_489
• MultiComboBoxChoose one or more out of multiple options with the MultiComboBox control.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_490
• MultiComboBox - Clear IconThe multi combo box control can show 'clear' icon, which when pressed will remove the user's input.Runs in the browserUI5 1.96+z2ui5_cl_smpc_app_491
• List - Grouping & Context MenuGrouping your items makes it easier for the user to browse and find the desired content. This example also shows the context menu for the items in the List control.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_492
• Combo box - Deferred loading of the itemsUse this feature to defer initialization of items until the point at which the items are needed. It can improve performance, reduce memory usage and unnecessary client/server round-trips.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_493
• ComboBox - maxPickerHeightLimit the picker popup height using maxPickerHeight propertyRuns in the browserUI5 1.150+z2ui5_cl_smpc_app_494
• MultiComboBox - maxPickerHeightLimit the picker popup height using maxPickerHeight propertyRuns in the browserUI5 1.150+z2ui5_cl_smpc_app_495
• Tree - Lazy loading with a JSON modelShows how lazy loading with a JSON model can be done using the toggleOpenState event.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_496
• List - SwipeWith a swipe gesture you can show additional content for an item without having to navigate to a detail page. This feature is only available for touch devices.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_497
• List - Custom ActionsThis example demonstrates how to add custom actions to list items. Dedicated 'Delete' and 'Edit' types can be used to add predefined actions to the list items. The 'Custom' type can be used to add custom actions to the list items.Runs in the browserUI5 1.137+z2ui5_cl_smpc_app_498
• List - Selection & SearchWhen searching a list with multi selection the previously selected items will stay selected. This is managed by the list control for you.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_499
• MultiInput ValidatorsMultiInput uses validators to accept, decline and change tokens.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_501
• Object Header - Select TitleThis is a Object Header with a title selection. This can be used to switch between variants of the business object being shown.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_502
• Input - Key and Value Tabular SuggestionsThis sample illustrates how the Input works with key and value values, when the data is provided with table-like suggestions.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_503
• MultiInput tokenUpdate event exampleMultiInput fires several tokenUpdate events depending on when the tokens were validated.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_504
• Table - Outdated DataYou can use the 'showOverlay' property to indicate that the table data is no longer up to date. When the user modifies the filter values of the table, this results in displaying an overlay, which disables operations on the table.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_505
• Icon Tab Bar - Tabs drag and dropThis example shows how the tab filters can be reordered and nested with drag and drop. Works only on desktop devices.Runs in the browserUI5 1.79+z2ui5_cl_smpc_app_506
• Input - Grouping of itemsItems in the Input could be grouped by a propertyRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_507
• List - Header & Info ToolbarThe 'headerText' property is an easy but limited way of setting the list header. If you need more flexibility you should assemble your own header or info toolbar that can also contain buttons.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_508
• Input - Suggestions - OSPIf you need to use an Open Search Provider (OSP) to supply possible values, you can do this with the Input control's suggest event, and build the suggestionItems dynamically according to the results of the Open Search call.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_509
• Input - Custom Value Help IconThis example shows the usage of a custom value help icon instead of the default one.Runs in the browserUI5 1.84+z2ui5_cl_smpc_app_510
• Select - Change EventsDemonstrates the use of 'change' and 'liveChange' events.Runs in the browserUI5 1.100+z2ui5_cl_smpc_app_511
• MultiInput - Model updateThis sample illustrates how the model bound to the MultiInput can be updated upon token creation or deletion.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_512
• Object Header Responsive IIThis is a responsive Object Header with a Title, 2 Statuses/Attributes rendered below the title in a Master/Detail mode (fullScreenOptimized = false).Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_513
• Flex Box - Size AdjustmentsAutomatic size adjustments can be achieved for Flex Items with the use of Flex Item Data settings on the contained controls.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_514
• Input - AssistedAssisted input is available via suggestions - shown as you type - and a value help dialog.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_515
• Segmented Button in View Settings DialogSegmented Button used in View Settings Dialog componentRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_516
• Launch TileShows Launch Tile samples that can contain header, subheader, image content, unit, and a footer.Runs in the browserUI5 1.92+z2ui5_cl_smpc_app_517
• Object Header – Active AttributesActive Object Attributes can trigger actions, such as navigating to related content inside or outside of the current application, or displaying additional information in a popover.Runs in the browserUI5 1.97+z2ui5_cl_smpc_app_518
• MultiComboBox - Suggestions with Value StateMultiComboBox with suggestions and Value State Message containing a link.Runs in the browserUI5 1.78+z2ui5_cl_smpc_app_519
• Notification List Group with lazy loading of the notificationsNotification List Group with lazy loading of the notifications.Runs in the browserUI5 1.90+z2ui5_cl_smpc_app_520
• Input - Key and ValueThis sample illustrates how the Input works with key and value values, when the data is available via list of suggestions.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_521
• List - Loading IndicationYou can use enableBusyIndicator property to display loading animation while the data is being loaded from server. By default, this property is true and busy indicator will be shown after 1000ms.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_522
• Table - CellSelector, CopyProviderThis example demonstrates how the Table data can be copied to the clipboard via CopyProvider plugin.Runs in the browserUI5 1.119+z2ui5_cl_smpc_app_523
• List - DeletionSetting 'Delete' mode on a List means you can trigger the deletion of single items with a single press. The application has to decide if an additional confirmation is required.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_524
• List - Growing UpwardsThe Upwards GrowingRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_525
• Overflow Toolbar - layoutOverflow Toolbar can contain the same controls as Toolbar with the added benefit that buttons that do not fit are moved to an overflow area when overflow occurs.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_530
• QuickView with Different Configurations of AvatarQuickView with fallback icon, initials, display shape and other avatar properties.Runs in the browserUI5 1.92+z2ui5_cl_smpc_app_531
• QuickView with Navigation and Data BindingQuickView using navOrigin parameter when navigating.Runs in the browserUI5 1.92+z2ui5_cl_smpc_app_532
• Wizard page modeDemonstrates the usage of the renderMode property. The Wizard is displayed inside a Dialog to allow blocking of the interface without using page context. The dynamic page is used to provide a consistent and standards-compliant look.Runs in the browserUI5 1.101+z2ui5_cl_smpc_app_533
• Wizard edit modeDemonstrates the usage of the setCurrentStep association, which controlls the current step of the wizard.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_534
• Wizard branching use caseThe Wizard could be used in branching mode, where the choice of next step depends on the decision made for the current one.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_535
• simple Planning CalendarPlanningCalendar with single row selection that illustrates the built-in views.Runs in the browserUI5 1.150+z2ui5_cl_smpc_app_536
• Planning Calendar - with custom viewsPlanningCalendar with custom views to set number of hours, days and months and change view description. It illustrates both built-in and custom views. Sub-intervals are shown. Custom non-working days and hours are set.Runs in the browserUI5 1.150+z2ui5_cl_smpc_app_537
• Planning Calendar - multiple selectionPlanningCalendar with multiple row selection. No interval headers are displayed. On click on an interval a new appointment is created.Runs in the browserUI5 1.150+z2ui5_cl_smpc_app_538
• Planning Calendar - with one line appointments and multiple appointments selection optionPlanningCalendar showing appointment with only title in one line to save space. The interval headers are only shown if there are some assigned in the visible area.Runs in the browserUI5 1.97+z2ui5_cl_smpc_app_539
• Planning Calendar - with min. and max. datePlanningCalendar with min. date 2000-01-01 and max. date 2050-12-31Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_540
• Planning Calendar - with legend and option to change the first day of weekPlanningCalendar inside the main part of a sap.ui.layout.DynamicSideContent and a sap.m.PlanningCalendarLegend inside the side part. The legend includes calendar and appointments sections. For each sap.m.PlanningCalendarRow in the sap.m.Runs in the browserUI5 1.94+z2ui5_cl_smpc_app_541
• Planning Calendar - with header that remains visible (fixed on top) on scrollPlanningCalendar with header area that remains visible (fixed on top) when the rest of the content is scrolled out of view.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_542
• Planning Calendar - with appointments in different sizesPlanningCalendar showing normal, half-sized and large appointments.Runs in the browserUI5 1.81+z2ui5_cl_smpc_app_543
• Planning Calendar - week numberingDemonstrates PlanningCalendar with different week numbering (only Date Picker, 1 Week and 1 Month views are affected).Runs in the browserUI5 1.110+z2ui5_cl_smpc_app_544
• Planning Calendar - with relative viewsPlanningCalendar with relative views. The relative periods are not directly related to dates, but periods with pre-defined duration.Runs in the browserUI5 1.93+z2ui5_cl_smpc_app_545
• Planning Calendar - Drag and DropPlanningCalendar with draggable appointments. The sample represents three possible roles. If you are logged as an Admin, you can move appointments both within the same row and between different rows without any restrictions.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_546
• Planning Calendar - with appointments modificationPlanningCalendar containing sap.m.Popover with information for the appointments and sap.m.Dialog for creating a new appointment. Note: Illustrates how the PlanningCalendar can be used in combination with the sap.m.Popover and sap.m.Runs in the browserUI5 1.150+z2ui5_cl_smpc_app_547
• Planning Calendar - with Recurring Calendar ItemsPlanningCalendar with recurring calendar items.Runs in the browserUI5 1.149+z2ui5_cl_smpc_app_548
• Single Planning CalendarThis sample demonstrates most of the features available for the SinglePlanningCalendar control.Runs in the browserUI5 1.150+z2ui5_cl_smpc_app_549
• Single Planning Calendar - Week NumberingThis sample demonstrates how the SinglePlanningCalendar control can be used width different week numbering (only Week and Month views are affected)Runs in the browserUI5 1.110+z2ui5_cl_smpc_app_550
• Single Planning Calendar with Snapping Header and option to change the first day of weekSinglePlanningCalendar showing the modes for snapping the header part of the calendar.Runs in the browserUI5 1.98+z2ui5_cl_smpc_app_551
• Single Planning Calendar with Custom ViewsSinglePlanningCalendar showing the provided predefined views and custom views.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_552
• Single Planning Calendar with Legend and defined working hoursSinglePlanningCalendar and PlanningCalendarLegend controls used as main and side parts of an sap.ui.layout.DynamicSideContent control. The calendar also shows the daily working hours.Runs in the browserUI5 1.81+z2ui5_cl_smpc_app_553
• Single Planning Calendar with Zoom In and Zoom Out behaviorSinglePlanningCalendar with enabled Zoom In and Zoom Out functionality.Runs in the browserUI5 1.99+z2ui5_cl_smpc_app_554
• Single Planning Calendar with Recurring Calendar ItemsSinglePlanningCalendar with recurring calendar itemsRuns in the browserUI5 1.149+z2ui5_cl_smpc_app_555
• Date Picker Mass Editing ScenarioUsing calendar in a dialog for changing dates in mass editing scenario.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_556
• Facet Filter - Custom FiltersWith the FacetFilter you can define custom filtering criteria to be applied when searching in the FacetFilterList instead of the default filtering criteria of the control in order to assist the user in narrowing down the data in, say, a table.Runs in the browserUI5 1.76+z2ui5_cl_smpc_app_557
• Tab Container - Multi-instance handling conceptAllows detail view / edit in sap.m.TabContainer after selecting items from table.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_558
• Dialog in Custom Within AreaWithin area of sap.ui.core.Popup determines where all popups (including dialogs) are positioned and where they can be dragged.Runs in the browserUI5 1.89+z2ui5_cl_smpc_app_561
• Dialog with Custom FooterDialog with custom footer and support for message popover.Runs in the browserUI5 1.110+z2ui5_cl_smpc_app_562
• Message View inside PopoverA sample with Message View inside a Popover.Runs in the browserUI5 1.84+z2ui5_cl_smpc_app_563
• Message View inside ResponsivePopoverA sample with Message View inside a ResponsivePopover.Runs in the browserUI5 1.84+z2ui5_cl_smpc_app_564
• Popover with NavContainerYou can nest NavContainers in Popovers (and Dialogs) to navigate to further details in place.Runs in the browserUI5 1.84+z2ui5_cl_smpc_app_565
• Table - BreadcrumbWith an InfoToolbar and some crumb logic you can navigate simple hierarchies with a breadcrumb table approach.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_566
• Table - Defining Column WidthWhile defining the column width you can use percent values but you should be careful with them. Click to see some traps and tipps.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_567
• Table - ContextualWidth (Static)This example shows the container-based pop-in behavior. The container has static width.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_568
• Table - Drag and DropShows the different kinds of drag-and-drop capabilities across view boundaries along with custom context menu alternatives to perform these action.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_569
• Table - EditableTable with edit/display togglable scenario.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_570
• Table - IColumnHeaderMenuThis example demonstrates an implementation of the IColumnHeaderMenu interface with the sap.m.Menu as a breakout scenario.Runs in the browserUI5 1.110+z2ui5_cl_smpc_app_571
• Table - Fixed vs Auto LayoutYou can use fixedLayout property to define the layout algorithm to be used for the table cells, rows, and columns. When fixedLayout property is set to false, the width of the table and its cells depends on the content thereof.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_572
• Table - Merge CellsWith column duplicate merging, you can improve the display of repeated data. See the effect of mergeDuplicates on the Supplier column, space permitting. Note: This feature is ignored if a column is shown in the pop-in.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_573
• Table - MultiSelectModeThis example demonstrates the different multi-selection modes if the table is configured with MultiToggle mode and the sap.m.table.Title control.Runs in the browserUI5 1.147+z2ui5_cl_smpc_app_574
• Table - Scroll To IndexThis sample demonstrates the scroll-to-index functionality.Runs in the browserUI5 1.77+z2ui5_cl_smpc_app_575
• Table - Vertical AlignmentThis is a good example of how to vertically align different elements within a Table's ColumnListItem row template.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_576
• Tree - Drag and DropThis example shows drag-and-drop capability.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_600
• Tree - Multi Expand & CollapseThis example shows how to expand/collapse multiple nodes and demonstrates the sticky header toolbar and info toolbar options.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_601
• Tree - InitialExpand & CollapseAllThis example shows the initial expand state and how to collapse all nodes.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_602
• Tree - ODataThis example shows Tree with OData service.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_603
• Carousel with Display OptionsThe Carousel has options for the arrows placement, page indicator placement and page indicator visibility.Runs in the browserUI5 1.125+z2ui5_cl_smpc_app_604
• Header Container - Lazy LoadingThe header container with lazy loading functionality on pressing the scroll button.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_605
• Tile Modes and ScopesShows Generic Tile regular and in line mode, and you can switch between the display scope and actions scope for Generic Tiles on a web page.Runs in the browserUI5 1.120+z2ui5_cl_smpc_app_606
• Overflow Toolbar - in a table and in the footer of a pageOverflow Toolbar Button is useful for showing lists of action buttons that can display an icon in the toolbar, and icon+text when in the overflow.Runs in the browserUI5 1.109+z2ui5_cl_smpc_app_607
• Select - Two columns layoutUse the select dropdown list with two columns layout if you need to display additional information to your options, like e.g. currencies to countries or abbreviations to systems.Runs in the browserUI5 1.140+z2ui5_cl_smpc_app_608
• Single Planning Calendar - Create and Modify AppointmentsThis sample demonstrates how the SinglePlanningCalendar control can be used in combination with sap.m.Dialog to create new appointments and sap.m.ResponsivePopover to edit already existing appointments.Runs in the browserUI5 1.150+z2ui5_cl_smpc_app_609
• Single Planning Calendar with Drag and DropSinglePlanningCalendar with enabled drag and drop functionality, allowing to create appointments with dragging and dropping, to change the start and end date of appointments by selecting and dragging their top or bottom end, and to copy and...Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_610
• MultiInput Filtering and SuggestionsThe default filtering is 'starts with per term', which filters by the beginning of every word in every column.Runs in the browserUI5 1.78+z2ui5_cl_smpc_app_612
• MultiInput - Grouping of itemsItems in the MultiInput could be grouped by a propertyRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_613
• Object Header Responsive IIIThis is a responsive Object Header with a Title, number, 6 Statuses/Attributes rendered in 4 columns in a fullScreenOptimized mode (fullScreenOptimized = true).Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_614
• Object Header Responsive IVThis is a responsive Object Header with a Title, number, 6 Statuses/Attributes rendered in 3 columns in a Master/Detail mode (fullScreenOptimized = false).Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_615
• Combo box with value stateThe combo box can show different value states.Runs in the browserUI5 1.78+z2ui5_cl_smpc_app_616
• Icon Tab Bar - Background DesignIn this example the backgroundDesign and headerBackgroundDesign properties are demonstrated.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_617
• Icon Tab Bar - ProcessIn this example, the Icon Tab Bar is used to apply filters on the same content along a business process.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_618
• Icon Tab Bar - Responsive PaddingThis example demonstrates the Icon Tab Bar's support for paddings that depend on the width of its containerRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_619
• Icon Tab Bar - Tab Density ModeIn this example, the Icon Tab Bar is used in different tab density modes.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_620
• Input - Assisted Tabular SuggestionsIn this example assisted input is provided with table-like suggestions where several columns can display more details.Runs in the browserUI5 1.89+z2ui5_cl_smpc_app_621
• Input - CheckedInput checks are handled via the validation of the data binding. In this example there are two inputs that are validated (a) while the user types and (b) when the user continues the process.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_622
• Input - StatesThis example demonstrates the different input field states, e.g. disabled, editable, with value help and value help only.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_623
• AvatarThis sample demonstrates different combinations of types, shapes, and sizes of the Avatar.Runs in the browserUI5 1.117+z2ui5_cl_smpc_app_624
• Avatar with toggling of Active stateThis sample demonstrates toggling of Avatar Active state, when a User menu is opened/closed.Runs in the browserUI5 1.120+z2ui5_cl_smpc_app_625
• Avatar with Badge Icon ColorThis sample demonstrates different badge icon colors of the Avatar.Runs in the browserUI5 1.132+z2ui5_cl_smpc_app_626
• Avatar with badgeValueStateThis sample demonstrates different badge value states of the Avatar.Runs in the browserUI5 1.116+z2ui5_cl_smpc_app_627
• Avatar with Visual AffordanceThis sample demonstrates different combinations of types, shapes, and sizes of the Avatar with visual affordance.Runs in the browserUI5 1.77+z2ui5_cl_smpc_app_628
• Illustrated Message Enable Vertical ResponsivenessDemonstrates the IllustratedMessage's 'enableVerticalResponsiveness' property.Runs in the browserUI5 1.104+z2ui5_cl_smpc_app_629
• A demo application that imports a Custom Illustration Set from an npm packageShows how to import a Custom Illustration from an npm package into a UI5 application for usage with IllustratedMessage.Runs in the browserUI5 1.98+z2ui5_cl_smpc_app_630
• 'NoActivities' Illustrated Message in a CardIllustratedMessage as content of sap.f.Card. 'NoActivities' illustration type is being used for the Illustrated Message.Runs in the browserUI5 1.98+z2ui5_cl_smpc_app_631
• 'NoEmail' Illustrated Message in a CardIllustratedMessage as content of sap.f.Card. 'NoEmail' illustration type is being used for the Illustrated Message.Runs in the browserUI5 1.98+z2ui5_cl_smpc_app_632
• Illustrated Message in a DialogIllustratedMessage as content of sap.m.Dialog.Runs in the browserUI5 1.98+z2ui5_cl_smpc_app_633
• Default Illustration Set (sapIllus)The available illustrations are from the default ('sapIllus') illustration set.Runs in the browserUI5 1.104+z2ui5_cl_smpc_app_634
• Illustrated Message in a Page with Configurable Properties (Custom Illustration Set)The available properties of the IllustratedMessage are configurable in this sample. The available illustrations are from the 'custom' illustration set.Runs in the browserUI5 1.98+z2ui5_cl_smpc_app_635
• Illustrated Message in a Page with Configurable Properties (TNT Illustration Set)The available properties of the IllustratedMessage are configurable in this sample. The available illustrations are from the 'tnt' illustration set.Runs in the browserUI5 1.98+z2ui5_cl_smpc_app_636
• Illustrative style illustrations using the 'src' propertyThe available illustrations are from the default illustration set with the use of the 'src' property.Runs in the browserUI5 1.132+z2ui5_cl_smpc_app_637
• Illustrated Message Session TimeoutAll applications that require user sign-in should employ a mechanism for automating user sign-out. When the inactivity is about to reach that threshold, a session timeout dialog appears automatically to inform the user.Runs in the browserUI5 1.98+z2ui5_cl_smpc_app_638
• Dynamic Date RangeThe dynamic date range is a control that offers a choice of absolute and relative dates, using different offset from the current date. The list of values offered must be defined by the application.Runs in the browserUI5 1.92+z2ui5_cl_smpc_app_639
• Dynamic Date Range with calendarWeekNumberingThis example shows the Dynamic Date Range control with Middle Eastern calendar week numbering.Runs in the browserUI5 1.111+z2ui5_cl_smpc_app_640
• Dynamic Date Range - Open by Another ControlThis example shows Dynamic Date Range which is opened by another control.Runs in the browserUI5 1.105+z2ui5_cl_smpc_app_641
• Dynamic Date Range with Custom OptionsThis example shows the Dynamic Date Range control with custom options for interval or date selection.Runs in the browserUI5 1.92+z2ui5_cl_smpc_app_642
• Expandable TextThe ExpandableText control can be used to display a larger texts inside a table, list or form.Runs in the browserUI5 1.87+z2ui5_cl_smpc_app_643
• p13n.Container usage in a Dialog/PopoverDialog & Popover with a sap.m.P13nContainer as content.Runs in the browserUI5 1.96+z2ui5_cl_smpc_app_644
• Personalization for responsive tableResponsive Table using the personalization EngineRuns in the browserUI5 1.110+z2ui5_cl_smpc_app_645
• Personalization implementing custom filter controlsFiltering using the personalization EngineRuns in the browserUI5 1.110+z2ui5_cl_smpc_app_646
• Personalization for grid listGridList using the personalization EngineRuns in the browserUI5 1.97+z2ui5_cl_smpc_app_647
• Personalization for grid tableGrid Table using the personalization EngineRuns in the browserUI5 1.119+z2ui5_cl_smpc_app_648
• Personalization with multiple SelectionControllersPersonalization for Reponsive Table using multiple SelectionControllersRuns in the browserUI5 1.110+z2ui5_cl_smpc_app_649
• p13n.Popup usageDialog with sap.m.p13n/* PanelsRuns in the browserUI5 1.97+z2ui5_cl_smpc_app_650
• VariantManagement using dedicated itemsVariantManagement with dedicated itemsRuns in the browserUI5 1.103+z2ui5_cl_smpc_app_651
• Plugin for Responsive Table (sap.m.Table) - File Name validation configurationThis example demonstrates the usage of fileNameValidationConfig property to configure file name validation for renaming a file.Runs in the browserUI5 1.136+z2ui5_cl_smpc_app_652
• Plugin for Responsive Table (sap.m.Table) - File Preview with Custom Page Content for non supported file typesThis example showcases how to display custom page content for non supported file types in the FilePreviewDialog control.Runs in the browserUI5 1.125+z2ui5_cl_smpc_app_653
• Plugin for Grid Table (sap.ui.table.Table)This example demonstrates the usage of UploadSetwithTable plugin for grid table with the features of upload, download, drag & drop, remove and rename of files. It also demonstrates how the uploaded files can be displayed in a table.Runs in the browserUI5 1.125+z2ui5_cl_smpc_app_654
• Plugin for Responsive Table (sap.m.Table) - Multiple plugin instances with multiple tablesThis example demonstrates the usage of multiple plugin instances with multiple tables. The plugin instances are created for each table and the uploaded files are displayed in their respective tables.Runs in the browserUI5 1.125+z2ui5_cl_smpc_app_655
• Plugin for Responsive Table (sap.m.Table) - File upload with user dialogsThis example demonstrates usage of itemValidationHandler callback to leverage additional validations and configurations for the items that are to be uploaded, and also the manual trigger of the upload process.Runs in the browserUI5 1.125+z2ui5_cl_smpc_app_656
• Plugin for Responsive Table (sap.m.Table) - File PreviewThis example showcases how uploaded files can be previewed with FilePreviewDialog control and its related configuration. UploadSetwithTable plugin creates and uses default instance of FilePreviewDialog, if not defined.Runs in the browserUI5 1.125+z2ui5_cl_smpc_app_657
• Plugin for Responsive Table (sap.m.Table) - Upload Progress and Upload TerminationThis example demonstrates the progress or termination of the items that are being uploaded. The upload progress is displayed for each item that is being uploaded. The users can terminate the upload process at any time.Runs in the browserUI5 1.125+z2ui5_cl_smpc_app_658
• Plugin for Responsive Table (sap.m.Table)This example demonstrates the usage of UploadSetwithTable plugin for responsive table with the features of upload, download, drag & drop, remove and rename of files. It also demonstrates how the uploaded files can be displayed in a table.Runs in the browserUI5 1.142+z2ui5_cl_smpc_app_659
• Plugin for Tree Table (sap.ui.table.TreeTable)This example demonstrates the usage of UploadSetwithTable plugin for tree table with the features of upload, download, drag & drop, remove and rename of files. It also demonstrates how the uploaded files can be displayed in a table.Runs in the browserUI5 1.139+z2ui5_cl_smpc_app_660
• Plugin for Tree Table with folder hierarchy & folder uploadsThis example demonstrates the usage of UploadSetwithTable plugin with a tree table featuring folder hierarchy, folder creation, folder uploads, folder navigation with breadcrumbs and folder managementRuns in the browserUI5 1.139+z2ui5_cl_smpc_app_661
• Manage ProductsCreated with the 'Worklist App' tutorial. - the UI5 demo app "Manage Products", rebuilt as one self-contained abap2UI5 class.Runs in the browserUI5 1.71+z2ui5_cl_smpc_demo_001
• Browse OrdersMaster-detail app for browsing orders. - the UI5 demo app "Browse Orders", rebuilt as one self-contained abap2UI5 class.Runs in the browserUI5 1.71+z2ui5_cl_smpc_demo_002
• Team CalendarCalendar demo app for team and team members. - the UI5 demo app "Team Calendar", rebuilt as one self-contained abap2UI5 class.Runs in the browserUI5 1.71+z2ui5_cl_smpc_demo_003
• Shopping CartThe classic business process of finding and ordering products. - the UI5 demo app "Shopping Cart", rebuilt as one self-contained abap2UI5 class.Runs in the browserUI5 1.71+z2ui5_cl_smpc_demo_004
• Bulletin BoardWorklist app created with the 'Testing' tutorial. - the UI5 demo app "Bulletin Board", rebuilt as one self-contained abap2UI5 class.Runs in the browserUI5 1.71+z2ui5_cl_smpc_demo_005

sap.ndc

• sap.ndc - BarcodeScannerButtonsap.ndc.BarcodeScannerButton expressed in abap2UI5 - a SAPUI5-only control, so the demo kit original is outside OpenUI5 and this is orientation rather than a 1:1 port.UI5 1.71+z2ui5_cl_smpc_sapui5_011

sap.suite.ui.commons

• sap.suite.ui.commons - ProcessFlowsap.suite.ui.commons.ProcessFlow expressed in abap2UI5 - a SAPUI5-only control, so the demo kit original is outside OpenUI5 and this is orientation rather than a 1:1 port.UI5 1.71+z2ui5_cl_smpc_sapui5_006
• sap.suite.ui.commons - Timelinesap.suite.ui.commons.Timeline expressed in abap2UI5 - a SAPUI5-only control, so the demo kit original is outside OpenUI5 and this is orientation rather than a 1:1 port.UI5 1.71+z2ui5_cl_smpc_sapui5_007
• sap.suite.ui.commons - networkgraph.Graphsap.suite.ui.commons.networkgraph.Graph expressed in abap2UI5 - a SAPUI5-only control, so the demo kit original is outside OpenUI5 and this is orientation rather than a 1:1 port.UI5 1.92+z2ui5_cl_smpc_sapui5_008
• sap.suite.ui.commons - statusindicator.StatusIndicatorsap.suite.ui.commons.statusindicator.StatusIndicator expressed in abap2UI5 - a SAPUI5-only control, so the demo kit original is outside OpenUI5 and this is orientation rather than a 1:1 port.UI5 1.71+z2ui5_cl_smpc_sapui5_009

sap.suite.ui.microchart

• sap.suite.ui.microchart - InteractiveDonutChartsap.suite.ui.microchart.InteractiveDonutChart expressed in abap2UI5 - a SAPUI5-only control, so the demo kit original is outside OpenUI5 and this is orientation rather than a 1:1 port.UI5 1.71+z2ui5_cl_smpc_sapui5_001
• sap.suite.ui.microchart - InteractiveLineChartsap.suite.ui.microchart.InteractiveLineChart expressed in abap2UI5 - a SAPUI5-only control, so the demo kit original is outside OpenUI5 and this is orientation rather than a 1:1 port.UI5 1.71+z2ui5_cl_smpc_sapui5_002
• sap.suite.ui.microchart - InteractiveBarChartsap.suite.ui.microchart.InteractiveBarChart expressed in abap2UI5 - a SAPUI5-only control, so the demo kit original is outside OpenUI5 and this is orientation rather than a 1:1 port.UI5 1.71+z2ui5_cl_smpc_sapui5_003
• sap.suite.ui.microchart - RadialMicroChartsap.suite.ui.microchart.RadialMicroChart expressed in abap2UI5 - a SAPUI5-only control, so the demo kit original is outside OpenUI5 and this is orientation rather than a 1:1 port.UI5 1.71+z2ui5_cl_smpc_sapui5_004
• sap.suite.ui.microchart - HarveyBallMicroChartsap.suite.ui.microchart.HarveyBallMicroChart expressed in abap2UI5 - a SAPUI5-only control, so the demo kit original is outside OpenUI5 and this is orientation rather than a 1:1 port.UI5 1.71+z2ui5_cl_smpc_sapui5_005

sap.tnt

• InfoLabelInfoLabel with all available color schemesRuns in the browserUI5 1.74+z2ui5_cl_smpc_app_113
• Navigation ListNavigation List in a PageRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_123
• Side NavigationSideNavigation in container with fixed width.Runs in the browserUI5 1.121+z2ui5_cl_smpc_app_128
• Side Navigation - TagsSideNavigation with tags for status indicators and metadata.Runs in the browserUI5 1.149+z2ui5_cl_smpc_app_132
• ToolHeaderToolHeader that mimics the content of the Shell.Runs in the browserUI5 1.96+z2ui5_cl_smpc_app_134
• InfoLabel in DynamicPageInfoLabel used as subheader in DynamicPageRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_143
• Tool Page with Vertical NavigationA tool page layout with vertical navigationRuns in the browserUI5 1.133+z2ui5_cl_smpc_app_167
• Side Navigation - Unselectable Parent ItemsSideNavigation with unselectable parent items.Runs in the browserUI5 1.116+z2ui5_cl_smpc_app_172
• InfoLabel in TableInfoLabel used in content of TableRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_192
• ToolHeader with IconTabHeaderToolHeader can contain IconTabHeader. When both controls are combined, the IconTabHeader supports only inline text. No icons can be used.Runs in the browserUI5 1.121+z2ui5_cl_smpc_app_221
• Side Navigation - Press EventSideNavigation with press event parameters and preventDefault.Runs in the browserUI5 1.137+z2ui5_cl_smpc_app_241
• Side Navigation - ActionsSideNavigation with a quick create action button.Runs in the browserUI5 1.133+z2ui5_cl_smpc_app_299
• Side Navigation - Wrapping of long textsSideNavigation with long texts that wrap.Runs in the browserUI5 1.133+z2ui5_cl_smpc_app_300
• Side Navigation - Overlay ModeSideNavigation in a responsive popover.Runs in the browserUI5 1.134+z2ui5_cl_smpc_app_301
• Tool Page Horizontal and Vertical NavigationA tool page layout with horizontal navigation (on desktop and tablet) and vertical navigation (on phone)Runs in the browserUI5 1.121+z2ui5_cl_smpc_app_302
• Tool Page with Horizontal NavigationA tool page layout with horizontal navigationRuns in the browserUI5 1.121+z2ui5_cl_smpc_app_303
• Side Navigation with SearchSideNavigation with a search field in the filter section and filterable navigation items.Runs in the browserUI5 1.151+z2ui5_cl_smpc_app_407

sap.ui.codeeditor

• Code EditorDisplay or edit source code with syntax highlighting for various source types.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_114
• Code Editor with IconTabHeaderExample how to use CodeEditor with IconTabHeader to create a tab-based experience.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_150

sap.ui.core

• No Container Content PaddingMany UI5 containers support the standard container content padding CSS classes. Apply the CSS class 'sapUiNoContentPadding' on a UI5 container control to remove the default padding around the container content area.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_087
• Margins All AroundUse standard margin classes 'sapUiTinyMargin', 'sapUiSmallMargin', 'sapUiMediumMargin' or 'sapUiLargeMargin' to add a 8px (0.5rem), 16px (1rem), 32px (2rem) or 48px (3rem) margin to your control.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_088
• HTMLWith the HTML controls you can easily embed any kind of HTML content into your UI5 mobile application.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_120
• IconBuilt with an embedded font, icons scale well, and can be altered with CSS. They can also fire a press event. See the Icon Explorer for more icons.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_122
• InvisibleTextMany controls provide the associations ariaLabelledBy and ariaDescribedBy for accessibility purposes. The InvisibleText control can be used by application to provide hidden texts on the UI which can be referenced via these associations.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_127
• Integer FormatFormats and parses only the integer digits. The decimal digits are ignored.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_129
• Control Busy IndicatorA control's busy indicator can be used to block parts of the screen until an operation has finished. In this example we block the content of only one out of two panels.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_130
• Basic Theme ParametersSample provides a link to the Theme Parameter Toolbox. There you can easily search, preview, and filter semantic theme parameters.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_131
• Currency FormatFormats the number by using the parameters defined for the given currency code. Either currency symbol, currency code or none of them can be included in the final formatted string.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_135
• InvisibleMessageThe InvisibleMessage provides a way to programmaticaly expose dynamic content changes in a way that can be announced by screen readers.Runs in the browserUI5 1.78+z2ui5_cl_smpc_app_141
• Hyphenation APIThis sample demonstrates usage of the Hyphenation APIRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_146
• Busy IndicatorA busy indicator can be used to block the entire screen until an operation has finished.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_147
• Float FormatFormats and parses both integer and decimal digits.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_179
• FileSize TypeThis sample explains the formatting options of the FileSize type.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_180
• Date Type - Source As StringThis sample explains the formatting options of the Date type with the date being available as string.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_181
• Time TypeThis sample explains the formatting options of the Time type.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_182
• DateTime TypeThis sample explains the formatting options of the DateTime type.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_183
• CommandsThis example demonstrates how to define shortcuts using commands in your applicationRuns in the browserUI5 1.84+z2ui5_cl_smpc_app_232
• Bound Filters - Filter BarThis sample shows how bound filters work in a filter bar. As the user enters values, a toolbar with filter inputs instantly filters the customer table. It also demonstrates how to use the filter API to change the bound filters programmatically.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_264
• Bound Filters - Filtered List in TableThis sample shows how bound filters work. It features a table of customers with a 'Select' control in each row. The 'Select' control uses the customer's region to filter the list of available account managers.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_265
• Field GroupsA control's field group id can be used to define a virtual group of fields that should be validated together.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_272
• Date Type - Source As DateThis sample explains the formatting options of the Date type with the date being available as date object.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_282
• Theme-independent CSS-classesSample display of 'sapTheme'-prefixed CSS classes for theme-independent styling of custom HTML/Controls. The set displayed is to be used to style static HTML elements.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_283
• Negative MarginsUse standard negative margin classes 'sapUiTinyNegativeMarginBeginEnd', 'sapUiSmallNegativeMarginBeginEnd', 'sapUiMediumNegativeMarginBeginEnd' or 'sapUiLargeNegativeMarginBeginEnd' to remove 0.5rem, 1rem, 2rem, or 3rem margin to the left...Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_403
• Single-Sided MarginsClear the space to the left, right, top or bottom of your control.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_430
• Responsive Container Content PaddingApply the CSS class 'sapUiResponsiveContentPadding' on a UI5 container control to add a responsive padding based on the screen size around the container content area.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_431
• Container Content Padding and MarginsBy combining the margin and padding concepts you can flexibly design your application layout without having to write any custom CSS.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_433
• Container Content PaddingApply the CSS class 'sapUiContentPadding' on a UI5 container control to add a default padding of 1rem (16px) around the container content area.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_434
• Two-Sided MarginsClear the space to the left and right, top and bottom of your control.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_464
• Collapsing MarginsSee how adjacent margins collapse to a single margin.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_469
• Responsive MarginsClear the space around your control, where the margin depends on the device your are using.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_472
• Enforce Width 'auto'Some controls (for example the IconTabBar) do not have a 'width' property but still have a default width of 100%. We provide css class 'sapUiForceWidthAuto' to overwrite the control's width in such a case.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_484
• Remove MarginsUse our standard 'No-Margins' classes to remove existing margins from your control. You can either remove all margins at once or remove the margin on one or more sides.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_500

sap.ui.integration

• Home page with cardsDifferent types of cards types arranged in a sap.f.GridContainer.Runs in the browserUI5 1.128+z2ui5_cl_smpc_app_118
• Card ExplorerCard Explorer is the application where you can learn more about integration cards.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_149
• Home page with cards loadingDifferent types of cards types and their loading placeholderRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_341
• Lazy loading of cards on home pagedataMode:'Auto' activates lazy loading behavior of an integration cardRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_342

sap.ui.layout

• Fix Flex - Vertical DirectionShows a FixFlex control with a vertical layout.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_119
• CSSGridCSSGrid example for page layout.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_124
• Splitter Layout - 2 areasSimple splitter example with two content areasRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_125
• Dynamic Side ContentAttaches side content area which is next to the main content of the page on larger screens taking different ratios between the two on different screen sizes and on phone size screens the side content area falls down under the main content area.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_138
• Block Layout with custom background color set for the cellsBlock Layout in which all cells use the same background color set and different color shade.Runs in the browserUI5 1.98+z2ui5_cl_smpc_app_140
• Fullscreen – with toolbarA form that uses Toolbars as Form header and FormContainer headers.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_142
• Controlling Empty Spaces Within the GridExample of setting the gridAutoFlow property.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_145
• Horizontal LayoutThe Horizontal Layout control is a simple way to align multiple controls horizontally. By default the contained controls are not wrapped. If you want more sophisticated layout options, consider Grid or Flex Box based layouts.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_162
• Grid - Using GridDataTake advantage of sap.ui.layout.GridData to control the appearance of individual Grid children.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_169
• Vertical LayoutThe Vertical Layout control is a simple way to align multiple controls vertically. If you want more sophisticated layout options, consider Grid or Flex Box based layouts.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_173
• Fullscreen – with toolbarA SimpleForm that uses Toolbars as Form header and FormContainer headers.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_175
• Responsive SplitterResponsiveSplitter is used to visually divide the content of its parent. It consists of PaneContainers that further agregate other PaneContainers and SplitPanes.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_186
• Grid - Info LayoutYou can use the Grid control to make responsive table-free layouts; here we are using a default indent and span, and specifying the Small settings such that the image and text will stack on a small display.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_194
• Block LayoutThe BlockLayout is intended to be used with rows and cells. The cells have predefined width, the rows have predefined rendering modes - scrollable/vertical/horizontal.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_214
• Fix Flex - Vertical Direction with minFlexSizeShows a FixFlex control where the minFlexSize is set to 400px.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_215
• Fix Flex - Horizontal DirectionShows a FixFlex control with a horizontal layout.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_219
• Block Layout with links as titlesThe BlockLayout Cells can have links as titles. The link text overwrites the title text.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_223
• Grid - Features DemoThe major layout features of the Grid control are shown in this example. Features like indentation, making content visible/invisible based on the screen size, moving content forward and backwards are demonstrated.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_226
• Nested Splitter Layouts - 7 AreasNested Splitter example with 7 content areasRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_266
• Dynamic Side Content - equal split modeThe side content and the main content take 50%/50% of the container on all screen sizes except on phone screens where there is a button implemented to toggle between each other.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_267
• Dynamic Side Content - product pageProduct page with comments example.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_269
• Nested ExampleCSSGrid example nested grids.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_270
• ResponsivenessExample of setting customLayout for different layout (screen) sizes.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_271
• Fullscreen – one groupForm with one single group in a fullscreen app with a label field ratio of 3:5:4 in all sizes besides size S (12:12:0).Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_312
• Fullscreen – one group with long labelsForm with one single group in a fullscreen app for long labels and fields, so some more space is available on medium screens (4:7:0).Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_313
• Fullscreen – two groups (horizontal)Form with two groups with long labels and fields in a fullscreen app.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_314
• Splitscreen – one groupForm with one single group in a split app with a label field ratio of 4:7:1 in all sizes besides size S (12:12:0).Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_315
• Fullscreen – address form with edit switchA fullscreen address form with Edit / Save / Cancel in the page header, switching between a display and a change fragment; ResponsiveGridLayout arranges the columns.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_316
• Fullscreen – two groups (vertical)Form with two groups. On large screens a two-column layout (4:8:0) is used; on medium screens a one-column layout (12:12:0); on small screens also a one-column layout (12:12:0).Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_317
• Fullscreen – two columns of size MForm with two groups, gets a two-column layout whenever possible.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_318
• Fullscreen – three groups (horizontal)Form with three groups in a three-column layout. On extra large screens a three-column layout (4:8:0) is used; on large and medium screens a two-column layout (4:8:0); on small screens a one-column layout (12:12:0).Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_319
• Fullscreen – one group using ColumnLayoutForm with one single group in a fullscreen app using the ColumnLayout control with default settings as layout.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_320
• Fullscreen – one group using ColumnLayout with up to 4 columnsForm with one large single group in a fullscreen app (with 2 columns in M, 3 columns in L, and 4 columns in XL size).Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_321
• Fullscreen – three groups using ColumnLayout with up to 4 columnsForm with three groups in a fullscreen app (with 2 columns in M, 3 columns in L, and 4 columns in XL size).Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_322
• Fullscreen – three groups using ColumnLayout with up to 6 columnsForm with three groups in a fullscreen app (with 3 columns in M, 4 columns in L, and 6 columns in XL size).Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_323
• Fullscreen – two groups using ColumnLayout with up to 4 columnsForm with two groups in a fullscreen app (with 2 columns in M, 3 columns in L, and 4 columns in XL size).Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_324
• Fullscreen – one groupForm with one single group in a fullscreen app with a label field ratio of 3:5:4 in all sizes besides size S (12:12:0).Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_325
• Fullscreen – one group with long labelsForm with one single group in a fullscreen app for long labels and fields, so some more space is available on medium screens (4:7:0).Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_326
• Fullscreen – two groups (horizontal)Form with two groups with long labels and fields in a fullscreen app.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_327
• Splitscreen – one groupForm with one single group in a split app with a label field ratio of 4:7:1 in all sizes besides size S (12:12:0).Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_328
• Fullscreen – address form with edit switchThe same fullscreen address form built with SimpleForm: Edit / Save / Cancel in the page header switch it between display and change mode.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_329
• Fullscreen – two groups (vertical)Form with two groups. On large screens a two-column layout (4:8:0) is used; on medium screens a one-column layout (12:12:0); on small screens also a one-column layout (12:12:0).Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_330
• Fullscreen – two columns of size MForm with two groups, gets a two-column layout whenever possible.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_331
• Fullscreen – three groups (horizontal)Form with three groups in a three-column layout. On extra large screens a three-column layout (4:8:0) is used; on large and medium screens a two-column layout (4:8:0); on small screens a one-column layout (12:12:0).Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_332
• Fullscreen – one group using ColumnLayoutForm with one single group in a fullscreen app using the ColumnLayout control with default settings as layout.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_333
• Fullscreen – one group using ColumnLayout with up to 4 columnsForm with one large single group in a fullscreen app (with 2 columns in M, 3 columns in L, and 4 columns in XL size).Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_334
• Fullscreen – three groups using ColumnLayout with up to 4 columnsForm with three groups in a fullscreen app (with 2 columns in M, 3 columns in L, and 4 columns in XL size).Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_335
• Fullscreen – three groups using ColumnLayout with up to 6 columnsForm with three groups in a fullscreen app (with 3 columns in M, 4 columns in L, and 6 columns in XL size).Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_336
• Fullscreen – two groups using ColumnLayout with up to 4 columnsForm with two groups in a fullscreen app (with 2 columns in M, 3 columns in L, and 4 columns in XL size).Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_337
• Fix Flex - Fix container sizeShows a FixFlex control where fixContentSize is set to a specific value(200px) and sap.m.scrollContainer is enabling vertical scrolling.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_338
• Splitter Layout - 2 non-resizable areasSimple splitter example with two content areas that cannot be resizedRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_339
• Splitter Layout - 3 areasSimple splitter example with three content areasRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_340
• Block Layout with custom background color set per cellBlock Layout in which all cells use different background color set and different shade.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_343
• Dynamic Side Content - positionThe side content is positioned on the left side of the main content in left-to-right mode and on the right side of the main content in right-to-left mode.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_344
• Grid - Own propertiesYou can see how the different properties of the sap.ui.layout.Grid affect it's final appearance.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_345
• Automatic Sizing for Additional Rows and ColumnsExample of setting gridAutoRows and gridAutoColumns properties.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_346
• Grid Gap and Layout DataExample of setting the gridGap property and using of Layout Data.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_347
• Responsive Column LayoutExample of using ResponsiveColumnLayout.Runs in the browserUI5 1.72+z2ui5_cl_smpc_app_348
• Configuring Rows and ColumnsExample of setting gridTemplateRows and gridTemplateColumns properties.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_349
• Product Home LayoutExample of using several grids nested in one main grid with ResponsiveColumnLayout, in order to achieve responsive home page design.Runs in the browserUI5 1.73+z2ui5_cl_smpc_app_350
• Splitter LayoutSplitter where you can change contentAreas and their sizes liveRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_351

sap.ui.table

• BasicBasic example showing most controls which are intended to be used inside a table.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_115
• Multi HeaderExample for multi-header of tableRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_137
• Row ModesExample for the different row modesRuns in the browserUI5 1.119+z2ui5_cl_smpc_app_164
• Row HighlightsShows how row highlights and alternating row colors can be used.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_174
• Column ResizingExample for column resizingRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_247
• JSONTreeBindingBasic example showing how a TreeTable can be built using a JSONModelRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_248
• AggregationsExample which shows the different aggregations of the tableRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_352
• Drag and DropShows various drag-and-drop capabilities along with custom context menu alternatives for each action.Runs in the browserUI5 1.121+z2ui5_cl_smpc_app_353
• FilteringExample showing the different facets of filtering within a tableRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_354
• Table related MenusExample which focuses the handling of the table related MenusRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_355
• MultiSelectionPluginExample showing the behavior of MultiSelectionPluginRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_356
• ODataOData related exampleRuns in the browserUI5 1.128+z2ui5_cl_smpc_app_357
• OData MetadataShows an example how an OData metadata driven table creation can look like.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_358
• Row ActionsShows how row actions can be used.Runs in the browserUI5 1.72+z2ui5_cl_smpc_app_359
• Cell Selection, Copy & PasteShows cell selection, copy and paste interaction in the table.Runs in the browserUI5 1.119+z2ui5_cl_smpc_app_360
• SelectionSelection example showing selection modes and selection behaviors of table.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_361
• SortingExample showing the different kinds of sorting capabilitiesRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_362
• Table FreezeExample which shows table freeze with fixed columnsRuns in the browserUI5 1.119+z2ui5_cl_smpc_app_363
• Basic OData TreeBindingIllustrates how to bind to data from an OData model without using $metadata annotations or navigation properties. Instead, treeAnnotationProperties is filled for the TreeBinding.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_364
• Hierarchy Maintenance with a JSONModelShows how hierarchy maintenance can be done using drag and drop.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_365
• OData Annotations TreeBindingIllustrates how to bind to data from an OData model using $metadata annotations.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_366

sap.ui.unified

• Color Picker - displayMode: SimplifiedBasic example of Color Picker. Note that you have to set the Color Picker mode to HSL to take advantage of the responsiveness of the control on a mobile device.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_112
• BasicBasic File Uploader ExampleRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_126
• Single Day SelectionCalendar where the user can select a single dayRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_139
• calendar typeislamic Calendar with secondary gregorian typeRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_151
• Currency in TableDisplay Currencies in TableRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_171
• simple exampleCalendarDateInterval with 14 days and single day selectionRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_177
• CurrencyDisplay Currencies with proper AlignmentRuns in the browserUI5 1.120+z2ui5_cl_smpc_app_196
• calendar - min., max., disabled and show/hide week numbersCalendar with minimum date 2000-01-01 and maximum date 2050-12-31, some disabled days (in January 2016) and ability to show or hide week numbers.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_220
• Item EventingMenu with Item EventingRuns in the browserUI5 1.84+z2ui5_cl_smpc_app_227
• Menu EventingMenu with Menu EventingRuns in the browserUI5 1.84+z2ui5_cl_smpc_app_228
• Calendar with navigatable legendAn example of adding navigatable legend to the calendar.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_240
• ComplexFile Uploader Example with ParametersRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_246
• Color Picker PopoverExample of ColorPicker in a popover using the thin wrapper control sap.ui.unified.ColorPickerPopover.Runs in the browserUI5 1.85+z2ui5_cl_smpc_app_268
• multiple monthsCalendar with more than one monthRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_304
• Date deselection with shortcut for todayAn example of recommended implementation of deselection logic when the calendar is in single selection mode.Runs in the browserUI5 1.95+z2ui5_cl_smpc_app_305
• Single Interval SelectionCalendar where the user can select an interval or entire week (either by selecting its week number or by using SHIFT + Space).Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_306
• Multiple Day SelectionCalendar where the user can select multiple days, entire weeks (either by selecting its week number or by using SHIFT + Space) and ranges (using SHIFT + ENTER/Left mouse click).Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_307
• Special Days with LegendCalendar with special days and legendRuns in the browserUI5 1.81+z2ui5_cl_smpc_app_308
• Color Picker - displayMode: DefaultBasic example of Color Picker. Note that you have to set the Color Picker mode to HSL to take advantage of the responsiveness of the control on a mobile device.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_309
• Color Picker - displayMode: LargeBasic example of Color Picker. Note that you have to set the Color Picker mode to HSL to take advantage of the responsiveness of the control on a mobile device.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_310
• Menu with Selectable ItemsSome menu items can be added to groups to allow single or multiple item selection.Runs in the browserUI5 1.127+z2ui5_cl_smpc_app_311
• Calendar with aria-haspopup on special day cellsCalendar demonstrating configurable aria-haspopup attribute on individual day cells via DateTypeRange and a global Calendar-level fallback.Runs in the browserUI5 1.152+z2ui5_cl_smpc_app_611

sap.ui.vbm

• sap.ui.vbm - AnalyticMapsap.ui.vbm.AnalyticMap expressed in abap2UI5 - a SAPUI5-only control, so the demo kit original is outside OpenUI5 and this is orientation rather than a 1:1 port.UI5 1.71+z2ui5_cl_smpc_sapui5_010

sap.uxap

• Subsection with Expand/CollapseThis example shows subsections in expanded and collapsed mode.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_116
• Single View sampleUse of implicit static view definition.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_161
• Subsection with Action buttons sampleExample of a subsection displaying action buttons.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_178
• Object Page Layout Section sampleThis example explains the rules for the rendering of sectionsRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_184
• Navigation to Section sampleThis example shows how to change the default behavior in order to be able to navigate to sections instead of subsections, using the Anchor BarRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_187
• Object Page Header Content PrioritiesThe sample shows how to set priorities of the ObjectPageHeader content items by using the ObjectPageHeaderContentLayoutData elementRuns in the browserUI5 1.73+z2ui5_cl_smpc_app_188
• ObjectPage with Hidden Section TitlesObjectPage sample that demonstrates the combination of header facets and showTitle properties of sections and subsections.Runs in the browserUI5 1.77+z2ui5_cl_smpc_app_200
• ObjectPageHeaderContentThis is an example of an ObjectPageHeaderContent.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_216
• Standard Fiori ObjectPageHeaderThis is an example of an ObjectPageHeader containing mainly KPIs.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_217
• Bound Model MappingUse of dynamic bound model mappingRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_230
• Object Page with ObjectPageHeaderActionButtonsThis example demonstrates ObjectPage with ObjectPageHeaderActionButtons and a GenericTag in the header.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_239
• Subsection with hidden titleExample of a subsection with showTitle property set to false.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_245
• Object Page with Translucent backgroundDesignThis example demonstrates ObjectPage with ObjectPageDynamicHeaderTitle with Solid backgroundDesign and Translucent backgroundDesignAnchorBar.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_258
• Object Page Header with Progress Indicator and Rating IndicatorObjectPage sample with header content arranged using containers, called facets, ProgressIndicator and RatingIndicator.Runs in the browserUI5 1.73+z2ui5_cl_smpc_app_259
• ObjectPage with HeaderContent always shown on desktopThis is an example of an ObjectPage with property alwaysShowContentHeader set to true. In this case the HeaderContent won't snap on a desktop.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_260
• Object Page with Title on the leftObject Page sample showing a layout with subsection titles on the left.Runs in the browserUI5 1.73+z2ui5_cl_smpc_app_261
• Object Page with Responsive AvatarObjectPage sample demonstrating the breakpointChange event to adjust Avatar sizes responsively based on screen size (phone: M, tablet: L, desktop/desktop_XL: XL).Runs in the browserUI5 1.147+z2ui5_cl_smpc_app_262
• Object Page reseting the selected section to the first visible sectionObject Page sample showing how to ensure the page is always scrolled to the top on any subsequent navigation to the page, regardless of its previously selected section in the preceding navigation.Runs in the browserUI5 1.73+z2ui5_cl_smpc_app_263
• Subsection with transparent backgroundThis example uses the 'sapUxAPObjectPageSubSectionTransparentBackground' CSS class to set transparent background.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_293
• Object Page with Title on topObject Page sample showing a layout with subsection titles on top. This is the default layout. The sample also shows the 'Edit header' button in the Header Content area.Runs in the browserUI5 1.106+z2ui5_cl_smpc_app_401
• Object Page with Header ContainerObjectPage sample with Header ContainerRuns in the browserUI5 1.73+z2ui5_cl_smpc_app_402
• ObjectPage BlockbaseThis example shows the different layout of the blocks based on their ColumnLayout.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_408
• Block in a blockUses a block in a view of another blockRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_409
• Eventing blocksUses of a block that is firing a dummy eventRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_410
• Model MappingUse of dynamic model mappingRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_411
• Object Page Header with Links, Rating Indicator, and Object StatusObjectPage sample with header content arranged using containers, called facets, Links, RatingIndicator and ObjectStatus.Runs in the browserUI5 1.92+z2ui5_cl_smpc_app_412
• ObjectPageHeader with placeholderThis is an example of ObjectPageHeader using the showPlaceholder property.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_413
• ObjectPageHeader optionsThis is a different example of ObjectPageHeader hiding the headerTitle area entirely until user scrolls down.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_414
• ObjectPageHeader with all controlsThis is an example of an ObjectPageHeader containing all possible controls in it.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_415
• ObjectPage as a child pageThis is an example of an ObjectPage Child page.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_416
• ObjectPage with DynamicSideContent ButtonThe sample shows Object Page inside a main content of DynamicSideContent. The ObjectPageHeader has property DynamicSideContentButton set to true which is used to show the side panel of DynamicSideContent.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_417
• Object Page AnchorBarAnchorBar has a different behavior based on the deviceRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_586
• Object Page AnchorBar with numbersThis example shows how to visualize numbers in parenthesis after the corresponding section titles in the AnchorBarRuns in the browserUI5 1.73+z2ui5_cl_smpc_app_587
• Object Page demonstrating beforeNavigate eventObject Page demonstrating how beforeNavigate event can be used to prevent default navigation behaviourRuns in the browserUI5 1.118+z2ui5_cl_smpc_app_588
• Object Page with blocks of different view typesObjectPage sample with blocks that use different view typesRuns in the browserUI5 1.127+z2ui5_cl_smpc_app_589
• ObjectPage with first editable inputObject Page that focuses its first editable input in the currently selected section.Runs in the browserUI5 1.73+z2ui5_cl_smpc_app_590
• ObjectPage with formsObject Page automatically adjusts form layout to match block column layoutRuns in the browserUI5 1.73+z2ui5_cl_smpc_app_591
• Object Page with LazyLoading without blocksThis sample showcases the lazy loading using the stashed property of the ObjectPageLazyLoader. It enables usage of lazy loading without the need to have BlocksRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_592
• Object Page with LazyLoadingObject Page with LazyLoadingRuns in the browserUI5 1.93+z2ui5_cl_smpc_app_593
• Object Page with predefined selected section in Tab navigation modeObject Page sample showing a layout where the selected section is defined by the user.Runs in the browserUI5 1.73+z2ui5_cl_smpc_app_594
• Object Page StateThis example shows how the page can be accessed directly to a specific vertical position, with "See More" enabledRuns in the browserUI5 1.119+z2ui5_cl_smpc_app_595
• Object Page using the Tab navigation modeObject Page sample showing a layout where the navigation is Tab based (one Tab per section) rather than having all of the sections visible at the same time.Runs in the browserUI5 1.73+z2ui5_cl_smpc_app_596
• Object Page built entirely in XMLAn ObjectPageLayout declared in one XML view - header title, header content and five sections whose blocks come from four different block namespaces - rather than assembled in a controller.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_597
• Subsection with automatic layout of blocksThis example shows how blocks can be laid out automatically by the Object Page when their size is not specified.Runs in the browserUI5 1.71+z2ui5_cl_smpc_app_598
• Subsection with blocks using column layoutThis example shows how the size of the blocks and be either specified or automaticRuns in the browserUI5 1.71+z2ui5_cl_smpc_app_599

sap.viz

• sap.viz - ui5.controls.VizFramesap.viz.ui5.controls.VizFrame expressed in abap2UI5 - a SAPUI5-only control, so the demo kit original is outside OpenUI5 and this is orientation rather than a 1:1 port.UI5 1.96+z2ui5_cl_smpc_sapui5_012

Adobe Forms

• Render to PDF, Download One or a ZIPRenders Adobe Forms of the system to PDF with FP_JOB_OPEN and the generated function module - one form as a PDF download, several at once as one ZIP fileUI5 1.71+z2ui5_cl_smps_app_024

AI / LLM

• Settings and Connection Testwhere the two AI samples get their model from - provider, destination, model and key, saved once and tested with one pressUI5 1.71+z2ui5_cl_smps_app_013
• Chat with a Language Modela chat with a real language model over HTTPS - the conversation goes out, the answer comes back, the provider is configurationUI5 1.71+z2ui5_cl_smps_app_014
• Summarize a Table with AIa table of sales figures and one button - the rows go to a language model as context, its summary comes back into a panelUI5 1.71+z2ui5_cl_smps_app_015

AMC/APC

• Websocket — News Feedconnect, publish, list the active connections - no JavaScriptUI5 1.71+z2ui5_cl_smps_app_489

Business Events

• Ticket Appevery create and update raises an entity eventUI5 1.71+z2ui5_cl_smps_app_011
• Event Log Appwhat the handler wrote, newest firstUI5 1.71+z2ui5_cl_smps_app_012

Excel & E-Mail

• Excel — Read an Uploaded XLSX File with XCOAn .xlsx file from the FileUploader read with the XCO XLSX library - the first worksheet becomes an ABAP table and is shown as it arrivedUI5 1.71+z2ui5_cl_smps_app_021
• Excel — Export a Table as XLSX File with XCOThe table on the screen written into an .xlsx file with the XCO XLSX library and handed to the browser as a download - a header row, then one row per lineUI5 1.71+z2ui5_cl_smps_app_022
• E-Mail — Send a Table as XLSX AttachmentA mail with an .xlsx attachment, sent with cl_bcs_mail_message - recipient, subject and text from the screen, the attachment written with the XCO XLSX libraryUI5 1.71+z2ui5_cl_smps_app_023

Launchpad

• Build the URL of a Launchpad AppBuilds the URL of a launchpad app from semantic object, action and parameters - through cl_lsapi_manager where the system has it, as an intent URL of its own where it does notUI5 1.71+z2ui5_cl_smps_app_025
• Smart Link Popover with getLinksa list of products whose ids are smart links - a press asks the launchpad which apps the user may open for the product and lists them in a popoverUI5 1.71+z2ui5_cl_smps_app_026
• Full Widthfollow_up_action( cs_event-set_app_full_width ) - the app takes the launchpad's whole width instead of the shell's letterboxUI5 1.71+z2ui5_cl_smps_app_027
• Read Startup Parameterswhat the tile passed in - client->get( )-t_comp_paramsUI5 1.71+z2ui5_cl_smps_app_481
• Set Shell Titlefollow_up_action( cs_event-set_title_launchpad )UI5 1.71+z2ui5_cl_smps_app_482
• Cross-App Navigation Senderhands two values over to another tileUI5 1.71+z2ui5_cl_smps_app_483
• Cross-App Navigation Receiverreads them back out of its startup parametersUI5 1.71+z2ui5_cl_smps_app_484

MIME Play Audio

• MIME — Audio and Play Sounda success and an error tone, addressed by their ICF pathUI5 1.71+z2ui5_cl_smps_app_487

OData

• Two Models in One Viewone table bound to each, column headers from the metadataUI5 1.71+z2ui5_cl_smps_app_315

RAP

• Read a Travelreads one instance by its key - a missing key comes back in FAILED, not as an exceptionUI5 1.71+z2ui5_cl_smps_app_001
• Create a TravelMODIFY ... CREATE, key from MAPPEDUI5 1.71+z2ui5_cl_smps_app_002
• Update a Travelchanges single fields of one instance - UPDATE FIELDS names what may be touchedUI5 1.71+z2ui5_cl_smps_app_003
• Delete a Traveldeletes one instance - MODIFY ... DELETE FROMUI5 1.71+z2ui5_cl_smps_app_004
• Manage Travels, the Complete App01-04 plus EXECUTE and COMMIT ENTITIES RESPONSE OFUI5 1.71+z2ui5_cl_smps_app_005

RAP Actions & Permissions

• RAP Actions — Feature Control with GET PERMISSIONSGET PERMISSIONS asks the business object what may happen to each request - the buttons follow its answer, and the business object refuses the rest anywayUI5 1.71+z2ui5_cl_smps_app_017
• RAP Actions — Parameters, Factory Actions, DefaultsActions with a parameter - a default function proposes a new request, a static factory action creates it, a factory action copies one, and reject asks for its reason in a popupUI5 1.71+z2ui5_cl_smps_app_018
• RAP Actions — Validate on Change with a Determine ActionA determine action runs the validation of the business object while the user types - the quantity is checked on every change, and nothing is saved until SaveUI5 1.71+z2ui5_cl_smps_app_019
• RAP Actions — One Business Object, Two ContractsOne business object, two contracts - approve through the projection Z2UI5_C_SMPS_REQ or on the business object itself, and the handler records which one it wasUI5 1.71+z2ui5_cl_smps_app_020

RAP File Upload

• Deep Action ParameterEXECUTE uploadFile with a deep parameter - the file travels as a stream property, download and delete includedUI5 1.71+z2ui5_cl_smps_app_016

RAP with Draft

• Which Travels Have OneREAD ... %is_draft = mk-onUI5 1.71+z2ui5_cl_smps_app_006
• Enter Draft ModeEdit copies the active instance into a new draft, Resume picks up an existing oneUI5 1.71+z2ui5_cl_smps_app_007
• Change and Save a DraftUPDATE ... %is_draft = mk-onUI5 1.71+z2ui5_cl_smps_app_008
• Leave Draft ModeEXECUTE Activate / DiscardUI5 1.71+z2ui5_cl_smps_app_009
• Complete Draft Handlinga whole app, not a snippet - the complete draft lifecycle in one screenUI5 1.71+z2ui5_cl_smps_app_010

Smart Controls

• Smart Table and Variantswith variant management - UI_PRODUCTLISTUI5 1.71+z2ui5_cl_smps_app_313
• Switch Default Modeldevice, HTTP and OData model side by side - GWSAMPLE_BASICUI5 1.71+z2ui5_cl_smps_app_314
• Smart Multi InputUI conditions mapped 1:1 onto an ABAP range tableUI5 1.71+z2ui5_cl_smps_app_319
• SmartField in a SmartFormneeds the GWSAMPLE_BASIC OData serviceUI5 1.71+z2ui5_cl_smps_app_475
• SmartForm, editable toggleneeds the GWSAMPLE_BASIC OData serviceUI5 1.71+z2ui5_cl_smps_app_476
• SmartFilterBar and SmartTableneeds the GWSAMPLE_BASIC OData serviceUI5 1.71+z2ui5_cl_smps_app_477
• Page Variant Managementneeds the GWSAMPLE_BASIC OData serviceUI5 1.71+z2ui5_cl_smps_app_478
• SmartChart with NavPopoveran analytical service - you supply the pathUI5 1.71+z2ui5_cl_smps_app_479
• classic FilterBar variantsno service needed - the data is ABAPUI5 1.71+z2ui5_cl_smps_app_493

Stateful Sessions / Locks

• Stateful Sessions — LocksENQUEUE_E_TABLE and ENQUEUE_READ, end and restart the sessionUI5 1.71+z2ui5_cl_smps_app_485
• Stateful Sessions — Basicscounts up while the session is stateful, starts over once it is notUI5 1.71+z2ui5_cl_smps_app_486
• Stateful Sessions — Navigation and Locksevery Next Lock View takes the next VARKEY, going back releases itUI5 1.71+z2ui5_cl_smps_app_490