Using dynamic attributes in view (scss)

Support
,
#1

Hello, i’m working on a grouptable, which indicates some process progress. is there a way to make a cell look like a progress bar?
What i came to so far is

table.setStyleProvider(new Table.StyleProvider<MyEntity>() {
    //... standard things
    if (entity.getProgress() == 0.5)
        return "some-color";
    return null;
});`

and code in styles.scss:

.some-color {
    -linear-gradient(to right, green 49%, white 50%);
}

which brings me to a good progress bar emulation but without any dynamics cos i have no idea how to paramtrize the precentage in scss. Is there any common components or ways to achieve such a behavior in CUBA?

#3

Hi, Ivan!

Take a look at ProgressBar component in the documentation. You can add a generator method to the column with progress property and create ProgressBar with a value from an entity.
For instance:

<column id="progress"
        generator="progressCell"/>

And code in the controller:

@Inject
private ComponentsFactory factory;
...
public Component progressCell(Customer customer) {
    ProgressBar progressBar = factory.createComponent(ProgressBar.class);
    progressBar.setWidth("100%");
    progressBar.setValue(customer.getProgress());
    return progressBar;
}
1 Like
#4

Also, you can use SCSS solution. You just need to generate styles for progress values. Using @each, we can iterate all values from the list. The following code will generate styles: “progress-style-10”, “progress-style-20” etc.

$progress: 10 20 30 40 50 60 70 80 90 100;

@each $value in $progress {
   .progress-style-#{$value} {
     $valueLeft: $value + 0%;
     $valueRight: $value + 10%;

     @include linear-gradient(to right, green $valueLeft, white $valueRight);
   }
}

And in the controller, we can add style to the certain cell:

customersTable.setStyleProvider((entity, property) -> {
    if ("progress".equals(property)) {
        if (entity.getProgress() % 100 == 0) {
            return "progress-style-" + entity.getProgress();
        } else {
            return "progress-style-" + entity.getProgress() % 100;
        }
    }
    return null;
});
1 Like
#5

which of the ways is preferrable/customizable? how could i (for example) change progressBar’s color, or make it fill the cell of a table?

#6

To customize ProgressBar you should override its styles (you can see them in the dev tools in your browser). SCSS solution is more light-weight because it doesn’t create an additional component that complicates the DOM tree.