Learn SAP from the Experts | The SAP PRESS Blog

An Overview of SAPUI5 Libraries

Written by SAP PRESS | Apr 18, 2022 1:00:00 PM

SAPUI5 libraries are collections of reusable UI components that you can use to build your applications.

 

They provide prebuilt controls such as buttons, input fields, tables, charts, and more, saving you time and effort in developing your own custom UI elements. In this post, we’ll talk about the following libraries:

  • sap.base: This provides general functionality of the framework such as internationalization, logging, and security.
  • sap. ui: This is the foundation library that provides the basic building blocks for all SAPUI5 applications, including models, views, controllers, and routing.
  • sap.m: This library is specifically designed for mobile devices and tablets, providing touch-optimized controls and responsive layouts.
  • sap.ushell: This library bundles the access to services of the SAP Fiori launchpad.
  • sap.uxap: Here, all controls necessary for building SAP Fiori object pages are located.
  • sap.f: This library includes special controls for SAPUI5 development that aren’t normally found in other frameworks.

sap.base

The sap.base library contains, as the name suggests, base functionality that the SAPUI5 framework uses internally. The most-used component of this library is the internationalization concept of SAPUI5. But other useful implementations are also included in this library. Important components of this library are as follows:

  • sap.base.assert: The sap.base.assert method adds a basic assertion mechanism where you can check if a value meets a certain condition. This can also be used for testing purposes.
  • sap.base.i18n.ResourceBundle: The sap.base.i18n.ResourceBundle class stores text in separate files based on language. You can use the ResourceBundle module to access these files and display the appropriate text for the user’s language. This provides a create method where you provide the base URL of your resource bundle file and optionally the user’s preferred language. If the specific language file isn’t found, the resource bundle tries alternative versions in a specific order:
    • Locale without region code
    • Fallback language (defaults to English)
    • Base URL file (the original file without any language information)
  • sap.base.Logging: The SAPUI5 Logging API with the module sap.base.Logging helps you monitor your application’s behavior by creating log entries. These entries contain details such as timestamps, severity levels (debug, info, warning, error, fatal), messages, and component information. You can control which log messages are recorded by setting the minimum level using setLevel. By default, optimized builds only record errors, while debug builds show all messages.
  • sap.base.security: sap.ui.security: This offers functions for encoding cascading style sheets (CSS), JavaScript, URLs, URL parameters, and XML, whereas sap.ui.string offers string manipulation functions.
  • sap.base.util: The module sap.base.util and its submodules provide functionalities for programmers. This offers methods for working with arrays, cloning data, looping over arrays, generating unique IDs, and more.

sap.ui

The sap.ui namespace is one of the core namespaces relating to everything needed to build web applications. It’s structured into sub-namespaces, clustering the different parts required to not only run SAPUI5 applications but also for lifecycle management, core functionalities, and UI elements.

sap.ui.core

The sap.ui.core namespace contains the core functionalities of SAPUI5, as the name suggests. The following components are of most importance:

  • sap.ui.core.Control, sap.ui.core.Element: In this namespace, the sap.ui.core.Control and sap.ui.core.Element modules are placed. They are the main concepts of building UI elements.
  • sap.ui.core.Component: The module sap.ui.core.Component is the base class in SAPUI5 for defining reusable UI components.
  • sap.ui.core.BusyIndicator: The sap.ui.core.BusyIndicator can be used to indicate that work is currently done or something is being processed. This blocks the UI part, to disable users’ interactions with it.
  • sap.ui.core.dnd: This namespace bundles the necessary technology to enable drag and drop in SAPUI5.
  • sap.ui.core.EventBus: The sap.ui.core.EventBus is an observer pattern that can be used to trigger events and react to these events throughout your application. From experience, this implementation might lead to some problems, so it’s advised to create your own event bus.
  • sap.ui.core.Fragment: Fragments are a big part of SAPUI5, enabling you to create reusable XML snippets that can be loaded when needed.
  • sap.ui.core.Icon: This control is responsible for displaying icons from the SAP Fiori icon pool.
  • sap.ui.core.Item: This is the default implementation of an item that can be used in dropdowns or lists.
  • sap.ui.core.Routing: Here, the implementation of the routing concept is defined. An instance of this class is normally automatically created via its definition in manifest.json and the instantiate routing method in Component.js.
  • sap.ui.core.Title: This title can be used to render emphasized text that should serve as a title.

