Embedding JReport into Your Application with JavaScript APIs

With the JavaScript APIs provided by JReport, you can successfully embed page reports, web reports, and dashboards into your own application and then perform actions outside the report template. The implemented JavaScript APIs in external applications can be applied to open, close, export, print, navigate, refresh and save reports and dashboards without using Page Report Studio, Web Report Studio, or JDashboard.

Supported operations for page report and web report

Supported operations for dashboards

Demos

JReport Server provides two demos in the <install_root>\public_html\webos\app\demo folder:

To run the demos:

  1. Start your JReport Server and then open a demo file.
  2. In the displayed web page, click the Open xxx option on the left menu to load the specified report or dashboards as customized in the API.

    For the dashboard demo, two dashboards are opened and their names are shown above the dashboard body. You can click the names to switch between the two dashboards.

  3. Use the left menu to perform actions on the report or dashboards.
  4. If the report or dashboards has defined web controls such as filter control and custom control, they can also work.
  5. If there are links in the report or dashboards, after you click a link, a link path is displayed above the report body or dashboard body. You can then use the link path to go back to the previous step.

As for the detailed JavaScript APIs and methods of each API that JReport provides, refer to the API documentation in the <install_root>\help\javascriptapi folder.

Specifying parameters

You can use the following codes to set parameter values when implementing JavaScript APIs:

params = {
"paramater1":"value1",
"paramater2":"value2"
};

When there are more than one report or dashboard embedded in one application, you can specify parameters for a specific report or dashboard. See the following example for a page report:

thi$.openPageReport = function(entryId){

var params1 = {
"p_Cascading-Country":"Australia",
"p_Cascading-State":"New South Wales",
"p_Cascading-City":"Sydney"
};

var app = Factory.runReport(
server, prptRes, catRes, params1, entryId);

};

Single sign on support

When you use the JavaScript APIs to embed page reports, web reports, or dashboards in a single sign on environment, you should specify the authorized user in your code. The following shows how to specify a user for single sign on as compared to normal login.

For common login, user name and password are set as:

user: "admin",
pass: "admin",

See the following example:

        var server = {
        url: "http://localhost:8888/jinfonet/tryView.jsp",
        user: "admin",
        pass: "admin",

        jrd_prefer:{
            // For page report
            pagestudio:{
                feature_UserInfoBar:false,
                feature_ToolBar: false,
                feature_Toolbox: false,
                feature_DSOTree: false,
                feature_TOCTree: false,
                feature_PopupMenu: false,
                feature_ADHOC: false
            },
            
            // For web report
            wrptstudio:{
                viewMode:{
                    hasToolbar: false,
                    hasSideArea: false
                }
            }
        },
        jrd_studio_mode: "view",
        "jrs.param_page": true
    },

For single sign on, use authorized_user:"user_name" to specify the authorized user as follows:

        var server = {
        url: "http://localhost:8888/jinfonet/tryView.jsp",
        authorized_user:"admin",
        jrd_prefer:{
            // For page report
            pagestudio:{
                feature_UserInfoBar:false,
                feature_ToolBar: false,
                feature_Toolbox: false,
                feature_DSOTree: false,
                feature_TOCTree: false,
                feature_PopupMenu: false,
                feature_ADHOC: false
            },
            
            // For web report
            wrptstudio:{
                viewMode:{
                    hasToolbar: false,
                    hasSideArea: false
                }
            }
        },
        jrd_studio_mode: "view",
        "jrs.param_page": true
    },