Personalize the color and icon of the checkbox marks in sapui5

Question

Personalize the color and icon of the checkbox marks in sapui5

I'm trying to customize the color of the tick on a UI5 checkbox. After inspecting the CSS, I noticed that it can be modified using the ::before selector:

https://i.sstatic.net/2IMc4.png

To target the checkbox, I added a class called .accept and defined it in the CSS file like this:

.accept.sapMCbBg.sapMCbMarkChecked::before{
    content: "\e05b";
    font-family: "SAP-icons";
    color: #00a600;
}

However, the customization is not taking effect. Any suggestions on how to make it work? Thank you.

EDIT: Below is the code snippet for the checkbox:

var oCheckBox = new sap.m.CheckBox({
  text: "test",
  selected: false,
  select: function(oEvent){
    if (oEvent.getSource().getSelected() == true){
      oEvent.getSource().addStyleClass("accept");
    }else{
      oEvent.getSource().removeStyleClass("accept");
    }
  }
});

css checkbox sapui5

Answer 1

Answer №1

To enhance the appearance of a CheckBox, add a new CSS class to its DOM once it has been rendered. Use the getDomRef method to access the corresponding DOM element, providing you with the HTML DOM for the UI5 element.

.green::before{
    color: #00a600 !important;
}

Next, target the CheckBox's tick div, which is the first child of the retrieved DOM, using the jQuery children method.

onAfterRendering: function() {
    var cb = this.getView().byId("cb");
    $($(cb.getDomRef()).children()[0]).addClass("green");
}

For a demonstration, refer to this working example.

Answer 2

To enhance the appearance of a CheckBox, add a new CSS class to its DOM once it has been rendered. Use the getDomRef method to access the corresponding DOM element, providing you with the HTML DOM for the UI5 element.

.green::before{
    color: #00a600 !important;
}

Next, target the CheckBox's tick div, which is the first child of the retrieved DOM, using the jQuery children method.

onAfterRendering: function() {
    var cb = this.getView().byId("cb");
    $($(cb.getDomRef()).children()[0]).addClass("green");
}

For a demonstration, refer to this working example.

Answer 3

Answer №2

UI5 provides a predefined set of checkboxes where the display color changes based on the ValueState.

Here is an example of how to create checkboxes in different states:

https://i.sstatic.net/kaU0f.png

Code Example:

// create CheckBoxes in different states
var oLayout = new sap.ui.commons.layout.MatrixLayout("matrix1");
    oLayout.setLayoutFixed(false);
    oLayout.setColumns(4);

var oCB1 = new sap.ui.commons.CheckBox({
    text : 'error',
    tooltip : 'Select for Error',
    valueState : sap.ui.core.ValueState.Error
    });

var oCB2 = new sap.ui.commons.CheckBox({
    text : 'warning',
    tooltip : 'Select for Warning',
    valueState : sap.ui.core.ValueState.Warning
    });

var oCB3 = new sap.ui.commons.CheckBox({
    text : 'ReadOnly',
    tooltip : 'This CheckBox is read only',
    editable : false,
    checked : true
    });

var oCB4 = new sap.ui.commons.CheckBox({
    text : 'disabled',
    tooltip : 'This CheckBox is disabled',
    enabled : false
    });

oLayout.createRow(oCB1, oCB2, oCB3, oCB4);

// attach it to some element in the page
oLayout.placeAt("sample2");

For more options regarding the value state, you can refer to the official documentation.

I hope this information proves helpful to you :)

Answer 4

UI5 provides a predefined set of checkboxes where the display color changes based on the ValueState.

Here is an example of how to create checkboxes in different states:

https://i.sstatic.net/kaU0f.png

Code Example:

// create CheckBoxes in different states
var oLayout = new sap.ui.commons.layout.MatrixLayout("matrix1");
    oLayout.setLayoutFixed(false);
    oLayout.setColumns(4);

var oCB1 = new sap.ui.commons.CheckBox({
    text : 'error',
    tooltip : 'Select for Error',
    valueState : sap.ui.core.ValueState.Error
    });

var oCB2 = new sap.ui.commons.CheckBox({
    text : 'warning',
    tooltip : 'Select for Warning',
    valueState : sap.ui.core.ValueState.Warning
    });

var oCB3 = new sap.ui.commons.CheckBox({
    text : 'ReadOnly',
    tooltip : 'This CheckBox is read only',
    editable : false,
    checked : true
    });

var oCB4 = new sap.ui.commons.CheckBox({
    text : 'disabled',
    tooltip : 'This CheckBox is disabled',
    enabled : false
    });

oLayout.createRow(oCB1, oCB2, oCB3, oCB4);

// attach it to some element in the page
oLayout.placeAt("sample2");

For more options regarding the value state, you can refer to the official documentation.

I hope this information proves helpful to you :)

Answer 5

Answer №3

Starting from version 1.38 of UI5, developers can now assign a value state to the sap.m.CheckBox component:

<CheckBox valueState="Success" />

At the moment, there are four supported value states/semantic colors available:

https://i.sstatic.net/sggBq.gif

Source:

Answer 6

Starting from version 1.38 of UI5, developers can now assign a value state to the sap.m.CheckBox component:

<CheckBox valueState="Success" />

At the moment, there are four supported value states/semantic colors available:

https://i.sstatic.net/sggBq.gif

Source:

Personalize the color and icon of the checkbox marks in sapui5

Answer №1

Answer №2

Answer №3

Similar questions

CSS First Element

"Dynamic" visual in a Vue.js development scheme

Using the Croppie plugin to crop an image before uploading via jQuery Ajax in PHP

What could be the reason my SVG images are not displaying?

Circular css3 animation originating from the center

Is there a way to horizontally align my navigation bar links with CSS while maintaining grey borders on the sides?

I am trying to collapse the table header but I am having trouble doing so

Customizing Carousel Arrows in Angular with ng-bootstrap

Border at the Top and Text Alignment Problem

Evolution of the material through a fresh new slide

Varied approaches to managing responsive layouts

The navigation bar fails to display correctly on Internet Explorer 10

Ways to ensure that a div's height matches its width

Toggle the visibility of an element by clicking a button

What is the difference between class at DOM and className at component?

Styling the nested list items with text decoration

Experiencing excessive CPU usage while utilizing a progress bar in Angular

Implementing the disabled style for an ASP.net dropdownlist

Create a layout using CSS that features two columns. The left column should be fluid, expanding to fill all remaining space, while the right column should be fixed

Transitioning hover effects with absolutely positioned elements