How to change color on Button Caption depending on data?

I am converting a legacy application from Oracle Forms to Cuba. One of the buttons in our old application was a link to a “Notes” table. The button, which just contains the text “N” as a label, is colored Red if there are no notes and colored Green if there are notes already entered for any particular entry.

I can use a generated column in my table to create a button that links to my notes. I can also determine whether notes already exist or not. I figure it is easier to change the text color of the “N” in the box to Red or Green as necessary. Unfortunately, I can’t figure out how to do it! Here’s what I have so far:

offersTable.addGeneratedColumn("notesBtn", new Table.ColumnGenerator() {
    public Component generateCell(Entity entity) {
        Button button = (Button) componentsFactory.createComponent(Button.NAME);
        Offer currentOffer = (Offer) ((Datasource)offersTable.getItemDatasource(entity)).getItem();
        LoadContext<RaNote> loadContext = LoadContext.create(RaNote.class)
                     .setQuery(LoadContext.createQuery("select c from rade$RaNote c where c.recType = 'N' and c.tabvar = :tabvar and c.recId = :recId")
                     .setParameter("tabvar", "OFFER")
                     .setParameter("recId", currentOffer.getId())
         List<RaNote> notes = dataManager.loadList(loadContext);
        if (notes.size() == 1) {
        } else {
       button.setAction( new BaseAction ("N") {
             public void actionPerform(Component component) {
                           ParamsMap.of("tabvar","OFFER", "recId", currentOffer.getId())
     return button;

This creates a button, which displays just fine and the attached action works fine. I then used the Create Theme Extension function to extend Havana (the theme I’m using).

I put the following code in havana-ext.scss:

@mixin com_paslists_rade-havana-ext {

    @include havana;

    .v-button-caption-red {
        color: red;

    .v-button-caption-green {
        color: green;

I just can’t seem to set the color properly. How do I do this?


In havana theme button color is specified for a very specific selector: .v-button .v-button-wrap .v-button-caption. To override it you can use the following CSS rule:

.red-button .v-button-wrap .v-button-caption {
  color: red;

Please note that havana is our legacy theme and is not recommended for new projects.

Thanks, that worked.

I know that havana is legacy theme, but I much prefer it because it shows more data on a screen. I find that halo is too large (even though it’s what everybody seems to like these days). Call me old-fashioned! :slight_smile:

As an alternative to Havana, consider modifying Halo theme as explained here (see Modifying common parameters) or here.