Ctools : Extending table component

[Benoit Hericher]

Hi,

As the table component is based on the datatables component (https://datatables.net/), I wonder if it is possible and easy to add plugins or extensions like Buttons (https://datatables.net/extensions/buttons/) which provides export in pdf, print view.

Has somebody already tried that?

Thanks for your answers.

Benoit

[Fernando Maia da Mota]

Hi Benoit,

See this https://github.com/fernandommota/table-bootstrap-component

Maybe will need some updates...

--
You received this message because you are subscribed to the Google Groups "Pentaho Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pentaho-commun...@googlegroups.com.
To post to this group, send email to pentaho-...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/pentaho-community/b2b0c42b-fed5-43e5-b1bc-fe119c914b69%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

<Fernando Maia da Mota/>

mota.fer...@gmail.com
http://fernandomaia.eti.br/blog/

http://fernandommota.github.io/academy
http://twitter.com/fernandommota

[Benoit Hericher]

Great!

I'm gooing to try it

Thank you Fernando!

Benoit

[Benoit Hericher]

The component is working fine, but it uses obsolete plugins of Datatables.

I have tried to use the Buttons plugin instead. It needs at least the version 1.10.5 of Datatables : I have update the datables.js everywhere in the pentaho-solutions directory of a biserver-ce 5.4.

1. I made a dashboard in pure HTML, dispalying dummy data and it works fine.

2. Then, I made a dashboard with a Table component, importing all the needed javascript. It works fine as long as I don't try to use pdfmake.js (which woudl allow, in conjunction with html5buttons, a better control on the pdf (orientation, style,...)) : nothing is displayed : I have a blank screen without any error messages in the console. I first thought that there was a conflict between pdfmake and the Table component; so, I added another componenet (a button) : same result, nothing appears. If I remove the pdfmake script, the dashboard is correctly displayed, but alas, the pdf button doesn't work.

Any idea of what could be wrong?

Benoit

[Benoit Hericher]

Well, if I comment all reference to VirtualFielSystem in pdfmake.js, the dashboard is displayed (the pdf button doesn't work, but that was expected!).
I guess that there is a conflict at VFS level between CDF and pdfmake.js. Maybe it will work with Pentaho V6 as VFS changed?
Will try that one of these days.

Le vendredi 11 décembre 2015 12:06:18 UTC+1, Benoit Hericher a écrit :

[Benoit Hericher]

Well, it doesn't work with version 6.0
I give up

Le vendredi 11 décembre 2015 12:06:18 UTC+1, Benoit Hericher a écrit :

[Fernando Maia da Mota]

Hello Benoit,

Too bad not work, anyway you have an example of how to extend a component in another situation can be useful.

Regards

--

You received this message because you are subscribed to the Google Groups "Pentaho Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pentaho-commun...@googlegroups.com.
To post to this group, send email to pentaho-...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/pentaho-community/0766601d-5574-467f-8ab9-bba365643765%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Benoit Hericher]

Thank you Fernando.

I will try to continue without pdfmake : the next step is to add the buttons in the component itself ; for now, I manage that in the preexecution event.

Benoit
Maybe some one will be able to make pdfmake work in Pentaho.

Le vendredi 11 décembre 2015 12:06:18 UTC+1, Benoit Hericher a écrit :

[Kleyson Rios]

Hi Benoit

I didn't understand.

What are you trying to do ?

[Benoit Hericher]

Hi Kleyson,

I'm trying to make a component that extends the Table Component, adding to it buttons for export (csv, excel, pdf), copy (in clipboard), print and hide/show columns. Fernando did it with two plugins of datatables that are currently obsolete and I try to use a more uptodate extension of Datatables.

Benoit

Le vendredi 11 décembre 2015 12:06:18 UTC+1, Benoit Hericher a écrit :

[Carlos Russo]

You can try to do this without even deriving a new component. 

Take for instance a legacy dashboards, add all the required javascript and CSS resources. 

Then add a regular CDF TableComponent, and place in the postExecution callback the code that initializes the Buttons extension:

this.dtButtons = new $.fn.dataTable.Buttons( this.dataTable, {

    buttons: [

        'copy', 'excel', 'pdf'

    ]

} );

If you really need to derive a new component, you have to generate a component.xml that includes all the resources and a javacript file containing something along the lines:

var TableWithButtonsComponent = TableComponent.extend({

processTableComponentResponse: function(json) {

this.base(json);

this.dtButtons = new $.fn.dataTable.Buttons( this.dataTable, {

    buttons: [

        'copy', 'excel', 'pdf'

    ]

} );

}

});

[Benoit Hericher]

Thank you Carlos,

I have made a component, but didn't write the code as you suggest (rather I put everything in 'setup:', but I guess it's not a very good practice).
It works well, except that there is an incompatibility with pdfmake.js, so the pdf production relies on flash and it's not as nice as it could be.
Maybe someone will find whence this incompatibility comes from