sap.ui.Device

The sap.ui.Device API offers insights into the user’s browser and device, as well as cross-platform support for events such as media queries, orientation changes, and resizing. It operates independently of the rest of the SAPUI5 framework, enabling its preloading for dynamic SAPUI5 bootstrapping based on device or browser capabilities.

 

The data of the Device API is normally put into a global named JSONModel during the instantiation of Component.js.

sap.ui.layout

This namespace bundles the different layout options, SAPUI5 comes shipped with. This includes horizontal and vertical box layouts, different grids, responsive layouts, and so on.

sap.ui.model

The sap.ui.model namespace brings you the different models that you can use for holding and managing data. This includes the following:

  • sap.ui.model.json.JSONModel: This client-side model stores data in JSON.
  • sap.ui.model.odata.v2.ODataModel: This server-side model is for integrating OData Version 2 services.
  • sap.ui.model.odata.v4.ODataModel: This server-side model is for integrating OData Version 4 services.
  • sap.ui.model.resource.ResourceModel: This client-side model works with resource data that get bundled like the internationalization files of your application.

In addition to the models, these namespaces also provide classes to work with these models:

  • sap.ui.model.Filter: This class is responsible to create filters for bindings and will handle their logic and combination.
  • sap.ui.model.FilterOperator: This enum provides you with valid filter operations.
  • sap.ui.model.Binding: This is the base class for all binding information.
  • sap.ui.model.Context: This holds the context of a binding for relative bindings.
  • sap.ui.model.PropertyBinding: This is the binding between one property of an element and one property of a model.
  • sap.ui.model.ListBinding: This is the binding between a controls aggregation and a list of model data.
  • sap.ui.model.TreeBinding: This is like the ListBinding, but for hierarchical data.
  • sap.ui.model.Sorter: This class is responsible for sorting bindings.

sap.ui.richtexteditor

The sap.ui.richtexteditor.RichTextEditor control is an advanced input control that allows you to input formatted text. It uses third-party components and might therefore run into certain restrictions when used in specific scenarios. In addition, from experience, this control doesn’t handle binding very well, so new values should always be set via its dedicated setter methods and retrieved via its getter methods. In addition, when changing the editable property, it can lead to rendering issues. To solve that, new instances of the control should be created dynamically with the correct editable value provided instead of changing it during runtime via the setter method. Besides that, it’s a great control if you want to provide input functionality for things such as notes or comments.

sap.ui.table

The sap.ui.table namespace provides you with the sap.ui.table.Table control, also known as the grid table. It was made to make working with large sets of data possible by offering horizontal and vertical scrolling, fixed row heights, and so on.

 

sap.m

