How to integrate 3rd party Javascript library in SmartClient

Classic Servoy
1

Hi Servoy community,

i’d like to use Google Charts API in the Servoy 7 SmartClient.

Here is a simple quick start how to use the Charts API:

https://developers.google.com/chart/int … uick_start

Is it possible to use this in SmartClient?

How do i load the Javascript file?

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

I’d like to display the chart in a HTML_AREA or in scopes.svyJFXWebView.WebViewPanel - is this possible?

Thanks for your help!
Alex

2

Maybe this can be helpful: https://github.com/Servoy/svyGCharts

3

In theory this is possible. We have customers that run NG Client applications inside Smart Client via JavaFX.
It allows them to take advantage of components like charts, etc. You would build an NG Client solution and then direct the WebPanel to that endpoint (using any deeplink invocations needed)

Challenge is that it is difficult to debug because you cannot “see” inside the embedded browser
Also Java is removing built-in support for JavaFX, so if running on Java 11, things will be more tricky

4

Thanks Patrick an Sean for your help!

Is it also possible to use Google Charts without the svyGCharts Module for the NG Client?

Can i load the resources from https://www.gstatic.com/charts/loader.js to use it directly in the Smart Client?

I saw in the old Google Charts “API” it was also possible to create an URL with parameters to create a chart - but this is deprecated.

Or do you know another Charts API to use in Smart Client?

Thanks!
Alex

P.S. @sean your webinars are awesome! ;-)

5

Hi Alex,

Thanks for your feedback on the webinars - We do them for YOU!

It should be possible to do this w/o NG Client and just using the JavaFX WebView.
I guess it really depends if you need a dynamic/stateful session for the chart stuff.
You can pass content directly to the webview via ```
webView.loadContent

So perhaps you can just send it the content to load dynamically. I would try a [simple example](https://developers.google.com/chart/interactive/docs/quick_start) from Google and pass it to the webview.

Let us know how you do
6

Ah, sorry. I linked to an NG client repo. I have made a module in the past that does that for smart and web client. I thought it was that one. Let me see if I can find it.

7

Found it… It requires a few modules (that are not included, because you may already have them): svyUtils, svyComponent, svyJFXWebView and svyUtils$webClient.

Provided as is. No guarantees, but for sure a nice starting point.

svyGoogleCharts$example.servoy (5.82 KB)

svyGoogleCharts.servoy (9.66 KB)

8

cool, thank you patrick and sean for your help! i’ll have a look on it!

9

hmm i tried to import the solution svyGoogleCharts.servoy into my Servoy 7.4 Developer.

It fails with the following message:

Could not import solution: The solution was exported with a newer version of Servoy than you are currently running. Upgrade to at least Servoy 8.2.2 -build 3107 to import this solution.

Is it possible to use it in Servoy 7.4?

Thanks!
Alex

10

i’ve tried to unzip the .servoy file and modify in the version_info.xml the <servoy_version> and <servoy_build>

But now i’ve a checksum error ;-)

Could not import solution: Checksum failure
11

LXS:
Is it also possible to use Google Charts without the svyGCharts Module for the NG Client?

I use Google Charts in Web Client (with WebClientUtils plugin), I don’t know if it can be used in Smart Client

12

7.4 :shock:

Please try the ones attached here

svyGoogleCharts.servoy (9.62 KB)

svyGoogleCharts$example.servoy (5.79 KB)

13

cool, thank you Patrick!
Now i’ve imported the module without problems.

The solution says the module svyAccordionMenu is missing.
Where can i download this module? I can’t find it on the github/Servoy account.

Alex

14

Just remove it. I forgot to take it out.