Benoît

Le vendredi 11 décembre 2015 12:06:18 UTC+1, Benoit Hericher a écrit :

[Benoit Hericher]

Hi,

Happy new year!

I'm always stucked with pdfmake. And I'm completly dazed.
Not sure it's the good place to expose the problem, sorry for that.

If I add pdfmake.js (version 0.1.18 or 0.1.20, it's the same) in a dashboard as a javascript resource, then no component is displayed.
I first suspect VFS, so I commented the following lines in pdfmake.js :

function(module, exports, __webpack_require__) {

    (function(Buffer, __dirname) {
    'use strict';

   
    function VirtualFileSystem() {
        this.fileSystem = {};
        this.baseSystem = {};
    }

    VirtualFileSystem.prototype.readFileSync = function(filename) {
        filename = fixFilename(filename);

        var base64content = this.baseSystem[filename];
        if (base64content) {
            return new Buffer(base64content, 'base64');
        }

        return this.fileSystem[filename];
    };

    VirtualFileSystem.prototype.writeFileSync = function(filename, content) {
        this.fileSystem[fixFilename(filename)] = content;
    };

    VirtualFileSystem.prototype.bindFS = function(data) {
        this.baseSystem = data;
    };


    function fixFilename(filename) {
        if (filename.indexOf(__dirname) === 0) {
            filename = filename.substring(__dirname.length);
        }

        if (filename.indexOf('/') === 0) {
            filename = filename.substring(1);
        }

        return filename;
    }

    module.exports = new VirtualFileSystem();

    }.call(exports, __webpack_require__(4).Buffer, "/"))
 },

That worked : the components appears again (but the pdf generation doesn't work, that is normal!)

Then, I tried to progress : I decided to let the above function with an empty body :

function(module, exports, __webpack_require__) {},

And that is where I'm completly lost : this single statement reintroduces the problem : no component displayed...

I eventually cut this code and put it close to the end of pdfmake.js : components appeared again! But any attempt to use pdfmake.js by calling some code fails because of unresolved references.

If somebody as an explanation...

Thank you

Benoit

If somebody has an explanation...

Le vendredi 11 décembre 2015 12:06:18 UTC+1, Benoit Hericher a écrit :

[Pedro Vale]

Don’t you have some error logs in the browser javascript console ?

Also try running the dashboard in debug mode. The error messages will be more informative.

Regards,

Pedro Vale

Dev Lead

phone: +351 214870076       fax: +351 218041985

Vila Internacional

ED.2 1º Andar

2750-047 Aldeia de Juso, Portugal

pentaho.com

--
You received this message because you are subscribed to the Google Groups "Pentaho Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pentaho-commun...@googlegroups.com.
To post to this group, send email to pentaho-...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/pentaho-community/32a7aa67-18e8-416b-9c76-d526552f3ac8%40googlegroups.com.

[Benoit Hericher]

Thank you Pedro, I did as you asked :


I have a dashboard with just a row and a column and a button within that column. It runs correctly (albeit useless)

Then I add the script pdfmake;js as an external resource and run again the dashboard with debug=true the console looks like this :

GET http://localhost:8080/pentaho/api/repo/files/%3Ahome%3Aadmin%3Abasic.wcdf/properties

200 OK

54ms

47E910B...he.html (ligne 4519)

POST http://localhost:8080/pentaho/api/user-settings/recent

200 OK

388ms

47E910B...he.html (ligne 4519)

GET http://localhost:8080/pentaho/api/user-settings/recent?ts=1452625088157

200 OK

44ms

jquery-...4952766 (ligne 8)

GET http://localhost:8080/pentaho/api/user-settings/favorites?ts=1452625088408

200 OK

30ms

jquery-...4952766 (ligne 8)

JQMIGRATE: Logging is active

cdf-boo...c6437ec (ligne 740)

CDF: InitInstance 0

cdf-boo...c6437ec (ligne 4577)

POST http://localhost:8080/pentaho/api/repos/pentaho-cdf-dd/tmp/.cache/home/admin/messages.properties

200 OK

34ms

cdf-boo...c6437ec (ligne 668)

POST http://localhost:8080/pentaho/api/repos/pentaho-cdf-dd/tmp/.cache/home/admin/messages_fr.properties

200 OK

37ms

cdf-boo...c6437ec (ligne 668)

L'utilisation d'XMLHttpRequest de façon synchrone sur le fil d'exécution principal est obsolète à cause de son impact négatif sur la navigation de l'utilisateur final. Consulter http://xhr.spec.whatwg.org/ pour plus d'informations.

	...type,s.url,s.async,s.username,s.password);}else{xhr.open(s.type,s.url,s.async);

cdf-boo...c6437ec (ligne 663, col. 535)

          [Lifecycle >Start] Init[0] (Running: 1)

cdf-boo...c6437ec (ligne 4632)

          [Lifecycle <End  ] Init[undefined] (Running: 0)

cdf-boo...c6437ec (ligne 4642)

L'utilisation de « getPreventDefault() » est obsolète. Utiliser « defaultPrevented » à la place.

	...rnValue===false||src.getPreventDefault&&src.getPreventDefault())?returnTrue:retu...

