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.
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.
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).
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.
Identically, you can find Text and Label in the mobile library, sap.m.
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.
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.
You can find Input under the mobile library sap.m.
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
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.
You can also find Panels under the mobile library sap.m.
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.
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.
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.
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.
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. 🙂