Good day people, I have encountered a problem regarding the CSV exports. I am running the latest container (2.4.0) and the latest version of the UI kit (9.1.0 with typescript version 5.2.2) On Angular 15.2.1 where I render React elements to get the insights in my Angular components. However I can not seem to get the export functionality working. The documentation on exports in the UI kit is not sufficient enough for me to get it to work. So that's why I am reaching out through here. I understand the whole React component and Angular implementation is janky at best and that that is why it has been difficult to iterate every step of the way. So here it goes. The TypeScript for the insight component code is as follows:

@Component({
    selector: 'insight-component',
    templateUrl: './insight.component.html',
    styleUrls: ['./insight.component.css'],
})
export class InsightComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit {
    constructor(private goodData: GoodDataService) {}
    @Input() config: IChartConfig = {
        chart: {
            verticalAlignment: "middle"
        },
        colors: ["rgb(195, 49, 73)", "rgb(168, 194, 86)"]
    }
    @Input() dateFilter: DateFilterOption;
    @Input() drillableItems?: ExplicitDrill[];
    // Otherwise, filters are applied from most specific to least specific
    @Input() zoneCode: string;
    @Input() establishmentCode;

    // These are filter properties
    // @Input() filters: IFilter[]; // A array of filters takes precedence over all other parameters

    private hasViewLoaded = false;

    @Input() heightFactor = 10;
    @Input() heightMultiplier = 1;
    @Input() insight: string;
    @Input() onError?: any;
    @Input() onLoadingChanged?: any;

    @Input() props: IInsightViewProps;
    private reactEl: React.ComponentElement<IInsightViewProps, InsightView>;
    @Input() repoId: number;
    public rootDomID: string;

    @ViewChild('placeHolder', { read: ElementRef }) spanEl: ElementRef<HTMLElement>;

    @Input() workspace: string;

    protected getProps(): IInsightViewProps {
        const { workspace, insight } = this;

        let filters: IFilter[] = [];

        if (this.establishmentCode) { // first filter criteria
            filters = [this.goodData.filters.EstablishmentCodeFilter(this.establishmentCode)];
        }

        if (this.zoneCode) { // if establishment is already set it will still be overwritten by Zone, to limit the amount of filter criteria
            filters  = [this.goodData.filters.ZoneCodeFilter(this.zoneCode)];
        }
        
        return {
            workspace,
            filters,
            insight,
            config: {
                chart: {
                    verticalAlignment: "middle"
                },
                colors: ["rgb(195, 49, 73)", "rgb(168, 194, 86)"]
            },
            drillableItems: this.drillableItems,
            backend: this.goodData.backend,
            ...this.props,
        };
    }

    ngAfterViewInit() {
        this.hasViewLoaded = true;
        clearInsightViewCaches();
        this.render();
        const childView: HTMLElement = this.spanEl.nativeElement.querySelector('.insight-view-container');
        childView.style.height = `${this.heightMultiplier * this.heightFactor}px`;
    }

    ngOnChanges() {
        this.render();
    }

    ngOnDestroy() {
        // Uncomment if Angular issue that ngOnDestroy is called AFTER DOM node removal is resolved
        ReactDOM.unmountComponentAtNode(this.spanEl.nativeElement);
    }

    ngOnInit() {
        this.rootDomID = uuidv4();
    }

    protected render() {
        if (!this.hasViewLoaded) {
            return;
        }
        this.reactEl = React.createElement(InsightView, this.getProps());
        ReactDOM.render(this.reactEl, this.spanEl.nativeElement);
    }
}

Please note: This is the situation before I made any attempt at implementing the export on my own. Best regards, Stijn

Good morning Stijn, Radek from the GoodData technical team here 🙂 I see you mention you're having difficulties with the export functionality, but not quite what issues you're actually seeing - could you please elaborate a little? Many thanks! Radek

Good morning Radek, The problem I face is regarding getting an (CSV) export button on my insights, I read that is has to do with using the IsExportReady eventlistener to make sure it is prepared before the user can press the button. However, I am unable to get the right configuration for the insight component to have that show up/work. Stijn

I'm wondering, have you had a chance to also check out our code examples? The documentation on the onExportReady parameter is a little challenging, but I (at least personally) always find that following the source code of a working sample is a bit more doable 🙂

Hey Radek, I have looked at the examples and took another good look at the documentation, I feel like I am getting closer to the solution but I am still having trouble with rewriting it to fit my specific environment, like I stated in my first message we're using an Angular frontend where we render a react component for the insights. This however makes the setup of the insight component different to every example I can find, which really complicates things. I'll share the current version of my code. What I am running into no is that the onExportReady function is not actually being called, which means it's either not ready for export (obviously) or the callback function is not being called for whatever reason. These are my new functions

private onExportReady(getExportedData){
    console.log("onExportReady is called: " + getExportedData);
    this.getExportedData = getExportedData;
}

private async doExport() {
    try {
        const result = await this.getExportedData({
            format: "csv",
            includeFilterContext: true,
            mergeHeaders: true,
            title: "henkie"
        });
        console.log("Export successfully: ", result.uri);
    } catch (error) {
        console.log("Export error: ", error);
    }
}

And this is what the props returned in getProps looks like right now

return {
    workspace,
    filters,
    insight,
    config: {
        chart: {
            verticalAlignment: "middle"
        },
        colors: ["rgb(195, 49, 73)", "rgb(168, 194, 86)"]
    },
    drillableItems: this.drillableItems,
    backend: this.goodData.backend,
    onExportReady: exportFunction => {
        this.onExportReady.bind(this);
    },
    ...this.props,
};

Thank you for your time, Stijn

Hi Stijn, Hope you're having a good Monday! 🙂 I noticed one possible oversight here - you mentioned you're running GD.CN 2.4 with GD.UI 9.1.0, but that combination actually isn't officially compatible. I can't rule out that the same difficulties will be encountered on 2.4 with 9.0.1, however with that combination, I can at least guarantee it isn't an issue with version mismatch. Would it be possible for you to downgrade SDK versions and verify? Best regards, Radek

Hey Radek, I will check this out if I get the time. I recently had a 2 week vacation and have since handed in my notice, due to that my priority shifted from new functionality to handover and documentation. If I get around to working on this, I will report back. Thank you for your help regardless! Best regards, Stijn

Hi Stijn, Hope you had a good vacation! 🙂 I'll be waiting if anything comes up, and if not, good luck with your future endeavours! Kind regards, Radek