This example shows how to install and run Stimulsoft JS for Browser. Also, you can find more samples Reports.JS and Dashboards.JS on the GitHub.

 

Step 1: Open your html file in editor. For example, index.html.

 

Step 2: Add reference to viewer CSS file in HTML head:

 

index.html

...

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>JS Project</title>

 

<link href="https://unpkg.com/stimulsoft-dashboards-js/Css/stimulsoft.viewer.Office2022.whiteblue.css" rel="stylesheet"/>

 

//Also, you must to specify designer css file link, if you need to use js designer

<link href="https://unpkg.com/stimulsoft-dashboards-js/Css/stimulsoft.designer.Office2022.whiteblue.css" rel="stylesheet"/>

</head>

</html>

...

 

 

Step 3: Add the references to stimulsoft js scripts in HTML head.

 

index.html

...

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>JS Project</title>

 

<link href="https://unpkg.com/stimulsoft-dashboards-js/Css/stimulsoft.viewer.Office2022.whiteblue.css" rel="stylesheet"/>

 

//Also, you must to specify designer css file link, if you need to use js designer

<link href="https://unpkg.com/stimulsoft-dashboards-js/Css/stimulsoft.designer.Office2022.whiteblue.css" rel="stylesheet"/>

 

<script src="https://unpkg.com/stimulsoft-reports-js/Scripts/stimulsoft.reports.js" type="text/javascript"></script>

 

//Also, you must to specify dashboard script link, if you need to use dashboards

<script src="https://unpkg.com/stimulsoft-dashboards-js/Scripts/stimulsoft.dashboards.js" type="text/javascript"></script>

<script src="https://unpkg.com/stimulsoft-reports-js/Scripts/stimulsoft.viewer.js" type="text/javascript"></script>

 

//Also, you must to specify designer script link, if you need to use js designer

<script src="https://unpkg.com/stimulsoft-reports-js/Scripts/stimulsoft.designer.js" type="text/javascript"></script>

</head>

</html>

...

 

Information

 

It is important to follow the order in which scripts are connected:

The stimulsoft.reports.js script should be the first;
The stimulsoft.viewer.js script must be earlier than stimulsoft.designer.js script.

 

 

 

Step 4: Create the onLoad() function and a new viewer, if you want to show report or dashboard.

 

index.html

...

<script type="text/javascript">

function onLoad(){

// Create the report viewer with default options

var viewer = new Stimulsoft.Viewer.StiViewer(null, "StiViewer", false);

 

// Show the report viewer in div content

viewer.renderHtml("content");

}

</script>

...

//Call function onLoad() and put viewer in <div>.

<body onLoad="onLoad()">

<div id="content">Component should be here</div>

</body>

...

 

 

Step 5: Create a new report object, load a report template file in it, and assign report object to the report viewer.

 

index.html

...

<script type="text/javascript">

function onLoad(){

...

// Create a new report object

var report = new Stimulsoft.Report.StiReport();

 

// Load report template in the report object

report.loadFile("report url");

 

// Assign report object to report viewer

viewer.report = report;

...

}

</script>

...

 

 

Step 6: Create the onLoad() function and a new designer, if you want to create or edit report or dashboard.

 

index.html

...

<script type="text/javascript">

function onLoad(){

// Create the report designer with default options

var designer = new Stimulsoft.Designer.StiDesigner(null, "Designer", false);

 

// Show the report designer in div content

designer.renderHtml("content");

 

// Create a new report object

var report = new Stimulsoft.Report.StiReport();

 

// Load report template in the report object

report.loadFile("report url");

 

// Assign report object to report designer

designer.report = report;

}

</script>

...

//Call function onLoad() and put designer in <div>.

<body onLoad="onLoad()">

<div id="content">Component should be here</div>

</body>

...

 

 

Step 7: Save changes and open index.html file in browser.