Skip to Content
Author's profile photo Dennis Seah

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

Assigned Tags

      5 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Frank Luzat
      Frank Luzat

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

      Author's profile photo Augusto Ferreira
      Augusto Ferreira

      Thanks Dennis!

      Do you know some example about triStateCheckBox with Breadcrumb Table?

      Regards

      Author's profile photo Dennis Seah
      Dennis Seah
      Blog 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.

      Thanks

      -D

      Author's profile photo Augusto Ferreira
      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.

      Author's profile photo Former Member
      Former Member

      Can this be done without css, on Sap.m.Table?