Shadow Frame

by NesterOne

HTML

<script src="http://localhost:8080/jasperserver-pro/scripts/jasper.js"></script>
<div>
     <h2>Third-Party Header</h2>

    <textarea>Third Party Text</textarea>
</div>

<div  id='report'></div>

CSS

/* the selector user specified to style his own reports */

/* #body #page .container .report {
    display: inline-block;
    min-width: 80px;
    min-height: 80px;
    padding: 20px;
    background-color: blue;
} */

/* The selector we added for visualize's reports */

 #report textarea {
    background-color: yellow;
    font-size: 50;
}

JavaScript

var jrs = jasper({
    url: "http://localhost:8080/jasperserver-pro",
    scripts: "scripts"
});

var content =  "<div class='jrs'><h2 class='jrs'>Third-Party Header</h2><textarea class='jrs'>Third Party Text</textarea></div>";
       

jrs(["jquery","common/component/frame/ShadowFrameView"], function ($, FrameView) {

    console.log(FrameView);
    
    var frame = new FrameView();
    
    frame.add($(content));
    
    $('#report').html(frame.$el);
    
});