The contents of the sap.m namespace were created with the mobile aspect in mind, meaning that every control here supports an adaptive and responsive design. Some of these responsive controls are as follows:

  • sap.m.App: This control is the base of a SAPUI5 application and serves as a single page container and a navigation container.
  • sap.m.Avatar: The avatar is a round image or text used for displaying users.
  • sap.m.Breadcrumbs: The breadcrumbs provide easy navigation functionality by displaying the previous navigation steps as clickable links.
  • sap.m.Button: The sap.m.Button is the main control for displaying buttons that users can interact with. It supports different button types for different scenarios.
  • sap.m.Carousel: The carousel displays a list of items that can be shuffled from left to right. It can be used to always bring one item into the spotlight.
  • sap.m.CheckBox: This displays a checkbox that can be selected or deselected.
  • sap.m.ComboBox: The sap.m.ComboBox can be used to display a dropdown that includes between 13 and 200 items. It supports search completion and adding new dropdown items on the fly.
  • sap.m.DatePicker: This control offers the input of dates by providing a calendar popover when interacting with it.
  • sap.m.DateTimePicker: The DateTimePicker adds time to the DatePicker control.
  • sap.m.Dialog: The sap.m.Dialog control provides a modular dialog that can be opened dynamically. This can be used when you want to interrupt the user’s current interaction and display data that should be processed now.
  • sap.m.FlexBox: This layout control enables you to use the flexible box layout of CSS in SAPUI5.
  • sap.m.HBox: The sap.m.HBox layout control allows you to align content horizontally.
  • sap.m.IconTabBar: With the IconTabBar, you can cluster content into different tabs that can be selected via a toolbar, displaying icons for each tab. This is great for structuring content and adding visual appeal to them.
  • sap.m.Image: This is the general implementation with which you can add images to your apps.
  • sap.m.Input: The sap.m.Input control allows you to input data. It can be enhanced with placeholder texts to provide information on what users need to input there.
  • sap.m.Link: With the sap.m.Link control, you can add hyperlinks to your apps. This is the pendant to the HTML anchor tag.
  • sap.m.List: The list control allows you to display items in a structured list, supporting performance techniques such as lazy loading. You can use the list with different list item types for displaying the list data in different ways such as custom layouts, standard layouts, and so on.
  • sap.m.Menu: The sap.m.Menu control makes creating menus possible that can then be structured into submenus. This is for clustering actions into one place.
  • sap.m.MessageBox: With the sap.m.MessageBox control, you can display different predefined severities of messages to users. This will open a dialog that depending on the severity shows a different color and icon scheme.
  • sap.m.MessageStrip: The MessageStrip shows messages directly in the UI, also coming with predefined severities.
  • sap.m.MessageToast: With the MessageToast control you’re able to display messages that pop up and are automatically set invisible after a few seconds. This doesn’t interrupt the users interaction flow as hard as a MessageBox, for example.
  • sap.m.OverflowToolbar: The OverflowToolbar can be used as a responsive toolbar. When the space becomes smaller, otherwise impacted items in the toolbar will be shifted into a menu in the toolbar. This allows you to tidy up the UI in responsive scenarios.
  • sap.m.Page: The sap.m.Page control gives you a general layout consisting of a header, content area, and footer area, and it takes up 100% of the screen.
  • sap.m.PDFViewer: With the PDFViewer, you can display files with an application/pdf MIME type in your application.
  • sap.m.PlanningCalendar: The PlanningCalendar works as a calendar, showing appointments for different entities in rows. These appointments can be visually enhanced. The calendar itself supports different views and time intervals such as weekly or monthly views.
  • sap.m.Popover: The popover can be used to display additional information opened by a button click, for example.
  • sap.m.RadioButton: Radio buttons work like checkboxes that are grouped so that only one can be selected.
  • sap.m.RangeSlider: A RangeSlider enables users to select a numeric value based on an interval by using a slider.
  • sap.m.SegmentedButton: With the SegmentedButton, you can add multiple buttons together to give them the same context. This is often done to display filters for tables such as “own” and “others”.
  • sap.m.Select: The select works similarly to the ComboBox but should be used for fewer entries.
  • sap.m.StepInput: The StepInput enables numerical input that can be incremented or decremented by predefined steps.
  • sap.m.Switch: With the switch control, you can add a toggle control for setting true/false values.
  • sap.m.Table: This table control, also called responsive table, is the main table type that should be used to display tabular data in responsive scenarios. It supports line breaking, device-specific visibility of columns, and grouping table data.
  • sap.m.Text: This is the main control for displaying texts in your UI.
  • sap.m.TextArea: This works like the input control, but adds multiline support instead of a single line of data.
  • sap.m.VBox: The VBox control places its content vertically.
  • sap.m.Wizard: The wizard is a great control for taking a user step-by-step through a process such as the creation of new data. It should include at least three steps, which can be activated individually.

sap.ushell

The sap.ushell namespace holds relevant APIs for working with the SAP Fiori launchpad from SAPUI5 applications. First, the sap.ushell.Container API can be used to develop plugins in the SAP Fiori launchpad. A plugin is nothing more than an SAPUI5 component that retrieves the renderer of the Container API during initialization and adds new content to the SAP Fiori launchpad with the renderer’s methods.

 

