Pricing changes are coming in January. Contact our Sales team to secure the current price for your desired license.

Override default behavior for exporting in Flexmonster to show images

Answered
Nikita asked on September 10, 2024

Hi,

I want to use the existing functionality for exporting reports but want to allow customizeCellFunction:

report: {
...
useCustomizeCellForData: true
}

This way its unfortunately not working (I tried both true and false values for the parameter). I could use maybe exportTo function with different configs and just override the handler for export to in the toolbar but I thought there may be simple configs for that? 

Update

I actually tried overriding and setting that flag to download images but it does not work and I see no images:

function () { me.flexview.exportTo("excel", { useCustomizeCellForData: false }) }

The function is definitely triggered upon downloading excel. Here is my customizeCell function which adds the images:

customizecellfunction: function (cell, data, rawdata) {
if (!(data.hierarchy && data.hierarchy.uniqueName == "structureimage")) return;
if (data && data.type == "header" && data.label != "") {
let base64Img;
cell.addClass("fm-custom-cell");
if (data.expanded) {
base64Img = `<i class="fm-icon fm-expanded-icon" title="Click to collapse"></i>
<img src='data:image/png;base64, ${data.label}'/>`;
} else {
base64Img = `<i class="fm-icon fm-collapsed-icon" title="Click to expand"></i>
<img src='data:image/png;base64, ${data.label}'/>`;
}
cell.text = `<div style="display:flex; align-items:center; font-size:12px; position:relative;">
${base64Img}</div>`;
}

On the screenshot attached you can see that under each ID on the left there is an empty space - thats where we expect to see the images, same as in the flexmonster view.

3 answers

Public
Maksym Diachenko Maksym Diachenko Flexmonster September 12, 2024

Hello, Nikita!

Thank you for reaching out to us.

Flexmonster only supports exporting text to Excel. The useCustomizeCellForData set as false would result in exporting the original data before applying the formatting. Based on the provided code, the Base64-encoded images should be present on the exported sheet with useCustomizeCellForData: false.

As a workaround, we suggest setting the destinationType export parameter to "plain", which would pass the Excel sheet to a callback handler as an Uint8Array. After this, you can use a JS library like XLSX to replace cell values with Base64-encoded images to a relevant text substitution. You are welcome to check the example of Excel export with plain destination type: https://jsfiddle.net/flexmonster/Lpneu2xt/

Please let us know if such a solution would be viable for you.

Best Regards,
Maksym

Public
Nikita October 15, 2024

Hi Maksym,

I was able to get array of arrays this way, and I could try adding just additional base64 strings to each array associated with an actual row. However, the issue is it will be in the end an excel for untransformed data, right? Or it will retain transformations done by the user and the only thing I need is to add base64 strings to several arrays?

So, in the attached image I would add base64 to the middle arrays: 2, 3, 4, 5, 6.

Attachments:
flex_img_array.png

Public
Maksym Diachenko Maksym Diachenko Flexmonster October 16, 2024

Hello, Nikita!

Thank you for your reply.

It seems that there might have been a misunderstanding regarding our previous reply. Firstly, we would like to clarify that Flexmonster does not support exporting images to Excel out of the box.

Our previous suggestion was meant to give you the tools to start, not a complete solution. With the destinationType: "plain" option, you can modify the exported data and process the Excel sheet using third-party tools for working with Excel in JS. Implementing the actual handling of images and any other customizations will be something you will need to do on your end.

We hope this clarifies our previous recommendation.

Best Regards,
Maksym

Please login or Register to Submit Answer