Integrate Helical Insight in Web-Application using iFrame

There are various methods of integrating Helical Insight. One of the methods is using iFrame which we would be discussing here.

Following are the steps to achieve :

  1. Create a report or dashboard using Helical Insight which you want to integrate
  2. Right click on the report or dashboard and open it in a new window. This way you will be able to get the URL specific to that report or dashboard.

    3.  

    Upto HelicalInsight v4.1GA

    dashboard-url

    HI v5.0 Onwards

    dashboard-url

  3. Create a dummy user or use an already existing user for integration purpose.
  4. Assuming dashboard to integrate, for this required folder/s, reports, metadata and dashboard has to be shared with that user. How to share file with a user clickhere
  5. Once the required files are shared with the user then it will be in read only mode (dummy user cannot make any changes in the reports / dashboards)
  6. For integration, an iframe code has to be included in application or web page. In that iFrame, pass the URL of the report or dashboard along with passing the username as well as password as indicated below.

iframe code : 


Upto HelicalInsight v4.1GA

<iframe id="helicalinsight-report-frame" src="https://applicationHost.com:8085/hi-ee/hi.html?dir=Travel_Dashboard&file=travel_dashboard.efw&mode=dashboard&j_organization=organization_name&j_username=user_name&j_password=login_password" style="height: 100%;width:100%;border:0px;" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>
</iframe>

HI v5.0 Onwards

<iframe id="helicalinsight-report-frame" src="https://applicationHost.com:8085/hi-ee/#/report-viewer?dir=Travel_Dashboard&file=travel_dashboard.efwdd&mode=dashboard&j_organization=organization_name&j_username=user_name&j_password=login_password" style="height: 100%;width:100%;border:0px;" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>
</iframe>

Whereas,
iframe id : any unique name can be assigned
src (source) : It includes combination of source URL where Helical insight is installed, organization name, user name, user password, dashboard path and dashboard filename.
http://applicationHost.com:8085/hi-ee/hi.html : It is the baseURL of the application until version 4.1GA and port number on which application is running. http://applicationHost.com:8085/hi-ee/#/report-viewer: It is the baseURL of the application version 5.0 onwards and port number on which application is running.

Upto HelicalInsight v4.1GA

url

HI v5.0 Onwards

url

dir=Travel_Dashboard : It shows the directory name. In this case directory name is Travel_Dashboard.
file=travel_dashboard.efw : If you are using Helical Insight version 4.1 GA or older. It shows the dashboard file name and the extension used is “.efw”. In this case, file name is travel_dashboard.efw.
file=travel_dashboard.efwdd : For Helical Insight version 5.0 onwards, It shows the dashboard file name and the extension used is “.efwdd”. In this case, file name is travel_dashboard.efwdd.
mode=dashboard: mode parameter holds report type. If report is dashboard then mode=dashboard and if report is adhoc report then mode=report
j_organization=organization_name : j_organization parameter holds organization name. If organization is not present (login through superadmin) no need to pass this parameter. j_username=user_name j_username parameter holds username.
j_password=login_password :  j_password parameter holds password.

Note 1: This link might be changed based on the port and extension provided while installation of Helical Insight.
Note 2: Here in the URL we are passing the username and password in plain text. The same can be sent in tokenized encrypted format as well as Single Sign On can be implemented. You can refer to our other blogs related to SSO, support of CAS and support of LDAP,oAuth, ADFS etc. to learn more about the same.
Note 3: Some browsers, like Chrome and Safari etc, do not allow HTTP calls over HTTPS for enhanced security. Hence, both the parent application and Helical Insight must be on HTTPS to avoid such issues.
Note 4: In order to avoid cross-origin and cookie related issues (which generally happens with chrome safari), follow the below given steps:
1. Go to web.xml file located at …/hi/apache-tomcat-9/webapps/hi-ee/WEB-INF/
2. Uncomment lines 32 to 62. This will enable cross-origin.dashboard-url
3. Uncomment lines 170 to 180 to add extra headers for cookies.dashboard-url
4. Save the file and restart the server.

Passing Input parameters via URL

We can also pass input parameters while integrating any report/dashboard using iframe

To pass the input parameters we have to update iframe URL with parameter name and its value


Upto HelicalInsight v4.1GA

<object id="helicalinsight-report-frame" data="http://applicationHost.com:8085/hi-ee/hi.html?dir=Travel_Dashboard&file=travel_dashboard.efw&mode=dashboard&TERRITORY=[“Japan”, “NA”,“Emea”]&STERRITORY=NA&j_organization=organization_name&j_username=user_name&j_password=login_password" style="height: 100%;width:100%;border:0px;" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>
</iframe>

HI v5.0 Onwards

