Skip to Content

Just want to share a Tristate Checkbox in for SAP Mobile control.

It illustrates the followings

1. Extending an existing control. sap.m.Checkbox

2.Using css :before to place icon in the checkbox

3. Override the fireSelect function so that the state is returned to the listener.

4. With a few lines of code and CSS, we can easily extend an control

sap.m.CheckBox.extend('TriStateCheckBox', {
  metadata: {
    properties: {
      state: {type: 'int', defaultValue: 0}
  onAfterRendering: function() {
    var $this = this.$();
    if (this.getState() === 1) {
    } else if (this.getState() === 2) {
  fireSelect: function(s) {
    var v = s.selected ? 1 : 0;
    this.fireEvent('select', {'state': v});

  renderer: {}


.triStateCheckBoxSelected div:before {
   content: "\e05b";
  font-family: "SAP-icons";
  color: #007cc0;

.triStateCheckBoxMixed div:before {
   content: "\e17b";
  font-family: "SAP-icons";
  color: #007cc0;


To report this post you need to login first.


You must be Logged on to comment or reply to a post.

    1. Former Member Post author

      HI Augusto,

      Can you post your question in the Discussion Forum?

      Actually, I do not know what is Breadcrumb Table. Maybe others can help you.



  1. Augusto Ferreira

    How can I do to extend the checkbox of a sap.m.Table (with mode property set as “MultiSelect”) using your code?

    I was using the triStateCheckBox of the sap.ui.commons, but it is not working properly inside the sap.m.table.


Leave a Reply