Using Stimulsoft Reports.JS in Oracle APEX

The idea and copyright comes from stimulsoft GitHub .You can visit stimulsoft GitHub repository via this link https://github.com/stimulsoft/Samples-JS/tree/master/JavaScript for more information and  complete documentation.

Stimulsoft Reports.JS builds reports using only JavaScript and HTML5. It can be used in any JavaScript application. This significantly expands the list of supported devices from desktop computers to mobile devices. You can visit stimulsoft.com/en/products/reports-js to find more information about this tools.
For this blog I create a report  file of type JSON data source in advance via Stimulsoft report designer.

First of all, we should  associate some static files(one CSS,three JavaScript  and one report file) with our application.

Download JS files via github.com/stimulsoft/Samples-JS/tree/master/JavaScript/scripts
Download CSS file via github.com/stimulsoft/Samples-JS/tree/master/JavaScript/css
Download report file via emp.mrt
Now do something in oracle APEX Page.
This sample has one page for loading our Stimulsoft reports.

Add a process of type AJAX callback to manipulating data in JSON format, which in my case is called “prc_get_data” and place the following PL/SQL code in its source :

DECLARE

   pData_length   NUMBER := NULL;

   l_cur          SYS_REFCURSOR;

BEGIN

   OPEN l_cur FOR

      SELECT   EMPNO,

               ENAME,

               JOB,

               SAL

        FROM   EMP;

   APEX_JSON.INITIALIZE_CLOB_OUTPUT;

   APEX_JSON.OPEN_OBJECT;

   APEX_JSON.WRITE ('EMP', l_cur);

   APEX_JSON.CLOSE_OBJECT;

   pData_length := LENGTH (APEX_JSON.GET_CLOB_OUTPUT);

 

   FOR s IN 0 .. TRUNC (pData_length / 30000) + 1

   LOOP

      HTP.p (SUBSTR (APEX_JSON.GET_CLOB_OUTPUT, (s * 30000) + 1, 30000));

   END LOOP;

The next step is creating a region of type Static Content to load stimulsoft report viewer and set a "Static ID" for example " viewerContent "

 

Add below  URL and JavaScript codes on page level 

JavaScripts File Urls:


#APP_IMAGES#stimulsoft.reports.js
#APP_IMAGES#stimulsoft.viewer.js
#APP_IMAGES#stimulsoft.designer.js

Function and Global Variable Declaration: 

function PrintFunc() {

    var options = new Stimulsoft.Viewer.StiViewerOptions();

    options.height = "100%";

    options.appearance.scrollbarsMode = true;

    options.toolbar.printDestination = Stimulsoft.Viewer.StiPrintDestination.Direct;

    options.appearance.htmlRenderMode = Stimulsoft.Report.Export.StiHtmlExportMode.Table;

    options.exports.showExportDialog = false;

    setTimeout(function() {

        apex.server.process(

            'prc_get_data', {

                x01: 1

            }, {

                dataType: 'text',

                success: function(pData) {

                    // Create a new report instance

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

                    report.loadFile('#APP_IMAGES#emp.mrt');

                    report.dictionary.databases.clear();

                    var dataSet = new Stimulsoft.System.Data.DataSet("test");

                    // preserve newlines, etc - use valid JSON

                    pData = pData.replace(/\\n/g, "\\n")

                        .replace(/\\'/g, "\\'")

                        .replace(/\\"/g, '\\"')

                        .replace(/\\&/g, "\\&")

                        .replace(/\\r/g, "\\r")

                        .replace(/\\t/g, "\\t")

                        .replace(/\\b/g, "\\b")

                        .replace(/\\f/g, "\\f");

                    // remove non-printable and other non-valid JSON chars

                    pData = pData.replace(/[\u0000-\u0019]+/g, "");

                    var obj = JSON.parse(pData.trim());

                    dataSet.readJson(JSON.stringify(obj));

                    report.regData("test", "test", dataSet);

                    // Create an instance of the viewer

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

                    // Forcibly show process indicator

                    viewer.showProcessIndicator();

                    viewer.renderHtml("viewerContent");

                    // Assign the report to the viewer

                    viewer.report = report;

                },

                error: function(xhr, ajaxOptions, thrownError) {

                    //apex.message.alert("Error\n" + thrownError, function(){});

                }

            }

        );

    }, 50);

}

In the above code, you must replace "prc_get_data"  with the name that you chose for your AJAX callback process and replace "emp.mrt" with the name that you chose for your report file name.

Execute when Page Loads:
PrintFunc();

Now add below URL and CSS codes on page level

File URLs:

#APP_IMAGES#stimulsoft.viewer.office2013.whiteblue.css

Inline:

.viewerContent,.container {

   height: 100% !important;

}

.stiJsViewerReportPanel {

   position: static !important;

}

.stiJsViewerReportPanel table {

   direction: ltr !important;
}

Now, run your application.I hope you enjoyed reading this blog post.