Till now we have created reports and dashboards by downloading and editing the files of Template folder. We are using D3, C3 and datatables for visualization purposes, those relevant CSS and JS files are linked in the template.html file.
You might be interested in creating reports and dashboards in your own folder. Below steps will elaborate how to go about the doing the same.
Step 1: Follow the below steps to create new folder:
- Login into Helical Insight application.
- Click on Home button and open file browser.
- On Right click, you will get the drop-down menu, click on New Folder. You can create New Folder at any hierarchy. After clicking on New Folder you can give it a name of your choice.
- You will find this folder inside your hi-repository physical location where Helical Insight is installed. One thing to note is that the folder which gets created inside hi-repository doesn’t have the name same as you have provided inside Helical Insight application. To get the name with which folder gets created in hi-repository right click on the created folder in Helical Insight application, you will get the drop-down menu.
- Click on Properties, you will get the pop-up window.
- On pop-up window you will find one value in Path, that is the name of the folder inside hi-repository.
- See the folder inside hi-repository
- You can further add files or folders inside the created folder through hi-repository or Helical Insight application.
Step 2 : Assuming that you wish to use C3, D3 libraries etc for data visualization, now you will have to link the CSS and JS for this new created folder.
- Create new folder by name of your choice. Here we have created the Folder called ‘External Files’ inside the folder which we just have created.
- Put all the external JS and CSS files which you want to link inside the report. Here we have added one CSS and one JS file for your reference.
- Now create template.html file inside the parent folder. Here we have ‘1493036899005’ as parent folder. We have created one template.html file inside it.
- Now add following lines of code into ‘template.html’ to link the external JS or CSS file.
<link
rel="stylesheet" type="text/css" href="css/c3.css"></link
> <link rel="stylesheet" type="text/css" href="getExternalResource.html?path=1493036899005/External Files/jquery.dataTables.css"></link> <script
src="js/vendors/c3.js"></script
> <script
src="getExternalResource.html?path=1493036899005/External Files/Chart.min.js"></script
>
In the above snippet when linking the CSS files , we give path in the ‘href’ attribute as follows :-
href="getExternalResource.html?path=
1493036899005/External Files/jquery.dataTables.css
"
If you observe the path above (in blue
), we have given the address from the hi-repository
. The 1493036899005 is present inside the hi-repository
(folder created when the application is installed). The path to be given is relative to folder ‘hi-repository’. User can also give absolute path.
Now follow the regular process of creating the report. For the steps of report creation please refer the following blog: How to create report in Helical Insight CE