<object id="helicalinsight-report-frame" data="http://applicationHost.com:8085/hi-ee/#/report-viewer?dir=Travel_Dashboard&file=travel_dashboard.efwdd&mode=dashboard&TERRITORY=[“Japan”, “NA”,“Emea”]&STERRITORY=NA&j_organization=organization_name&j_username=user_name&j_password=login_password" style="height: 100%;width:100%;border:0px;" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>
</iframe>

Or



Upto HelicalInsight v4.1GA

<iframe id="helicalinsight-report-frame" src="https://applicationHost.com:8085/hi-ee/hi.html?dir=Travel_Dashboard&file=travel_dashboard.efw&mode=dashboard&TERRITORY=%5B“Japan”, “NA”,“Emea”%5D&STERRITORY=NA&j_organization=organization_name&j_username=user_name&j_password=login_password" style="height: 100%;width:100%;border:0px;" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>
<iframe>

HI v5.0 Onwards

<iframe id="helicalinsight-report-frame" src="https://applicationHost.com:8085/hi-ee/hi.html?dir=Travel_Dashboard&file=travel_dashboard.efw&mode=dashboard&TERRITORY=%5B“Japan”, “NA”,“Emea”%5D&STERRITORY=NA&j_organization=organization_name&j_username=user_name&j_password=login_password" style="height: 100%;width:100%;border:0px;" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>
<iframe>

Format of Iframe code with input parameters:



Upto HelicalInsight v4.1GA

<iframe id="helicalinsight-report-frame" src="https://applicationHost.com:8085/hi-ee/hi.html?dir=Travel_Dashboard&file=travel_dashboard.efw&mode=dashboard&TERRITORY=[“Japan”, “NA”,“Emea”]&STERRITORY=NA&j_organization=organization_name&print=png&j_username=user_name&j_password=login_password" style="height: 100%;width:100%;border:0px;" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>
</iframe>

HI v5.0 Onwards

<iframe id="helicalinsight-report-frame" src="https://applicationHost.com:8085/hi-ee/#/report-viewer?dir=Travel_Dashboard&file=travel_dashboard.efwdd&mode=dashboard&TERRITORY=[“Japan”, “NA”,“Emea”]&STERRITORY=NA&j_organization=organization_name&print=png&j_username=user_name&j_password=login_password" style="height: 100%;width:100%;border:0px;" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>
</iframe>

where,

TERRITORY: Name of the parameter which is going to be triggered on the Integrated report.

[“Japan”, “NA”,“Emea”]: Value to be applied on TERRITORY parameter.

STERRITORY: name of the parameter which is going to be triggered on the Integrate report.

NA: Value to be applied on STERRITORY parameter.

Here TERRITORY is the multiple select parameter and we have to pass the multiple select parameter values inside square brackets ([ ]) with double quotes and separated with a comma (,) like (TERRITORY=[“Japan”, “NA”,“Emea”]).
You can replace opening square bracket with %5B and closing square bracket with %5D. So it will look like &TERRITORY=%5B“Japan”, “NA”,“Emea”%5D

Here STERRITORY is the single select parameter and we have to pass single select parameter directly as STERRITORY=NA

If you want to pass date or date range as input parameter via URL please refer to the below description.

For date parameter in iframe url you have to pass parameter and its value as date=2003-01-06.

For date range parameter in iframe url you have to pass two parameter as sDate=2016-01-06, eDate=2017-05-31. Sdate means start date and EDate means end date.

NOTE: If you did not pass any parameter then report will open with default parameters which were defined while report creation.

Exporting in pdf/png/jpeg format via URL

Format of Iframe code with export:

<iframe id="helicalinsight-report-frame" src="https://applicationHost.com:8085/hi-ee/hi.html?dir=Travel_Dashboard&file=travel_dashboard.efw&mode=dashboard&TERRITORY=[“Japan”, “NA”,“Emea”]&STERRITORY=NA&j_organization=organization_name&print=png&j_username=user_name&j_password=login_password" style="height: 100%;width:100%;border:0px;" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>
</iframe>

Where,

Print: API keyword to trigger Export.

png: Export formats value. You can pass export values as pdf /png / jpg / xls.

In case of any doubt, post your queries on forum

You May Also Like

