SAPUI5 – Know Your Controls : Button

In SAPUI5, the button control is used to define an simple clickable button. Through an button, the user can trigger an action either by clicking on or tapping the button, or by pressing certain keys.

There are many varieties of buttons in SAPUI5, each having its own uses and requirements. Buttons in SAPUI5 are broadly classified into the following Types :

 

sap.m Library Buttons :

The sap.m library is mostly used in the latest applications as it is browser independent and provides an variety of controls and properties which enrich user experience.

Button :

It is responsive. It is used when the user has to trigger some actions. The types of sap.m.Button are :

  • Accept
  • Back
  • Default
  • Emphasized
  • Reject
  • Transparent
  • Unstyled
  • Up

Menu Button :

It is used for opening an menu. It is like an drop down list of actions.

Paging Button :

It is used for pagination and navigation between items or entites. The position and count property of this control is used for the navigation.

Radio Button :

RadioButton is a control similar to a checkbox, but it allows the user to choose only one of the predefined set of options.  They can have value state, and be arranged in both vertically and horizontally.

Radio Button Group:

It is a wrapper for a group of sap.m.RadioButton, it can be used as an single UI Element. This is primarily used when an single event handler is to be used for the entire group instead of individual event handlers.

Segmented Button:

It is an horizontal control made up of multiple buttons. We use the items aggregration to display the list of buttons.

Toggle Button :

Initial State :   On Click : 

A toggle button has basically two states i.e. pressed state and normal state. It is just an enhancement on the sap.m.Button. When we click on the toggle button, to goes to the pressed state, on clicking it again it comes back to the normal state.

sap.ui.commons library :

Most of the controls in this library is deprecated as they are not browser/device independent and do not have the modern UX. Now we mostly use the sap.m library for application development.

Other Library Buttons :

sap.m.semantic.SemanticButton :

As per the SAP Fiori 1.0 design guidelines, we use the sap.m.semantic library controls in FIORI apps. The Semantic Button is similar to an sap.m.Button, but is eligible for an aggregration content of an sap.m.semanticPage.

sap.m.semantic.SemanticToggleButton:

The Semantic Toggle Button is similar to an sap.m.ToggleButton, but is eligible for an aggregration content of an sap.m.semanticPage.

sap.f.semantic.SemanticButton:

As per the SAP Fiori 2.0 design guidelines, we use the sap.m.semantic library controls in FIORI apps. This control is similar to the sap.m.Button, but we can associate semantic actions to it.

sap.f.semantic.SemanticToggleButton:

The Semantic Toggle Button is similar to an sap.m.ToggleButton, but we can associate semantic actions to it.

Button Events :

Press :

This event is fired when the user press on the button. While declaring the button we give the function name which we wish to execute in the controller. In the controller, we define the function.

Tap :

This event is fired when the user taps on the button.

FIORI Guidelines for using Buttons :

Normal Button Usage :

  • Create, Edit, Save, Approve, Reject, Accept, Decline, Delete.

Segmented Button Usage :

  • Time period (Year, Month, Day), Sizes (Small, medium, large).

Toggle Buttons :

  • To show states, activate & deactivate.