Questions tagged [sapui5]

This tag 'sapui5' covers both the proprietary (SAPUI5) and the open source (OpenUI5) versions of the framework. When asking about Fiori elements, consider adding [odata] and [sap-fiori] tags accordingly.

SAPUI5 is a frontend JavaScript framework by SAP SE for building enterprise-grade web applications with a rich and modern user interface.

There are two flavors:

  • OpenUI51, the open source version (Apache License 2.0)
  • SAPUI5, the proprietary version built on top of OpenUI5

Both have the same technical core mechanisms and are collectively referred to as UI5.2
UI5 logo

OpenUI5 provides many features to enable creating and extending state-of-the-art user interfaces. It supports and offers:

  • Modern CSS allowing applications to adapt their themes to company's branding
  • Extensibility concepts at framework and application level
  • Internationalization (i18n)
  • Over 300 controls3 (More in SAPUI5) that are responsive, localized, and accessible already
  • Drag and drop
  • Consistent "SAP Fiori" design language and the award-winning "72" font which are both based on extensive UX research and industry standards
  • Well-known software design patterns but not limited to: MV*, publish-subscribe, and OOP
  • Low-code / no-code features for end users to quickly generate or modify existing applications
  • Data layer standards: OData (V2 and V4), FHIR, and GraphQL (experimental)
  • Accessibility standards: ADA, European Commission, BITV, VPAT, WCAG 2.1, and ARIA 1.1
  • Enhanced keyboard navigation and shortcuts for power users out of the box
  • Backward compatibility since release 1.0.0
  • Strict Content Security Policy (CSP) Level 2
  • Unit, integration, and e2e testing - safeguarding robustness of the framework and applications
  • Tooling: dedicated UI5 CLI, growing number of community-driven build tooling tasks and middlewares, and scaffolding projects based on documented best-practices
  • TypeScript definitions based on ECMAScript module system
  • Integration with and other web components in addition to existing UI5 controls

UI5 does not support:


1 OpenUI5, which is a JS framework, is NOT related to "Open UI" which is a standardization initiative. []
2 The number "5" in UI5 does NOT represent the version of the framework. UI5 is semantic versioned.
3 UI components extended from sap.ui.core.Control, excluding deprecated and experimental controls.

Other resources

Related tags

6950 questions
6
votes
3 answers

How to prevent user from navigating away?

In my SAPUI5 application I'm using a sap.tnt.Toolpage as the main layout container. The SideNavigation shows a list of application links and the mainContents is dynamically loaded using the sap.ui.core.routing.Router. To navigate to a detail page…
6
votes
1 answer

Cloud connector fails to load JSON data on device

Our client has changed its system to SAP and wants an app to display data via SAP interface. We decided to use the SAPUI5 framework + WebIDE to develop the app, since it provides a very good control variety with a solid MVC design as well as…
Martin Braun
  • 10,906
  • 9
  • 64
  • 105
6
votes
4 answers

sap.m.Table - Vertical Scrolling with Fixed Header

I have one table having lots of data. Now I want to scroll vertically with table header fixed. can I achieve this? Here is my code: onInit: function() { var data = new JSONModel("Model/data.json"); this.getView().setModel(data); var otable…
Mahendra Kulkarni
  • 1,437
  • 2
  • 26
  • 35
6
votes
1 answer

What is the EventBus in SAPUI5 for?

Can anybody explain for what and when we are going to use EventBus methods? Also what kind the activities of the same.
Rohit Darwade
  • 83
  • 1
  • 5
6
votes
2 answers

SAPUI5 restrict page visibility

Is there any way/best practice to hide unavailable pages from users in SAPUI5? Let's see an example. I have a complex application with a user login page. Here customers can login to the application, and their role data is retrieved from a backend…
nistv4n
  • 2,515
  • 2
  • 19
  • 21
6
votes
3 answers

Passing Data from Master to Detail Page

I watched some tutorials about navigation + passing data between views, but it doesn't work in my case. My goal is to achieve the follwing: On the MainPage the user can see a table with products (JSON file). (Works fine!) After pressing the…
J0eBl4ck
  • 415
  • 1
  • 4
  • 10
6
votes
2 answers

SAPUI5 Set Focus on Input Field

i have the following Problem: I have 2 XML Views with a few input fields and at navigation to the second view the focus should be on the 5th(ID = "RueckmeldeNr") field. I tried several things but nothing worked.. If i use the jQuery delayedCall the…
Daeron
  • 101
  • 1
  • 1
  • 8
6
votes
2 answers

SAPUI5: Retrieve model object in controller

I have a master-detail application that consumes an OData service (declared in manifest.json). In the detail controller, I bind the model to the view in the following way (this method is attached to a router object). _onObjectMatched:…
Marc
  • 6,051
  • 5
  • 26
  • 56
6
votes
5 answers

sap.m.Select: start with a blank selection input element

When using a data aggregation on sap.m.Select, the first entry is always selected. Here's a link to the SDK's preview. Example code from my app new sap.m.Select("id-names", { width: '100%', }).bindAggregation("items", "data>/trip/names", new…
Jorg
  • 7,219
  • 3
  • 44
  • 65
6
votes
1 answer

openui5 js view addStyleClass

How can we set class with mSetting? For example: new sap.m.Button({}).addStyleClass("my-class"); //work Another way? new sap.m.Button({ styleClass: "my-class" // did'n work }); Any possibility to set class that way?
Ivan
  • 98
  • 1
  • 1
  • 7
6
votes
2 answers

Add new icons to OpenUI5?

We need to add new icons to OpenUI5. The icons are already defined as a vector-based font. I know that it's possible to add the icons to the SAP standard font through a service like https://icomoon.io/. However, I want to have to be able to…
dparnas
  • 4,090
  • 4
  • 33
  • 52
6
votes
1 answer

SAPUI5 model loading

Is there some way how to know when model is loaded? Example: sap.ui.controller("myapp.MyViewController", { onInit: function() { this.router = sap.ui.core.UIComponent.getRouterFor(this); …
niceman
  • 251
  • 3
  • 16
6
votes
1 answer

Data binding of CSS class attribute in XML view

How can I bind the value of the CSS class attribute of a XML fragment to a model property within another XML view? The following snipped works fine and should be…
z00bs
  • 7,518
  • 4
  • 34
  • 53
6
votes
4 answers

Get table row count in SAPUI5

I have an sap.ui.Table that shows a list of records. I want to get a count of the records in the data. I have read the post SAP UI 5 how to print total table row , but it hasn't helped me. This is the code for the table (code for the columns has…
user3861284
  • 241
  • 2
  • 10
  • 22
6
votes
3 answers

Pass another controller when instantiating a fragment in SAPUI5

In the SAPUI5 / OpenUI5 xmlfragment documentation the third parameter is a controller for handling actions from the fragment. This is critical for a dialog fragment where there are buttons to press etc. Most of the time I have seen this instantiated…
njames
  • 398
  • 1
  • 5
  • 13