Visualize: render input controls

All types

HTML

<!--Provide URL to visualize.js-->
<script src="https://mobiledemo.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>
<!--<script type='text/javascript' src="http://localhost:8080/jrs/client/visualize.js"></script>-->
<!--Provide container to render your visualization-->
<div id="container"></div>

JavaScript

visualize({   
    auth: {
        name: "joeuser",
        password: "joeuser"
    }
},function(v) {
    
    v.inputControls({
        resource: "/public/Samples/Reports/9g.CustomerDetailReport",
        success: function (controls) {
            controls.forEach(buildControl);
        },
        error: function (err) {
            alert(err);
        }
    });
    
    function buildControl(control) {

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

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

        $("#container").append($(content));
    }
    
});