Hook into refresh action of report result view

[robin]

Hello,

I've got the following situation: I've developed a little extension, which lets me set the width of a table in the list-view of a report. The reason is, that I got a report with plenty of columns, but even in the result-view the columns would be super squished, so nothing useful can be read in the report. The solution was to tinker with the css of the report table to allow the table to be a lot wider while the extra columns on the right can be viewed when scrolling with a horizontal scrollbar. This solution works so far, however I now face the following problem:
I apply the new css via a custom detail and result view (so one for the small table in the report detail view and one for the result-view) where I overwrite the afterRender method. In this overwritten afterRender method I apply the css. However when I refresh the data via the refresh button, the table gets rerendered without triggering my modified afterRender function (which in turn resets my custom css) .
That itself wouldn't be a big issue, since iIusers to just refresh the page instead of using the refresh button. However when I sort the columns, the table also gets rerendered without triggering my afterRender. And here I cant just reload the entire page, since that would reset the sort of the columns.

I've now tried to also overwrite the refresh-function and apply my custom css there, with no success however. Upon inspecting the code in module-advanced.js a bit closer I figured out, that the refresh function is part of the view "advanced:views/report/reports/base" (so the base view).
I've tried overwriting the baseview in the same manner as I overwritten the detail and result view with my customview, but without any success:


it seems the baseview is not meant to be overwritten.

I also tried my luck by trying a viewSetupHandler to execute my customcode through that, but according to the documentation https://docs.espocrm.com/development...etup-handlers/ the result-view-type is not support with viewSetupHandler, only these types:

• list – main list view;
• detail – main detail view;
• edit – main edit view;
• record/list – list record view;
• record/search – search view;
• record/detail – detail record view;
• record/edit – detail record view;
• record/kanban – kanban record view;

Long story short: Is there any way of executing some custom code when a refresh/sorting action happens in a report result-view, either by overwriting the baseview or by any other means?

Any help would be greatly appreciated

[yuri]

Hi,

In the new versions we have the ability to hide/show list report columns in the result view. Maybe it would be a suitable option for you?

[yuri]

Additionally, did you try setting the content width wide at Preferences > User Interface. If will make the result view wider.

[robin]

Hi yuri,
thanks for the response.
Hiding some columns wouldn't solve the problem since there is 26 columns and at least half of them would need to be disabled to make space to display the rest, however the nature of the report requires most of the columns to be visible conccurently.

I've tried setting the User interface to wide and it helped somewhat by giving the table some more space, but unfortunately its not enough as the table needs to be about 300% bigger than it currently is. And unless all my users get a ultrawidescreen that still doesnt fix the problem completly.

So I assume there is no way to solve this problem in my intended way, by overwriting some code in the baseview?

[yuri]

The internals of that view have no official API, and it's closed sourced. We tend to modify this code that breaks customizations.

I'd consider modifying it with a CSS outside of that particular view. You can try an additional global CSS.

Or maybe consider exporting such large report to spreadsheets.

[robin]

Understandable.

I've tried the global css to start with, however since I dont want every report to be super wide (just one or two particualar ones) I've came up with adding a field to the report configuration where I can enter a tableWidth in percent, which then gets applied as a css width through the javascript code.

But yeah I suppose if my users want to view that report and also sort through it, they can just export it to excel. Which I originally wanted to avoid since the report I am trying to replace by using EspoCRMs report function was an excel file xD
But I suppose generating the report through EspoCRM still beats manually entering lines in the old report-excel by hand..

In any case, thank you for your help yuri

[robin]

Update: I've actually managed to find a solution which I would like to share in case somebody else ever has that problem.
It is a bit hacky, but since I lack other solutions I'll go with that for now.

Basically I use the fact, that when the table of the result-view gets rerendered, it only rerenders the inner DOM elements.
What I did now, is in the afterRender Function of the result-view/detail-view (which I managed to override) I can set a css class "extraWidth" to the table-container, based on if a element with the innerhtml of my reportname which i want to customize is in the DOM. (So i Basically check: is the report which is currently rendered the report with the name I want to customize)
I do have to set the reportName fix in my cusomization-code which is a bit inconvienient, but since building and installing a extension in EspoCRM is quite quick and easy and the report name wont change its alright.

Then I use globalCSS to apply the width attributes to each table element underneath an element with the className "extraWidth". This way, even when the table itself gets rerendered after a sort/refresh event, the css-class of the report-container does not so the extra width is again applied.