Commonly Used SAPUI5 Controls

Today I’ll be listing some commonly used SAPUI5 controls. Developers can use these controls for a single page or section to a more complex user interface. I picked the following controls based on the frequency of usage throughout my past projects. And the number of occurrence of these elements across SAP Fiori standard applications. I also included the most commonly used properties of these controls. Hopefully, it can be helpful for your projects.

SAPUI5 Controls

Buttons

From “Hello World” to creating complex applications, sap.m.Button is your default SAPUI5 control. Any application contains buttons on every single page, and this holds true to any user interface. Users trigger actions by using buttons, which makes it an indispensable control.

Do take note that there’s a lot of button type to choose from. But if you’re just starting with SAPUI5, the basic button is a good starting point. Also always refer to the SAP Fiori Design Guidelines on when or where to exactly use the appropriate button types.

SAPUI5 Control - Standard buttons in a toolbar
Standard buttons in a toolbar
SAPUI5 Controls - Standard buttons in the footer toolbar
Standard buttons in the footer toolbar (From Fiori Design Guidelines)

Library

You can find Buttons under the sap.m library, which is the new default library for mobile and desktop SAPUI5 controls. Formerly, there is a sap.ui.commons  button which is specific for desktop use. Furthermore, sap.ui.commons was deprecated when SAP campaigned for mobile first design (see version 1.38).

Properties

The iconDensityAware property is used to fetch different resolution for the button icon on each screen type and size. By default, this property is set to true. The application will try to fetch the appropriate image based on the user’s device. If you encounter a network error on your browser the solution is to set the property to false.

Disabling this property eliminates the network error but there is one major drawback. Your icon may become pixelated on higher resolution display since the application will not load the correct density.

Text and Label

So you might ask yourself, “Okay I have a button now, but what if I want to just display a text?”. The sap.m.Text or a sap.m.Label is the answer.

Your next question might be, “Okay a text or label huh, so when do I use a text or label? which is which?”. In simple terms, if you just want to display a text in general, which is not inside a form, use Text. But if you want to use a display beside an input or a read-only text, use Label. Most of the time, Labels always accompanies a form control.

Text used within a form
Text used within a form (From Fiori Design Guidelines)

Library

Identically, you can find Text and Label in the mobile library, sap.m.

Properties

For Labels, the design property is very useful to customization. Labels do not have multi-line support. By default, the label control will truncate the text if the width exceeds the container dimensions.

For Text, you might want to play with the maxLines property. Take note that the property’s behavior is dependent on the user’s current browser. So you might want to check across browser for compatibility.

Input

Now that you already have the action and display, you may want to capture some data from the user. Input will be the next control for you. Input is for single line edit text or numeric values. Input aims to simplify and help the user entry. As a result, Input has a lot of properties and method. As a starting SAPUI5 developer, you might want to focus on allowing users to have assisted functionality.

Tabular autocomplete suggestion feature on a desktop
Tabular autocomplete suggestion feature on a desktop

Library

You can find Input under the mobile library sap.m.

Properties

Since Input covers a lot of functionality, I suggest you focus on the following properties for starters:

  • selectedKey – used for identifying the item selected by the user from the suggestion list
  • showSuggestion – will trigger suggestion as the user is typing on the input field
  • showValueHelp – will show an icon to identify that the control opens up a dialog for help
  • type – validation rule will apply base on the input type, example an email
  • valueLiveUpdate – this helps on data binding, as the value of the input is real-time updated as the user types

 

Panel

At this point, you can now display and capture data from the user base on these controls. Our next step is to organize them into containers. The basic containers you can use for your application is a Panel.

A Panel can contain one or more controls which are good for creating complex layouts. It can also expand or collapse to minimize the visual distraction for the user.

Panel with a title toolbar
Panel with a title toolbar

Library

You can also find Panels under the mobile library sap.m.

Properties

Aside from the basic expandable property, there’s the backgroundDesign property. The backgroundDesign property provides a different look-and-feel depending on the current theme you’re using.

 

List and Table

You can use a List or a Table for presenting multiple items which are related to each other. In SAPUI5, the concept of having a list or table is very similar. Tables technically contain list items which have additional fields that represented as Columns.

Most of the list properties and methods apply to tables, with some exception, especially on the item selection (I will discuss in my future posts). As a beginner, you might want to focus on building these controls by aggregation binding.

Standard list items
Standard list items

Library

You can find List and Table under sap.m library.

into consideration that there are also different types of Table from other libraries. Like Tree Tables which are more appropriate for advanced layouts and data.

Properties

Browsing through the List and Table library and you will probably notice that there’s not much property on the control itself. Because most of the events and properties lie on the items inside these controls. You might want to look at the Standard List Item and Column for tables.

Likewise, you can use the press function for selection behavior of these controls. You must set the selection mode to SingelSelectMaster so that the press function is fired upon selection.

 

Summary

Given these points, you can choose from many controls developing SAPUI5 applications. The list is just a small portion of the rich controls you can play with. Don’t be afraid to experiment and combine SAPUI5 controls. However, take note of the design guidelines.

The guidelines are there as a baseline. But if you think it will benefit your users in terms of User Experience, try to challenge these guidelines and build your own.

If you think there are controls that didn’t make the list above, please leave a comment below.  Share with us what you think. Also, don’t forget to share my blog for more SAPUI5 content and update. 🙂

 

Share this...
Share on Facebook0Tweet about this on TwitterShare on LinkedIn0Email this to someonePrint this page

Leave a Reply