I have put in bold the lines that show the failure. Without pdfmake.js, we have a correct sequence :

          [Lifecycle >Start] Init[0] (Running: 1)

Dashboa...0f436e4 (ligne 815)

          [Lifecycle >Start] render_btn [buttonComponent] (P: 5 ): preExecution Timing: 0ms since start, 0ms since last event (Running: 1)

Dashboa...0f436e4 (ligne 266)

          [Lifecycle <End  ] render_btn [buttonComponent] (P: 5 ): postExecution Timing: 129ms since start, 129ms since last event (Running: 2)

Dashboa...0f436e4 (ligne 266)

          [Lifecycle <End  ] Init[0] (Running: 0)

It is as if the reference of the button has vanished...
I use pentaho 5.4 with Ctools version 5.4.0.1-130. I did the test with pdfmake 0.1.18 and 0.1.20

pentaho.log is empty, I have a catalina log joined to this post.

Thank you

Benoit

Le vendredi 11 décembre 2015 12:06:18 UTC+1, Benoit Hericher a écrit :

[Benoit Hericher]

Precision : I have upgraded the Ctools in version 15.10.26, it doesn't change anything

Le vendredi 11 décembre 2015 12:06:18 UTC+1, Benoit Hericher a écrit :

[Pedro Vale]

Are you sure the first log (with pdfmake) was obtained while running the dashbaord with debug=true ? 

IT doesn’t seem like it. Anyway, don’t you get an error somewhere ? I see no errors there. Maybe sharing a screenshot of the console would help. Copy paste of the console logs is always messy,

Pedro Vale

Dev Lead

phone: +351 214870076       fax: +351 218041985

Vila Internacional

ED.2 1º Andar

2750-047 Aldeia de Juso, Portugal

pentaho.com

