// Visualize: UI for Login/Logout (5.6) visualize( function(v){ $("#selected_resource").change(function () { $("#container").html(""); createReport($("#selected_resource").val(), v); }); $("#login").click(function(){ v.login(getAuthData()).done(function(){ createReport($("#selected_resource").val(),v); showMessage(".success"); }).fail(function(){showMessage(".error");}); }); $("#logout").click(function(){ v.logout().done(function(){showMessage(".logout");}); }); $(':disabled').prop('disabled', false); } ); //create and render report to specific container function createReport(uri, v) { v("#container").report({ resource: uri, error: function (err) { alert(err.message); } }); }; function showMessage(selector){ $(".message").hide(); $(selector).show(); }; function getAuthData(){ return {name: $("#j_username").val(), password: $("#j_password").val(), organization:$("#orgId").val(), locale:$("#userLocale").val(), timezone:$("#userTimezone").val() } };
<!-- Visualize: UI for Login/Logout (5.6) --> <script type='text/javascript' src="http://code.jquery.com/jquery-2.1.0.js"></script> <script type='text/javascript' src="http://localhost:8080/jasperserver-pro/client/visualize.js"></script> <div> <label class="control input text hidden" accesskey="o" for="orgId"> <span class="wrap">Organization :</span> <input id="orgId" name="orgId" type="text" autocapitalize="off"/> </label> <label class="control input text" for="j_username"> <span class="wrap">User ID:</span> <input id="j_username" name="j_username" type="text" autocapitalize="off"/> </label> <label class="control input password" for="j_password"> <span class="wrap">Password:</span> <input class="" id="j_password" name="j_password" type="password"/> </label> <label class="control select" for="userLocale"> <span class="wrap">Locale:</span> <select id="userLocale" name="userLocale"> <option value="en" selected="">en</option> <option value="de">de</option> <option value="es">es</option> <option value="fr">fr</option> <option value="it">it</option> <option value="ja">ja</option> <option value="pt_BR">pt_BR</option> <option value="zh_CN">zh_CN</option> </select> </label> <label class="control select" for="userTimezone">Time Zone: <select id="userTimezone" name="userTimezone"> <option value="Europe/Helsinki" selected="">Europe/Helsinki - Eastern European Time</option> <option value="America/Los_Angeles">America/Los_Angeles - Pacific Standard Time</option> <option value="America/Denver">America/Denver - Mountain Standard Time</option> <option value="America/Chicago">America/Chicago - Central Standard Time</option> <option value="America/New_York">America/New_York - Eastern Standard Time</option> <option value="Europe/London">Europe/London - Greenwich Mean Time</option> <option value="Europe/Berlin">Europe/Berlin - Central European Time</option> <option value="Europe/Bucharest">Europe/Bucharest - Eastern European Time</option> </select> </label> <button id="login">Login</button> <button id="logout">Logout</button> <span class="message error">Authentication Error</span> <span class="message success">Logged in</span> <span class="message logout">Logged out</span> </div> <select id="selected_resource" name="report"> <option value="/public/Samples/Reports/1._Geographic_Results_by_Segment_Report">1._Geographic_Results_by_Segment_Report</option> <option value="/public/Samples/Reports/2_Sales_Mix_by_Demographic_Report">2_Sales_Mix_by_Demographic_Report</option> <option value="/public/Samples/Reports/3_Store_Segment_Performance_Report">3_Store_Segment_Performance_Report</option> <option value="/public/Samples/Reports/04._Product_Results_by_Store_Type_Report">04._Product_Results_by_Store_Type_Report</option> <option value="/public/Samples/Reports/AllAccounts">AllAccounts</option> <option value="/public/Samples/Reports/5g.AccountsReport">5g.AccountsReport</option> <option value="/public/Samples/Reports/06g.ProfitDetailReport">06g.ProfitDetailReport</option> <option value="/public/Samples/Reports/ProfitDetailReport">ProfitDetailReport</option> <option value="/public/Samples/Reports/07g.RevenueDetailReport">07g.RevenueDetailReport</option> <option selected="selected" value="/public/Samples/Reports/RevenueDetailReport">RevenueDetailReport</option> <option value="/public/Samples/Reports/08g.UnitSalesDetailReport">08g.UnitSalesDetailReport</option> <option value="/public/Samples/Reports/08.UnitSalesDetailReport">08.UnitSalesDetailReport</option> <option value="/public/Samples/Reports/9.CustomerDetailReport">9.CustomerDetailReport</option> <option value="/public/Samples/Reports/9g.CustomerDetailReport">9g.CustomerDetailReport</option> <option value="/public/Samples/Reports/10g.PerformanceByStoreType">10g.PerformanceByStoreType</option> <option value="/public/Samples/Reports/State_Performance">State_Performance</option> <option value="/public/Samples/Reports/11g.SalesByMonthReport">11g.SalesByMonthReport</option> <option value="/public/Samples/Reports/SalesByMonthReport">SalesByMonthReport</option> <option value="/public/Samples/Reports/12g.PromotionDetailsReport">/public/Samples/Reports/12g.PromotionDetailsReport</option> <option value="/public/Samples/Reports/PromotionDetailsReport">PromotionDetailsReport</option> <option value="/public/Samples/Reports/13g.TopFivesReport">13g.TopFivesReport</option> <option value="/public/Samples/Reports/14.PerformanceSummary">14.PerformanceSummary (including fusion chart)</option> </select> <!--Provide container to render your visualization--> <div id="container"></div>
.control { display: block; } .control.input.text > .wrap { display:block; } .control.input.password > .wrap { display:block; } .error, .logout{ color: red; } .success{ color: green; } .message{ display: none; }