Visualize: Embed table view

Test plugins

by Yuriy Bablyukh

HTML

<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<!--Provide URL to visualize.js-->
<!--<script type='text/javascript' src="http://build-master.jaspersoft.com:7680/jrs-pro-feature-amber-adv/client/visualize.js?userLocale=en"></script>-->
<script type='text/javascript' src="http://localhost:8080/jasperserver-pro/client/visualize.js?_opt=false"></script>
<link rel="stylesheet" href="http://localhost:8080/jasperserver-pro/scripts/adhoc/api/css/adHocView.css" type="text/css" media="screen">
<!--Provide container to render your visualization-->
<button id="pTest">Test</button>
<div id="container">
    <div id="table"></div>
    <div id="typeChooser"></div>
    <div id="filterPanels"></div>
</div>

CSS

.control {
    display: block;
}
.control.input.text > .wrap {
    display:block;
}
.control > input {
    width: 360px;
}
.error, .logout {
    color: red;
}
.success {
    color: green;
}
.message {
    display: none;
}
#properties {
    margin-left: 10px;
    width: 350px;
    margin-left: 10px !important;
}
#typeChooser {
    width: 350px;
    margin-bottom: 10px;
    margin-left: 5px;
}
#chart {
    height: 500px;
    margin-bottom: 40px;
    position: relative;
    margin-left: 5px;
}
#filterPanels {
    margin-top: 10px;
    width: 460px;
}
#table {
    width: 800px;
}
.control.checkBox input {
    position:relative !important;
}

JavaScript

visualize({
    auth: {
        name: "jasperadmin",
        password: "jasperadmin",
        organization: "organization_1"
    }
}, function (v) {
    var adv = v.adHocView({
        server: "http://192.168.1.28:8080/jasperserver-pro",
        container: "#container",
        resource: "/Table2",
        table: {
            layout: {
                container: "#table",
                modeChooser: '#typeChooser'
            },

        },
        filters: "#filterPanels",
        error: handleError
    });

    function handleError(err) {
        console.log("Error");
        alert(err.message);
    };

    jQuery("#pTest").click(function () {
        console.log(adv.components.filters.getComplexExpression());
        
        adv.run();
        console.log(adv.components.filters.getComplexExpression());

    });

});