How can I put the differents functions of the script together in the same html page?

Question

I want to use the DIV to display my report, so i see the icCube documentation icCube Web Reporting : Displaying a Report but when i try to apply it i'm confused about how can I putting the differents functions of the script to gather in the same html page , those are the functions:

The first Part

var ic3reporting = new ic3.Reporting({
    noticesLevel: ic3.NoticeLevel.ERROR,
    dsSettings: {
        userName: "demo",
        userPassword: "demo",
        url: "http://localhost:8282/icCube/gvi"
    }
});

ic3reporting.setupGVIConfiguration(function() {
    ic3reporting.setupApplication({
        mode: ic3.MainReportMode.REPORTING,
        menu: ic3.MainReportMenuMode.OFF,
        noticesLevel: ic3.NoticeLevel.ERROR,
        container: $("#report-container")
    });

});

The Second Part

var options = {
    report: { name: 'My Report' },
    mode: ic3.MainReportMode.EDITING_REPORTING,
    menu: ic3.MainReportMenuMode.ON,
    noticesLevel: ic3.NoticeLevel.INFO
};

ic3reporting.openReport(options, function() {
    // your callback (I don't inderstand how can i putting this code)
});

I don't inderstand how can I put those parts to gather and It's very important for me to build this script , That make the exportation of the report easier than before.

score 1 · Accepted Answer · answered Apr 28 '16 at 10:18

You can use these parts together in such way:

<!doctype html>
<head lang="en">
    <meta charset="utf-8">
    <style>
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%
        }
    </style>
</head>
<body>
<!-- 1. Define container for the report somewhere in html page -->
<div id="report-container"></div>

<!-- 2. Include reporting application scripts -->
<script src="http://localhost:8282/icCube/doc/ic3-report/app/reporting/js/loader/ic3bootstrap.js"></script>

<!-- 3. Initialization sequence -->
<script type="text/javascript">
    var ic3root = "http://localhost:8282/icCube/doc/ic3-report/app/";
    var ic3rootLocal = "http://localhost:8282/icCube/doc/ic3-report/app-local/";
    // ic3reporting variable could be used globally, consider using array or different names here if
    // you are going to show multiple report applications at the same time
    var ic3reporting = null;

    var options = {
        root: ic3root,
        rootLocal: ic3rootLocal,

        // This function starts work just after initialization of reporting framework
        callback: function () {
            // 3.1 Create reporting instance with proper data source configuration
            ic3reporting = new ic3.Reporting({
                noticesLevel: ic3.NoticeLevel.ERROR,
                dsSettings: {
                    userName: "demo",
                    userPassword: "demo",
                    url: "http://localhost:8282/icCube/gvi"
                }
            });
            // 3.2 This function setups connection to the configured datasource and calls callback when connection is ready
            ic3reporting.setupGVIConfiguration(function () {
                // 3.3 Here we have ready connection, time to show empty reporting application
                var initialApplicationOptions = {
                    mode: ic3.MainReportMode.REPORTING,
                    menu: ic3.MainReportMenuMode.OFF,

                    noticesLevel: ic3.NoticeLevel.ERROR,

                    container: $("#report-container")
                };
                ic3reporting.setupApplication(initialApplicationOptions);

                // 3.4 just after setupApplication we have ready to work reporting environment, we can open reports, switch modes, etc
                // here we have open report sequence
                var options = {report: {name: 'My Report'}};
                ic3reporting.openReport(options, function () {
                    alert("Report opened successfully")
                });
            });
        }
    };
    ic3ready(options);
</script>
</body>
</html>

Baini.Marouane · Answer 2 · 2016-04-28T11:09:11.300

This is the correcte code

<html>
<head lang="en">
    <style>
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>

</head>
<body>

<!-- ic3 bootstrap javascript -->
<script src="http://localhost:8282/icCube/doc/ic3-report/app/reporting /js/loader/ic3bootstrap.js"></script>

<script type="text/javascript">

    /**
     * Location of the icCube reporting files; not necessarily co-located
     * with this HTML page. For example, assuming this file is located within
     * the "Docs" repository of a local icCube install, this path would be :
     *
     *            /icCube/doc/ic3-report/app/reporting/
     */



    var ic3root = "http://localhost:8282/icCube/doc/ic3-report/app/";
    var ic3rootLocal = "http://localhost:8282/icCube/doc/ic3-report/app-local/";

    var options = {

        root: ic3root,
        rootLocal: ic3rootLocal,

        callback: function () {
           var ic3reporting = new ic3.Reporting(
           {
              noticesLevel:ic3.NoticeLevel.ERROR,

             dsSettings:{
             userName:"demo",
             userPassword:"demo",
             url: "http://localhost:8282/icCube/gvi"
            }
           });

            ic3reporting.setupGVIConfiguration(function () {

          ic3reporting.setupApplication(
          {

           mode:ic3.MainReportMode.REPORTING,
           menu:ic3.MainReportMenuMode.OFF,

           noticesLevel:ic3.NoticeLevel.ERROR,

           container:$(".ic3-report-content-container")
           });

           var options = {

             report:{
                name:'rapportest'
              },

               mode:ic3.MainReportMode.EDITING_REPORTING,
               menu:ic3.MainReportMenuMode.OFF,

               noticesLevel:ic3.NoticeLevel.INFO

              };

              ic3reporting.openReport(options, function () {
                alert("Report opened successfully")
                });
          });        
        }
    };
    ic3ready(options);


</script>
<div class="ic3-report-content-container" style="border:solid 1px red;"></div>

Have you set correct name of the report instead of "My Report" => `var options = {report: {name: 'My Report'}};`? Also swap the `alert("Report opened successfully")` line with needed callback. — Artem Lopatiy, Apr 28 '16 at 11:01
I have an other need , i want to export this Chart to excel Using this div that i already worked with, Can you help about this , because this is my final goal is to export it to excel or to image but I don't find any solution for that — Baini.Marouane, Apr 28 '16 at 11:33
If you are talking about the report you can export it to pdf and then include it in your excel file. On the other hand if you mean some chart widget, use it's own export to image functionality. Please specify your question. — Artem Lopatiy, Apr 28 '16 at 14:19

How can I put the differents functions of the script together in the same html page?

2 Answers2