Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
former_member182862
Active Contributor

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

5 Comments