Export listed objects to Excel using custom button - version 5.3.4

[weijan lee]

Hi,

How do I export the listed data into excel/csv format in version 5.3.4?

Current, I created a custom button in the correspond json.config and created a js file for that. 

However instead of exporting the data with search criteria, now the data reloaded and retrieved all data at once (and undisplay columns as well) due to the page rendered while the js function was triggered.

Hence the question is do I have to create a random button and js function to export the data into excel, or there is actually a way of doing it within the action.groovy like in previous version 4 by using @Button ?

Hope to hear from you soon.

Thank you.

[Alessio Stalla]

Hi Weijan,

In Portofino 4, the frontend and backend parts of the application live in the same webapp, so you can use @Button.

In Portofino 5, this is not the case; frontend and backend are two separate applications that can be deployed together, but use different technologies. This has some advantages, because you can now replace the frontend with another one (e.g. using React, or a native app on mobile, etc.), however it also means that adding a button is a bit more complicated.

First, you have to add a REST method to the action class defined action.groovy, as you did in P4 with @Button, but using JAX-RS instead of Stripes MVC. You don't have to use @Button anymore, Portofino will discover the method automatically. Once you have the method, you have to invoke it from the UI, with a custom button.

The "right" way to add a button to the UI is to build your web application from source using Maven, and modify and rebuild the Angular application that lives in src/main/frontend. However, unless you already have such a setup and already know some Angular, that requires a long learning curve.

So, in recent versions of Portofino 5, we made it easier to add a custom button using plain JavaScript, as you could see already. There's an example in demo-tt: https://github.com/ManyDesigns/Portofino/blob/master/demo-tt/src/main/frontend/src/pages/projects/config.json and https://github.com/ManyDesigns/Portofino/blob/master/demo-tt/src/main/frontend/src/pages/projects/custom.js. That said, to invoke a method in the backend from the frontend, you'll have to pass the authentication token too, so it's not just a plain AJAX call. I recommend using the HTTP client injected by the Portofino Angular UI into your custom JS:

page.customButtonAction = function () {
  page.http.get(...);
};

"page.http" is a reference to the Angular HTTP client with the API described here: https://angular.io/api/common/http/HttpClient and explained in simpler terms here: https://angular.io/guide/http-request-data-from-server

That requires you to learn and use the HTTP client (and RxJS as a consequence) which may look intimidating; on the bright side, it already handles authentication automatically, so it will send the authentication token for each request and will prompt for a username and password if the session is expired. It's also already integrated with the application's notification system, so in case of an error the user will be notified.

Last but not least, since your objective is to have the user download a file, and the request happens over AJAX, you'll have to take extra steps to make the browser download the response as a file. There are solutions on Stack Overflow using a blob for example. You'll have to do your own research.

I know this all sounds more complicated than it should, but today's web technologies are like that, and Portofino can only do so much.

Cheers,

Alessio

--
You received this message because you are subscribed to the Google Groups "manydesigns-portofino" group.
To unsubscribe from this group and stop receiving emails from it, send an email to manydesigns-port...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/manydesigns-portofino/9226436d-b555-4aea-9aed-0c76b16c3e15n%40googlegroups.com.

[weijan lee]

Hi Alessio,

Appreciate your feedback and suggestions, will give it a try.

Thank you.