/
Editing a Dashboard in the Designer using JavaScript.php
66 lines (56 loc) · 2.64 KB
/
Editing a Dashboard in the Designer using JavaScript.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<?php
require_once 'vendor/autoload.php';
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>Editing a Dashboard in the Designer</title>
<style>
html, body {
font-family: sans-serif;
}
</style>
<!-- Adding JavaScript code required for the designer to work -->
<script src="vendor/stimulsoft/reports-php/scripts/stimulsoft.reports.js" type="text/javascript"></script>
<script src="vendor/stimulsoft/dashboards-php/scripts/stimulsoft.dashboards.js" type="text/javascript"></script>
<script src="vendor/stimulsoft/reports-php/scripts/stimulsoft.viewer.js" type="text/javascript"></script>
<script src="vendor/stimulsoft/reports-php/scripts/stimulsoft.designer.js" type="text/javascript"></script>
<script src="vendor/stimulsoft/reports-php/scripts/stimulsoft.blockly.editor.js" type="text/javascript"></script>
<script type="text/javascript">
<?php
// Creating and configuring an event handler object
// By default, the event handler sends all requests to the 'handler.php' file
$handler = new \Stimulsoft\StiHandler();
// Rendering the JavaScript code necessary for the event handler to work
$handler->renderHtml();
?>
// Creating and configuring the designer options object
let options = new Stimulsoft.Designer.StiDesignerOptions();
options.appearance.fullScreenMode = true;
// Creating the designer object with the necessary options
let designer = new Stimulsoft.Designer.StiDesigner(options, "StiDesigner", false);
// Defining designer events
// This event will be triggered when requesting data for a report
// To process the result on the server-side, you need to call the JavaScript event handler in the event
designer.onBeginProcessData = function (args, callback) {
Stimulsoft.Helper.process(args, callback);
}
// Creating the report object
let report = new Stimulsoft.Report.StiReport();
// Loading a dashboard by URL
report.loadFile("reports/Christmas.mrt");
// Assigning a report object to the designer
designer.report = report;
function onLoad() {
// Rendering the necessary JavaScript code and visual HTML part of the designer
// The rendered code will be placed inside the specified HTML element
designer.renderHtml("designerContent");
}
</script>
</head>
<body onload="onLoad();">
<div id="designerContent"></div>
</body>
</html>