JSFiddle - React, Tailwind, and code Playground

by Pavel Savushchyk

HTML

<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="http://build-master.jaspersoft.com:7980/jrs-pro-bugfix/client/visualize.js?_opt=false"></script>
<button id="button" disabled>Export</button>
<!--Provide container to render your visualization-->
<div id="container"></div>

JavaScript

visualize({
    auth: {
        name: "jasperadmin",
        password: "jasperadmin",
        organization: "organization_1"
    }
}, function (v) {
    //add custom export format
    //(should throw a proper error)
    var reportExports =  v.report
                    .exportFormats
                    .concat(["json"]);
        $select = buildControl("Export to: ",reportExports),
        $button = $("#button"),
        report = v.report({
            resource: "/public/Samples/Reports/5g.AccountsReport",
            container: "#container",

            success: function () {
                button.removeAttribute("disabled");
            },

            error: function (error) {
                console.log(error);
            }
        });

    $button.click(function () {
        
        console.log($select.val());
        
        report.export({
            //export options here        
            outputFormat: $select.val(),
            //exports all pages if not specified
            //pages: "1-2"
        }, function (link) {
           var url = link.href ? link.href : link;
           window.location.href = url;
        }, function (error) {
            console.log(error);
        });
    });

    function buildControl(name, options) {

        function buildOptions(options) {
            var template = "<option>{value}</option>";
            return options.reduce(function (memo, option) {
                return memo + template.replace("{value}", option);
            }, "")
        }

        var template = "<label>{label}</label><select>{options}</select><br>",
            content = template.replace("{label}", name)
                .replace("{options}", buildOptions(options));

        var $control = $(content);
        $control.insertBefore($("#button"));
        //return select
        return $($control[1]);
    }

});