In many cases when using Open Source BI product Helical Insight in an embedded mode, then we want to dynamically display the list of resources (like reports, dashboards etc) as a list/icons/tiles etc and further clicking on that the report dashboard gets listed.
In the below blog, using HTML CSS, we have shown how to do the same as a reference. You can achieve similar thing as per your frontend technology of your product.
Step 1: Fetch the Details from the API. In the below we have passed the username password in the URL, but that Is not requirement if the session is already created or if SSO is established. But for this below example we are going to pass username password in URL:
http://localhost:8085/hiee/getSolutionResources?j_username=hiadmin&j_password=hiadmin
This data comes in JSON format so change it into the data the language you use support.
Step 2: Now Perform a recursion function on the data and try to output the data that you need (along with the folders that the item you need present)
Try to separate the files based on their extension so performing actions on specific files will be easier. (For example: if you want to show the report when clicked on it you need this to be applied on only the files that contain the .hr extension)
.hr – adhoc report .metadata – metadata files .efww – dashboard files Etc
Step 3: Store the folder and file names separately like all the folder names in an array and file names as a string. So it will be easier in future operations.
Step 4: In the recursion method first check whether a folder contains the files that you want or not if yes, save that folder name into an array and pass it throughout the recursion function.
Step 5: When you come out of a folder write a function that will remove the name of that folder from the folder array so, you will get the correct address of the file and the folder name will be seen only once even if there are multiple files in that folder.
Step 6: Now once you have this set, move on to add a click function on the reports that contain the .hr extension.
Here you need the folder name array and file name.
Step 7: Join the folder names array with ‘%2F’ and store in a variable and file name in a variable.
Step 8: Create an iframe tag and the src of it will be the following line :
`http://localhost:8085/hi-ee/#/report-viewer?dir=${dir_name}&file=${file_name}&mode=open`
Here change the dir_name will the variable that contains the joined array of folder names and file_name will be the name of the file.
NOTE: Entire code content can be taken from this file home.html