asked on March 11, 2020
Hi Team,
I tried using the sample code, able to call the handler. But its throwing error while applying to fm-pivot.
Please check the code
import { Component, OnInit, Input } from ‘@angular/core’;
import * as Flexmonster from ‘flexmonster’;
import { FlexmonsterPivot } from ‘ng-flexmonster’;
@Component({
selector: ‘aiq-flexmonster’,
templateUrl: ‘./flexmonster.component.html’,
styleUrls: [‘./flexmonster.component.scss’]
})
export class FlexmonsterComponent implements OnInit {
report;
@Input() data: any;
@Input() rows: any;
@Input() showConfiguratorButton = false;
toolbar = true;
selectedRows = {};
constructor() {
}
customizeCellFunction(cell, data): any {
//console.log(data)
if (data.type === “value” && !data.isDrillThrough && cell.text.includes(‘<’)) {
cell.style[‘z-index’] = 2;
cell.text = data.member.caption;
}
if (data.measure && data.type != ‘header’ && data.measure.uniqueName == “Checkbox”) {
cell.text = `<input type=”checkbox” value=”1″ onchange=”onCheck(event)” ‘checked’ >`;
cell.style[‘z-index’] = 2;
}
}
customizeToolbar(toolbar) {
// get all tabs
let tabs = toolbar.getTabs();
toolbar.getTabs = function() {
tabs[3].menu[1].handler = exportHandler;
tabs[3].menu[1].args = {
type: ‘html’,
filename: ‘test.html’
}
return tabs;
}
function exportHandler(params) { /// giving error this.report as undefined
if(this.report){
this.report.exportTo(params.type, {
filename: params.filename
})}
}
}
onCheck(event) {
this.selectedRows[event.target.value] = event.target.checked;
}
preventExpand(e): any {
e.stopImmediatePropagation();
}
ngOnInit(): any {
this.report = {
dataSource: {
data: this.data
},
options: {
grid: {
type: “flat”,
showGrandTotals: false,
datePattern: “yyyy/MM/dd HH:mm:ss”,
showHeaders: false
},
configuratorButton : this.showConfiguratorButton
},
formats: [
{
textAlign: “left”,
nullValue: “1”,
thousandsSeparator: “”
}
],
slice: {
rows: this.rows,
columns: [],
measures: [{uniqueName: “Checkbox”}, {uniqueName: “hostName”}, {uniqueName: “serialNumber”}]
}
};
}
}
Error
⋅ March 11, 2020
Hello,
Thank you for reaching out to us and for providing additional details.
It seems the reason for the export not working is because the exportTo() function is being called from the report object instead of the Flexmonster instance.
We kindly suggest referring to the exportTo() API call from your Flexmonster instance:
1) First, a reference to your Flexmonster instance needs to be created:
export class FlexmonsterComponent {
@ViewChild('pivot') pivot: FlexmonsterPivot;
...
}
2) Then in the customizeToolbar function Flexmonster's API calls can be accessed through the Flexmonster instance:
customizeToolbar(toolbar: Flexmonster.Toolbar): void {
// Get all tabs
var tabs=toolbar.getTabs();
// Get the reference to your Flexmonster instance
var pivot=this.pivot.flexmonster;
toolbar.getTabs=function () {
tabs[3].menu[1].handler = () => exportHandler();
return tabs;
}
function exportHandler() {
// Refer to the exportTo() API call from Flexmonster
pivot.exportTo('html', {
filename: 'test.html'
});
}
}
Regarding the problem with this.report being undefined in the exportHandler:
We would like to explain that the context in the exportHandler function is different and as a result this is also different. This is the reason why the report is not accessible via this in the exportHandler function. For such cases, we kindly suggest using the approach demonstrated above on the example of var pivot (using a saved reference).
Please let us know if this helps and if any additional details are needed.
Looking forward to your reply.
Kind regards,
Vera
⋅ March 12, 2020
Hi Vera,
Thanks for the response. I tried above steps, now getting this error
TypeError: Cannot read property 'flexmonster' of undefined
at FlexmonsterComponent.customizeToolbar (flexmonster.component.ts:37)
In code added,
@ViewChild('pivot', {static: false}) pivot: FlexmonsterPivot;
var pivot= this.pivot.flexmonster;
⋅ March 12, 2020
Hello,
Thank you for your reply.
Such an error could occur if the reference is not defined in flexmonster.component.html or if the reference name is different from the one referred to in @ViewChild(‘pivot’, {static: false}) pivot: FlexmonsterPivot.
We kindly suggest making sure that the pivot reference is defined in the flexmonster.component.html file, for example:
In flexmonster.component.html:
<fm-pivot #pivot
[toolbar]="true"
[width]="'100%'"
[height]="500"
[report]="pivotReport"
[customizeCell]="onCustomizeCell"
(ready)="onPivotReady($event)"
(reportcomplete)="onReportComplete()"
(beforetoolbarcreated)="customizeToolbar($event)">
</fm-pivot>
In flexmonster.component.ts:
@ViewChild('pivot', {static: false}) pivot: FlexmonsterPivot;
Also, we have a sample Angular project on GitHub illustrating this approach.
Please let us know if this helps and if any additional details are needed.
Looking forward to your answer.
Kind regards,
Vera
⋅ March 12, 2020
Thanks Vera.
It worked.
I have one more issue
Export option is not working in our application.
While analyzing the issue, got to know that Flexmonster Export is not working with any kind of tracking enabled in the application.
Do you have any configuration settings or any solution to get it resolved?
⋅ March 12, 2020
Hello, Shilpi,
Thank you for your response.
We are glad to hear that it worked to access Flexmonster's API calls.
Regarding the export not working when tracking is enabled:
Could you please provide a code sample (with dummy data) or at least the name of the tracking service that is being used, to help us reproduce the issue on our end (sensitive information could be shared via email)?
This would greatly help to make further progress in solving the problem.
Looking forward to your reply.
Kind regards,
Vera
⋅ March 12, 2020
I am using Adobe Analytics
⋅ March 13, 2020
Hello, Shilpi,
Thank you for giving us some time.
We have managed to reproduce the issue with Flexmonster export not working when Adobe Analytics is enabled.
Our team is currently researching the problem. The fix will be available in the minor release version with the ETA 6th of April.
Please feel free to reach out to us in case any additional questions arise.
Kind regards,
Vera
⋅ March 24, 2020
Hello Shilpi,
We have an update regarding Adobe Analytics.
While researching the issue, our dev team found that it is caused by how Abobe Analytics JS is tracking the links. Export (saving files) is getting affected because the downloading of files in JS is done via <a> elements. So, we recommend editing linkInternalFilters property (https://docs.adobe.com/content/help/en/analytics/implementation/vars/config-vars/linkinternalfilters.html) and add blob: to its list:
s.linkInternalFilters="blob:,javascript:,..."
That will flag download links to be ignored by Adobe Analytics and export should start working.
Also, it seems we have found one more workaround that we can include in our code to ignore Adobe Analytics to handle Flexmonster's download links. It will be released as expected with the ETA 6th of April.
I hope it helps.
Regards,
Ian
⋅ April 7, 2020
Hi Shilpi,
We are happy to let you know that the issue with saving files (export, reports) when using Adobe Analytics was fixed. This is included in the 2.8.4 version of Flexmonster: https://www.flexmonster.com/release-notes/
You are welcome to update the component: https://www.flexmonster.com/doc/updating-to-the-latest-version/
Please let us know if everything works fine on your side.
Best regards,
Mykhailo