From: <pentaho-...@googlegroups.com> on behalf of Benoit Hericher <heriche...@orange.fr>
Reply-To: <pentaho-...@googlegroups.com>
Date: terça-feira, 12 de Janeiro de 2016 às 19:14
To: Pentaho Community <pentaho-...@googlegroups.com>
Subject: [Pentaho] Re: Ctools : Extending table component

--
You received this message because you are subscribed to the Google Groups "Pentaho Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pentaho-commun...@googlegroups.com.
To post to this group, send email to pentaho-...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/pentaho-community/c140e4ed-6d50-4891-b9a9-0285bf549b93%40googlegroups.com.

[Benoit Hericher]

Hi Pedro,
"Are you sure the first log (with pdfmake) was obtained while running the dashbaord with debug=true ? " : Yes, except if I didn't do it correctly :

Being logged on the PUC, I add '?debug=true' to the URL (e.g : localhost:8080/pentaho/Home?debug=true), refresh the page and then launch the dashboard. But may be it's just stupid...Sorry for that.

I'm pretty sure that there is no error messages in the console and that's very puzzling : I have no idea of where I should investigate...

 I agree that a screenshot would be better. I did a copy/paste of the text because some lines like '[LifeCycle Start]...' are in a very clear font.

I'm going to do the test again ASAP (maybe only tomorrow evening) and post the screenshot.

If I can progress on this problem, I will do it with pleasure, but for now I'm stucked.

Thank you

Benoit



Le vendredi 11 décembre 2015 12:06:18 UTC+1, Benoit Hericher a écrit :

Le vendredi 11 décembre 2015 12:06:18 UTC+1, Benoit Hericher a écrit :

[Nelson Sousa]

Hi Benoit,

You're doing it wrong.

Double click the dashboard tab to open it outside of PUC. You'll get a url such as 

http://localhost:8080/pentaho/api/repos/%3Apublic%3AmyFolder%3AmyDashboard.wcdf/generatedContent

it's here you should add debug=true:

http://localhost:8080/pentaho/api/repos/%3Apublic%3AmyFolder%3AmyDashboard.wcdf/generatedContent?debug=true

Cheers,

Nelson Sousa

Business Intelligence Consultant

nso...@ubiquis.co.uk

+447554442766

--

You received this message because you are subscribed to the Google Groups "Pentaho Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pentaho-commun...@googlegroups.com.
To post to this group, send email to pentaho-...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/pentaho-community/0dd6bf87-5592-472e-98a0-2b335b5a4182%40googlegroups.com.

[Benoit Hericher]

Thank you Nelson, I did as you explained, but the result is not very different (see the screenshot).
I have tried the same after having removed the javascript pdfmake.js : the button is correctly displayed, but although I launched it with debug=true, the console as very few informations too.
One just sees that, in that case, the lifecycle for the component render_button is ok (see the second screenshot)

Benoit


Le vendredi 11 décembre 2015 12:06:18 UTC+1, Benoit Hericher a écrit :

[Nelson Sousa]

If you have debug=true the Javascripts aren't minified. That's why you should use it. It doesn't fix any issues you may be facing, but gives you human-readable javascript. Now you can start debugging.

Nelson Sousa

Business Intelligence Consultant

nso...@ubiquis.co.uk

+447554442766

--

You received this message because you are subscribed to the Google Groups "Pentaho Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pentaho-commun...@googlegroups.com.
To post to this group, send email to pentaho-...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/pentaho-community/f333be7c-54c5-4345-a6f5-05a4ba018194%40googlegroups.com.

[Benoit Hericher]

Nelson, I agree that it couldn't fix the issue (even if we could hope so! :)), but I thought that it would give more detailed information.

I retain that it's a mode where the scripts are not minified, thank you for the information and for your help.

I'll try to find where I could put some breakpoints in pdfmake.js and in cdf-boostrap-script-include.js : if someone as any hint, he will be welcome!

Benoit

[Pedro Vale]

I’d set a breakpoint in the Button Component update method and see if I get something there.

Pedro Vale

Dev Lead

