Tristate sap.m.CheckBox

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.$();
    $this.find('div').removeClass('sapMCbMarkChecked');
    $this.removeClass('triStateCheckBoxSelected');
    $this.removeClass('triStateCheckBoxMixed');
   
    if (this.getState() === 1) {
      $this.addClass('triStateCheckBoxSelected');
    } else if (this.getState() === 2) {
      $this.addClass('triStateCheckBoxMixed');
    }
  },
 
  fireSelect: function(s) {
    var v = s.selected ? 1 : 0;
    this.setState(v);
    this.fireEvent('select', {'state': v});
  },

  renderer: {}
});

CSS

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

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

-Dennis

4 Comments

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

Frank Luzat February 16, 2016 at 5:13 pm

Thanks Dennis. This helped me a lot deriving from sap.m.StandardTile to implement an enhanced tile with custom background colors.

like (0)
Augusto Ferreira June 17, 2016 at 7:12 pm

Thanks Dennis!

Do you know some example about triStateCheckBox with Breadcrumb Table?

Regards

like (0)
1. Dennis Seah Post authorJune 17, 2016 at 7:15 pm
  
  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.
  
  Thanks
  
  -D
  
  like (0)
Augusto Ferreira July 4, 2016 at 6:24 pm

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.

like (0)