Show entity icons on tab and fields

Support
#1

For a improved usability I want to associate an icon with every entity (e.g. car icon for cars) and display it in the web gui. I want to use the font awesome icons as described here.

Is it somehow possible to

  1. Display the entity icon on the tab that lists or edits the entity
  2. Display the entity icon on fields that link to that related entity (in list or editor)

E.g. by unwrapping the components like described in the “styled-checkbox” example?

Tab with icon

#2

Hi Stefan,

For now CUBA does not have this functionality, but you can add icons using Vaadin API:


import com.haulmont.cuba.gui.components.AbstractWindow;
import com.vaadin.server.FontAwesome;
import com.vaadin.ui.TabSheet;

public class Screen extends AbstractWindow {
    @Override
    public void ready() {
        super.ready();

        // find tab with current Window
        com.vaadin.ui.Component windowComponent = this.frame.unwrap(com.vaadin.ui.Component.class);
        while (windowComponent.getParent() != null && !(windowComponent.getParent() instanceof TabSheet)) {
            windowComponent = windowComponent.getParent();
        }

        if (windowComponent.getParent() instanceof TabSheet) {
            TabSheet tabSheet = (TabSheet) windowComponent.getParent();
            TabSheet.Tab tab = tabSheet.getTab(windowComponent);

            // add icon
            tab.setIcon(FontAwesome.CAR);

            // remove icon after window close
            addCloseListener(actionId ->
                    tab.setIcon(null)
            );
        }
    }
}

I’ve attached sample project so you can try it in action.

This approach is a bit tricky so we are planning to provide CUBA API to assign icons for Window from XML and at run time.

If you want to display Icon for an input Field you can use setIcon method of a Field (TextField, PickerField, etc) or you can add a Label with icon to the right of the field.

tab-icon.zip (22.5K)

#3

Thanks a lot for this example. It helped me a lot.

I created e.g. now my own base class for an AbstractEditor which sets an icon and the InstanceName as caption instead of the generic message text. Maybe this would also be a good CUBA product feature :slight_smile: ?

#4

We are planning to add icon attribute to a Window definition in XML, so you will be able to set it even from Studio