JSFiddle - React, Tailwind, and code Playground

by Yuriy Bablyukh

HTML

<script type='text/javascript' src="http://build-master.jaspersoft.com:8180/jrs-pro-feature-embedded-ic/client/visualize.js"></script>

<div id="container"></div>
<div id="filters"></div>

CSS

#container {
    width:200px;
}

JavaScript

visualize({
    auth: {
        name: "superuser",
        password: "superuser"
    }
}, function (v) {
    
    var _report="/organizations/organization_1/my/Reports/single/with_default/not_mandatory/pop_up/Cascading_multi_select_report_country_single";
    
    var rep=v.report({
         container: "#container",   
         resource:_report,
        error: function (err) {
            alert(err);
        },
    });
    
    var controls= v.inputControls({
        container: "#filters",
        resource: _report,
        error: function (err) {
            console.log(err);
        },
        events: {
            change : function(state,validationResult) {
            
            	 if (validationResult) {
                console.log("validation errors: ");
                console.log(validationResult);
            } else {
                    console.log(state);
                    rep.params(state).run();
            }
              
                 
            }
        }
    });
});