IcCube Reporting V8 - How to add a (some) CSS class(es) to a widget?

Question

In IcCube reporting V7, I used a lot the functionality to add a or some class(es) to a widget which allowed me mainly to display or hide other widgets based on data selected or not. for example, show the map widget related only if at least one company is selected.

Add a CSS Class in V7 was easy like this : Select General, then Advanced properties, and input a class name :

Then, from the report's JS code, I could manage what I need, as for example :

if (event.name == 'EtabSelected') {
        var $report = context.$report;
        var $mapVisible = $report.find(".map-visible");
        if (event.value.classID === "viz.event.EmptySelectionEvent")
        {
            $mapVisible.hide();
        }
        else
        {
        $mapVisible.show();
        }
    }...

Is it possible to do that in V8 ?

Also, being able to override a style at widget level was also very handy, is it also still possible ?

Answer 1

Hiding/showing widgets based on an event is possible in V8.

For example, if I have a report with buttons to select an article, and I only want to show widgets based on the value of my button filter, then I can use this code.

if (context.getEventName(event) === "selProduct") {

    const eventValue = context.getEventMdx(event);

    if (eventValue === "[Product].[Article].[Article].&[2]") {

        // Hide ww0 (area chart) and show ww2 (column chart)
        context.getWidget$("ww0").css('visibility', 'hidden')
        context.getWidget$("ww2").css('visibility', 'visible')

    } else {

        // Hide ww2 (column chart) and show ww0 (area chart)
        context.getWidget$("ww0").css('visibility', 'visible')
        context.getWidget$("ww2").css('visibility', 'hidden')

    }

}

You can set this option in Dashboard Settings > Javascript > onNewEvent. See the screenshot below.