Borderless Button with different color icon

Hi,

Please suggest how to display list of buttons with different color icons as shown in the attached picture.
The color if the icon is configurable in another screen with will be stored in the database. Also buttons can be keep adding and removing.

Best Regards,
Venkata Narayana
19947.png

Hi,

Your question is actually complex one, since you need to use couple of techniques to achieve the wanted results. There are also some alternative ways. Which one is the best is depending on the context. I will list briefly the elements needed to you.

In order to make buttons borderless, you need to do this via theme. Hence you need to give “stylename” for each button with setStyleName method. e.g. myButton.addStyleName(“my-button”) Via that stylename you can control border, color and number of other parameters of the button in the .xss file of the theme. Create new theme for your project. In our WiKi there is tutorial about themes “Valo theme - Getting started”. Check that in detail.

Here is complete reference of things you can customize, be careful. It is easy to get the theme messed up.

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

In your example picture the icon is simple dot. Easiest way to set that kind of icon in the button, is to use e.g. “circle” of FontAwesome and use that with setIcon method of the button. e.g. myButton.setIcon(FontAwesome.CIRCLE) If you want to use more complex icons, you can do that too. Then you need icon as graphics file, which you need to include into your webresources.

Button, like almost all other components has setVisible method. If you use myButton.setVisible(false), the button will disappear from the UI and you can turn it back on with myButton.setVisible(true).

Best regards
Tatu Lund

Hi Tatu Lund,

Thanks for your reply. I have achived it something like this. But not sure its right way or not. Please review and let me know if any other better approch is there. In future the number buttons will grow morethan 100.

VerticalLayout layout = new VerticalLayout();
List<T> itemList = getItems(); // get the list from DB 
for(final T item : itemList)
{
    Button btn = new Button(item.getName());
    btn.setIcon(FontAwesome.CIRCLE);
    btn.addStyleName(ValoTheme.BUTTON_BORDERLESS);
    // Add unique style name to every button using ID.
    btn.addStyleName("item-btn-color-" + item.getId() );
    // Add CSS script with the generated style name which sets the icon color.
    Page.getCurrent().getStyles().add(".v-app .item-btn-color-" + item.getId() + " .v-icon { color:" + item.getId() +";}");
}

Technically speaking your proposal may work. However, it is not recommended to modify theme on the fly as you suggest.

I understand your problem with large number of buttons. I would recommend to check if you could algorithmically build the styles for them with SASS functions in the stylesheet instead.

Hi,

I got the solution using captionAsHtml approch as given below.

String color = // Get from Database
String name = // Get from Database
Button button = new Button();
button.addStyleName(ValoTheme.BUTTON_BORDERLESS);
button.addStyleName(ValoTheme.BUTTON_TINY);
button.setCaptionAsHtml( true );
button.setCaption( "<span style=\'color: " + color + " !important;\'> " + FontAwesome.CIRCLE.getHtml()  + "</span>" + name );

Thanks,
Venkat