phone: +351 214870076       fax: +351 218041985

Vila Internacional

ED.2 1º Andar

2750-047 Aldeia de Juso, Portugal

pentaho.com

From: <pentaho-...@googlegroups.com> on behalf of Benoit Hericher <heriche...@orange.fr>
Reply-To: <pentaho-...@googlegroups.com>
Date: sexta-feira, 15 de Janeiro de 2016 às 11:54
To: Pentaho Community <pentaho-...@googlegroups.com>
Subject: [Pentaho] Re: Ctools : Extending table component

--
You received this message because you are subscribed to the Google Groups "Pentaho Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pentaho-commun...@googlegroups.com.
To post to this group, send email to pentaho-...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/pentaho-community/14c87fb5-f75a-4064-a864-6152a715c708%40googlegroups.com.

[Benoit Hericher]

I haven't be able to locate the update method of the button in the scripts : just because it's the first time i'm trying to debug a dashboard!
But looking in the console, I've noted that the script Dashboards.Main.js could be interesting.

I put a sequence of breakpoints as you can see on the screenshot. Looking at the right side, on can see that the variable this.components correctly contains the button, so one might expect that the loop at line 842 would be executed one time. But in fact, it's skipped and there is a jump directly to line 848 : if one inspects the value of components.length, it's 0 and not 1 as I expected.

When I repeat the test without including pdfmake.js, the value of components.length is correct : 1

This is very surprising! I wonder how this value can be overrided...

I keep walking...I wonder if I haven't abused whiskey :)

Benoit

[Benoit Hericher]

Looking with more attention at the code : this occurs in Dashboards.initEngine which initialize the vriable components :

var components = initInstance != null
    ? _.where(this.components, {initInstance: initInstance})
    : this.components;

Well, the value of this.components is ok in both cases (with or without pdsmake.js)

In the function _.where, the underscore refers to lodash and pdfmake.js embeds its own copy of lodash : the version 3.1.0

Maybe there is a conflict here.

Benoit

[Benoit Hericher]

I have found this post :

http://stackoverflow.com/questions/27561252/how-to-correctly-include-lodash-underscore-on-website-with-conflicting-libs

I seems to confirm that there is a conflict, but the proposed solution warns that it may be tricky to solve because of asynchronicity and even it's worth to try, I'm not sure to know what I should do.

Benoit

[Benoit Hericher]

More precisely, the conflict is between underscore.js and loadash.js which both defines '_'.
I am not sure that I can even find a simple workaround.
Should I update the jira http://jira.pentaho.com/browse/CDE-775 ?

At the moment, I don't know what I can do.

Thank you

Benoit

[Benoit Hericher]

Hum, someone has done a pullrequest on pdfmake :
https://github.com/bpampuch/pdfmake/pull/443

I will try it, it could solve the problem

Benoit

[Benoit Hericher]

Hi all,

It  probably needs more tests, but it works with the modification of pdfmake.js

I'm going to publish my component on github.

Thanks again for your help

Benoit

[Pedro Alves]

Which component is that?

--

You received this message because you are subscribed to the Google Groups "Pentaho Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pentaho-commun...@googlegroups.com.
To post to this group, send email to pentaho-...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/pentaho-community/c722f450-0f93-467c-9643-82d821ed45df%40googlegroups.com.

[Benoit Hericher]

I have reworked the component of Fernando Maia da Mota (whom I thank a lot : 99,99% of the code was reusable!)

So, it's a table component (it uses datatables https://datatables.net/). I have added buttons (https://datatables.net/extensions/buttons/) to allow : columns selection, export in csv, excel, pdf , copy to clipboard and print.
I have used the property oLanguage to specify the json file containing the language for the interface. I have added a property orientation in order to have a pdf with portrait or landscape orientation.

There is a lot to do : allowing to select the buttons (currently, all are present), selecting the size of the pdf (A4, LEGAL,...), and so on...

Benoit

[Benoit Hericher]

The component is here :

https://github.com/bhericher/TableWithButtons