Template render status

Hi,

is there a way we can add style to different colors to status by template render?

grid
	.addColumn(TemplateRenderer.<Creditors> of("<Span class='label-active' status='[[item.active]
]'>[[item.active]
]</Span>")
	.withProperty("active", Creditors::getActive))
	.setHeader("Active").setFlexGrow(0).setWidth("80px").setKey(AbstractEntity.ACTIVE_COLUMN);

sharedstyle.css



.label-active ([status="true"]
)   {
    background-color: var(--lumo-success-color);
    padding: 5px;
    border-radius: 30px;
}
.label-active ([status="false"]
) {
    background-color: var(--lumo-error-color);
    padding: 5px;
    border-radius: 30px;
} 

.label-active{
    background-color: orange;
    padding: 5px;
    border-radius: 30px;
} 

Hi,

Yes, you have to add $ before = for an html tag (status$=). If it’s a boolean then the attribute will be status (if true) or no attribute status (if false). I changed it to a string:

grid
            .addColumn(TemplateRenderer.<Creditors> of("<Span class='label-active' status$='[[item.activeStatus]
]'>[[item.active]
]</Span>")
                    .withProperty("active", Creditors::isActive)
                    .withProperty("activeStatus", c -> c.isActive()?"active":"inactive"))
            .setHeader("Active").setFlexGrow(0).setWidth("80px");

Then in your css, you should not have () and space:

.label-active[status="active"]
   {
    background-color: var(--lumo-success-color);
    padding: 5px;
    border-radius: 30px;
}
.label-active[status="inactive"]
 {
    background-color: var(--lumo-error-color);
    padding: 5px;
    border-radius: 30px;
}

.label-active{
    background-color: orange;
    padding: 5px;
    border-radius: 30px;
}

it worked!

is it possible to add a icon for
active:
inactive:

Yes it’s possible. Is it a vaadin icon or a img?

With Vaadin icon, you can add this in your Template

<iron-icon icon="vaadin:vaadin-h"></iron-icon> (with the icon you want).

You can also use a ComponentRenderer instead TemplateRenderer, it’s slower to run but easier to do in Java.

Yes i did it with ComponentRenderer but it slow. I’m trying to move everything to a TemplateRenderer.
But i cant seem to find a way to make the icon dynamic.

active:
"

inactive:
"

i finally got it working based on this:

grid.addColumn(TemplateRenderer.<ResultQuery>of("<iron-icon style='[[item.activeStatus]
]' icon='[[item.activeIcon]
]'> </iron-icon>")
.withProperty("activeStatus", c -> (boolean) c.getQueryResult()[5]
 ? "background-color: rgb(0,255,0); padding: 5px; border-radius: 30px; width: 16px; height: 16px;	" : "background-color: rgb(240,20,60); padding: 5px; border-radius: 30px; color: white; width: 16px; height: 16px;")
.withProperty("activeIcon", c -> (boolean) c.getQueryResult()[5]
 ? "vaadin:check" : "vaadin:close"))
.setHeader("Active").setFlexGrow(0).setWidth("80px");

Not sure why but i cant get this working:

grid.addColumn(TemplateRenderer.<ResultQuery>of("<iron-icon class='[[item.activeStatus]
]' icon='[[item.activeIcon]
]'> </iron-icon>")
.withProperty("activeStatus", c -> (boolean) c.getQueryResult()[5]
 ? "label-active-true" : "label-active-false")
.withProperty("activeIcon", c -> (boolean) c.getQueryResult()[5]
 ? "vaadin:check" : "vaadin:close"))
.setHeader("Active").setFlexGrow(0).setWidth("80px");

   
.label-active-true  {
    background-color: rgb(0,255,0);
    padding: 5px;
    border-radius: 30px;
}

.label-active-false {
    background-color: rgb(240,20,60);
    padding: 5px;
    border-radius: 30px;
    color: white;  
} 
 

Hi,

Does it worked if you add $. From class=‘[[item.activeStatus]
]’ to class$=‘[[item.activeStatus]
]’ ?

Hello,

yes it worked! Thanks for the help. Seems like $ is required for all CSS related issue.