Helical Insight’s self-service capabilities is one to reckon with. It allows you to simply drag and drop columns, add filters, apply aggregate functions if required, and create reports and dashboards on the fly. For advanced users, the self-service component has ability to add javascript, HTML, HTML5, CSS, CSS3 and AJAX. These customizations allow you to create dynamic reports and dashboards. You can also add new charts inside the self-service component, add new kind of aggregate functions and customize it using our APIs.
Helical Insight’s self-service capabilities is one to reckon with. It allows you to simply drag and drop columns, add filters, apply aggregate functions if required, and create reports and dashboards on the fly. For advanced users, the self-service component has ability to add javascript, HTML, HTML5, CSS, CSS3 and AJAX. These customizations allow you to create dynamic reports and dashboards. You can also add new charts inside the self-service component, add new kind of aggregate functions and customize it using our APIs.
Helical Insight, via simple browser based interface of Canned Reporting module, also allows to create pixel perfect printer friendly document kind of reports also like Invoice, P&L Statement, Balance sheet etc.
Helical Insight, via simple browser based interface of Canned Reporting module, also allows to create pixel perfect printer friendly document kind of reports also like Invoice, P&L Statement, Balance sheet etc.
If you have a product, built on any platform like Dot Net or Java or PHP or Ruby, you can easily embed Helical Insight within it using iFrames or webservices, for quick value add through instant visualization of data.
If you have a product, built on any platform like Dot Net or Java or PHP or Ruby, you can easily embed Helical Insight within it using iFrames or webservices, for quick value add through instant visualization of data.
Being a 100% browser-based BI tool, you can connect with your database and analyse across any location and device. There is no need to download or install heavy memory-consuming developer tools – All you need is a Browser application! We are battle-tested on most of the commonly used browsers.
Being a 100% browser-based BI tool, you can connect with your database and analyse across any location and device. There is no need to download or install heavy memory-consuming developer tools – All you need is a Browser application! We are battle-tested on most of the commonly used browsers.
We have organization level security where the Superadmin can create, delete and modify roles. Dashboards and reports can be added to that organization. This ensures multitenancy.
We have organization level security where the Superadmin can create, delete and modify roles. Dashboards and reports can be added to that organization. This ensures multitenancy.
We have organization level security where the Superadmin can create, delete and modify roles. Dashboards and reports can be added to that organization. This ensures multitenancy.
We have organization level security where the Superadmin can create, delete and modify roles. Dashboards and reports can be added to that organization. This ensures multitenancy.
A first-of-its-kind Open-Source BI framework, Helical Insight is completely API-driven. This allows you to add functionalities, including but not limited to adding a new exporting type, new datasource type, core functionality expansion, new charting in adhoc etc., at any place whenever you wish, using your own in-house developers.
A first-of-its-kind Open-Source BI framework, Helical Insight is completely API-driven. This allows you to add functionalities, including but not limited to adding a new exporting type, new datasource type, core functionality expansion, new charting in adhoc etc., at any place whenever you wish, using your own in-house developers.
It handles huge volumes of data effectively. Caching, Pagination, Load-Balancing and In-Memory not only provides you with amazing experience, but also and does not burden the database server more than required. Further effective use of computing power gives best performance and complex calculations even on the big data even with smaller machines for your personal use. Filtering, Sorting, Cube Analysis, Inter Panel Communication on the dashboards all at lightning speed. Thereby, making best open-source Business Intelligence solution in the market.
It handles huge volumes of data effectively. Caching, Pagination, Load-Balancing and In-Memory not only provides you with amazing experience, but also and does not burden the database server more than required. Further effective use of computing power gives best performance and complex calculations even on the big data even with smaller machines for your personal use. Filtering, Sorting, Cube Analysis, Inter Panel Communication on the dashboards all at lightning speed. Thereby, making best open-source Business Intelligence solution in the market.
With advance NLP algorithm, business users simply ask questions like, “show me sales of last quarter”, “average monthly sales of my products”. Let the application give the power to users without knowledge of query language or underlying data architecture
With advance NLP algorithm, business users simply ask questions like, “show me sales of last quarter”, “average monthly sales of my products”. Let the application give the power to users without knowledge of query language or underlying data architecture
Our application is compatible with almost all databases, be it RDBMS, or columnar database, or even flat files like spreadsheets or csv files. You can even connect to your own custom database via JDBC connection. Further, our database connection can be switched dynamically based on logged in users or its organization or other parameters. So, all your clients can use the same reports and dashboards without worrying about any data security breech.
Our application is compatible with almost all databases, be it RDBMS, or columnar database, or even flat files like spreadsheets or csv files. You can even connect to your own custom database via JDBC connection. Further, our database connection can be switched dynamically based on logged in users or its organization or other parameters. So, all your clients can use the same reports and dashboards without worrying about any data security breech.
Our application can be installed on an in-house server where you have full control of your data and its security. Or on cloud where it is accessible to larger audience without overheads and maintenance of the servers. One solution that works for all.
Our application can be installed on an in-house server where you have full control of your data and its security. Or on cloud where it is accessible to larger audience without overheads and maintenance of the servers. One solution that works for all.
Different companies have different business processes that the existing BI tools do not encompass. Helical Insight permits you to design your own workflows and specify what functional module of BI gets triggered
Different companies have different business processes that the existing BI tools do not encompass. Helical Insight permits you to design your own workflows and specify what functional module of BI gets triggered