Then, this namespace holds services provided by the SAP Fiori launchpad. These services can be retrieved via the method sap.ushell.Container.getServiceAsync("<Service name>"). This returns a promise with the requested service. The following services might be important for you to know:

  • sap.ushell.services.Configuration: This service is relevant when you program custom tiles because it allows you to listen to size changes from the SAP Fiori launchpad.
  • sap.ushell.services.Navigation: This service is the main way of implementing app-to-app navigation in the SAP Fiori launchpad. It allows you to navigate from one app to another using intent-based navigation, listen to navigation events, retrieve the intent information of the current application, and much more.
  • sap.ushell.services.UserInfo: The user info service retrieves the information of the current SAP Fiori launchpad user. You can fetch its email, name, and ID.
  • sap.ushell.services.BookmarkV2: The relatively new bookmark service makes it easy to add shortcuts in the SAP Fiori launchpad.
  • sap.ushell.services.NotificationsV2: The notification service is the entry point for retrieving information about the SAP Fiori launchpad notifications. You can’t add new notifications, but you can fetch them and execute their actions.

sap.uxap

The sap.uxap namespace bundles everything needed to create an SAP Fiori object page layout.

 

sap.f

The sap.f namespace in SAPUI5 houses a collection of UI controls specifically designed for building applications adhering to the SAP Fiori design guidelines. These controls are built to align with the visual style, interaction patterns, and user experience principles of the SAP Fiori design system. They often provide features that improve usability and accessibility for SAP Fiori apps. While adhering to SAP Fiori standards, they offer customization options to tailor the look and feel to specific application requirements. The following controls are important:

  • sap.f.Card: A card is a container with predefined header and content, as well as a predefined visual style. It can be used with a list, table, contact information, charts, and so on.
  • sap.f.DynamicPage: The dynamic page is the base for the object page. It provides a title, dynamic header that can be expanded or collapsed, and a content area. If you want to have this behavior but don’t need all the features from the object page, use the dynamic page. It has significantly fewer dependencies and less rendering time than an object page.
  • sap.f.FlexibleColumnLayout: This control functions similarly to sap.m.SplitContainer, but with the key distinction of supporting three columns (begin, mid, and end) instead of the two typically found in sap.m.SplitContainer (master and detail). The width of each of these three columns can be dynamically adjusted. The control offers a variety of possible layouts, which can be modified programmatically via the control’s API or interactively by the user. Draggable column separators enable users to customize column widths within the current layout. Moreover, dragging a separator past a predefined breakpoint can trigger a transition to a different layout.
  • sap.f.GridContainer: The grid container is a layout control that places its content in a grid. This grid is sectioned into rows and columns and can vary in CSS size. Its content then gets the information on how many columns and rows it should occupy.
  • sap.f.GridList: The grid list works similarly to the grid container but should be used for displaying its content in the same size. It can also use different grid layouts.
  • sap.f.ProductSwitch: The product switch displays a popover that displays a list of items. These items represent different apps, navigation targets, or other items. 

Learn SAPUI5 in Our Upcoming Rheinwerk Course!

Learn to use SAPUI5 to develop modern, responsive SAP applications in this comprehensive course. From basics to advanced programming, integration, and customization, this is your one-stop shop! This upcoming course in August and September is live on the web and will teach you all you need to know about these topics. Click on the banner below to learn more and order your ticket.

 

 

Editor’s note: This post has been adapted from a section of the book SAPUI5: The Comprehensive Guide by Rene Glavanovits, Martin Koch, Daniel Krancz, and Maximilian Olzinger. Rene is an SAP consultant and developer at CloudDNA GmbH, an SAP partner in Austria. Martin is the managing director of CloudDNA GmbH. Daniel is a software developer and consultant at CloudDNA GmbH. Maximilian is a software developer and consultant at CloudDNA GmbH.

 

This post was originally published and 4/2022 updated 4/2025.
View full post