Hello Team Helical,
I am using Helical Insight EE 4.0. For ad-hoc reports I would like to put all the exporting options like PDF, JPEG, PNG, Excel as well as data exporting options into one place.
Right now the PDF JPEN PNG comes from one place and the other Excel and CSV (data export) comes from another place. How can that be done?
Thank You
Priya.
Hello Priya,
You can open the ad-hoc report in edit mode. In the JS editor you can put the below code. Basically what we are doing is creating a button and on click of it we are triggering the functionalities of various exporting options. You can also add CSS for changing the look and feel.
var dropdown_div = document.createElement("div");
dropdown_div.id="dropdown_exports";
dropdown_div.setAttribute('class',"dropdown");
var export_icon = document.createElement("i");
dropdown_div.onclick=function(event) {
console.log("export icon clicked");
document.getElementById("dropdown-content").classList.toggle("show");
}
export_icon.setAttribute('class',"icon-folder-download st_trial_summary-download");
var dropdown_content_div = document.createElement("div");
dropdown_content_div.id="dropdown-content";
dropdown_content_div.setAttribute('class',"dropdown-content");
var values = ["pdf image", "png image", "jpeg image", "EXCEL image","EXCEL data","csv data"];
for (const val of values) {
var content = document.createElement("span");
content.id="content_options";
content.setAttribute('class',"content_options-"+val);
content.innerHTML=val;
content.setAttribute('style',"font-family: 'Lato'");
dropdown_content_div.appendChild(content);
}
dropdown_div.appendChild(export_icon);
dropdown_div.appendChild(dropdown_content_div);
document.body.append(dropdown_div);
$('.dropdown-content span').click(function(){
var val = $(this).text()
console.log(val);
if(val === 'pdf image'){
window.parent.HDIUI.downloadURL('pdf');
}
else if(val === 'png image'){
window.parent.HDIUI.downloadURL('png');
}
else if(val === 'jpeg image'){
window.parent.HDIUI.downloadURL('jpg');
}
else if(val === 'EXCEL image'){
window.parent.HDIUI.downloadURL('xls');
}
else if(val === 'EXCEL data'){
window.parent.$('.flaticon-excel-file').click();
}
else if(val === 'csv data'){
window.parent.$('.flaticon-csv-file').click();
}
})
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.st_trial_summary-download')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
Also at the CSS of editor of report put the below code
i {
/ use !important to prevent issues with browser extensions that change fonts /
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.icon-folder-download:before {
content: "\e933";
}
.st_trial_summary-download {
background: #40ABB0;
border-radius: 3px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: .875rem;
padding: 7px;
transition: all 150ms ease-out;
float: right;
}
.st_trial_summary-download:hover {
background: #5ec0c5;
}
.dropdown {
position: absolute;
top: 2px;
right: 2px;
}
.dropdown-content {
display: none;
position: relative;
min-width: 73px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
margin-left: -48px;
}
.dropdown-content span {
color: #747A92;
padding: 12px 16px;
text-decoration: none;
display: block;
cursor: pointer;
}
.dropdown span:hover {background-color: #ddd;}
.show {display: block;}
\
You can also remove the hamburger icon as well if required by referring to the below link.
You can make further changes via CSS.
Then save the report and exporting options will appear like below shown
Thank You
From Team Helical
