Disply a custom column as html

Support
#1

I have a simple boolean column. My current task is to disply instead of the standard checkbox that CUBA Platform provides a red or a green circle (or anything similar)

In order to do so I created a Formatter as follows (simplified)

package com.company.myproject;

import java.util.function.Function;

public class BooleanFormatter implements Function<Boolean, String> {

    @Override
    public String apply(Boolean booleanValue) {
        return booleanValue ? "<strong>yes</strong>" : "<small>no</small>";
    }

    @Override
    public Function compose(Function before) {
        return null;
    }

    @Override
    public Function andThen(Function after) {
        return null;
    }
}

And then I assign the Formatter to my column in the screen as follow

                 <column id="active">
                    <formatter class="com.company.myproject.BooleanFormatter" />
                </column>

The content then is displayed as text instead of html
image

How can I display it as html, what am I missing here?

#2

I managed to get it working in a dataGrid, but not in dataTable. They both seem similar,but perhaps dataGrid has more options

image

#3

On a similar note: How would I use the Fontawesome Icons dynamically in my custom column?

   @Override
   public String apply(Boolean booleanValue) {
       return booleanValue
               ? this.createFontAwesomeIcon("book")
               : this.createFontAwesomeIcon("user");
   }

   private String createFontAwesomeIcon(String icon) {
       return "<i class=\"fa fa-" + icon + "\" aria-hidden=\"true\"></i>";
   }

This unfortunately doesn’t work…

#4

Hi,
Instead of the formatter, you should use custom column generator.
Generate Label as cell component and set htmlEnabled="true" for it.
See more example of HTML content in Label here: Label - CUBA Platform. Developer’s Manual

#5

That looks much easier. However, how can I access the ID of the column, so I can reuse the generator?
image

    public Component generateDefaultColumnCell(EmailDomain entity){
        Label<String> label = uiComponents.create(Label.TYPE_STRING);
        label.setHtmlEnabled(true);
        //label.setValue("<strong>" + entity.getValue(label.getId()) + "</strong>");
        label.setValue("<strong>" + label.getId() + "</strong>");
        return label;
    }
#6

Just generate two separate column generators and extract common logic into some method.

#7

So there is no way to access this id? We are not talking about 2 columns, but rather all columns of a table… up to perhaps 20 in some cases

#8

You can also use programmatic method: Table#addGeneratedColumn()
Then the code will be more compact.

    /**
     * Add a generated column to the table.
     *
     * @param columnId  column identifier as defined in XML descriptor. May or may not correspond to an entity property.
     * @param generator column generator instance
     */
    void addGeneratedColumn(String columnId, ColumnGenerator<? super E> generator);
#9

Thanks @albudarov, I will keep that in mind… I can’t test / implement this in the near future, as I’m working on other issues atm… But I will get back to that.