Integrating 3rd party JS

Wappler General
1

Hi all, there’s a few custom and 3rd party JS and jQuery plugins I like to use from time to time. I’m just wondering what’s the best way of integrating them into my Wappler app?

I know this could be a little tricky I’ve no idea how to go about calling my server actions from some custom JavaScript and whatever gotyas may be involved.

Thanks in advance.

2

This is a very broad question especially when one considers that third party widgets are mainly client side where server side actions are not needed.

Perhaps you could give us a more specific example of what you ant to achieve.

3

Sure, I was referring to a plugin that may require backend data interaction eg. Kanban board, scheduler etc.

4

In that case I would look for an application that provides a RESTful API like https://kanbantool.com/developer/api-v3#introduction. (This is not an endorsement of the product)

You could also build your own application using Wappler.

5

I am referring to building my own application with Wappler…

6

This sort of confuses me.

In my understanding, a Kanban system, or similar, is no more than a CRUD application that requires a database (Server Conect) and some front end UI (App Connect) for user interaction. Incidentally, in a previous life as an engineer I designed many a Kanban system.

Although I have simplified the application, it is no different to other database driven projects. The choice is to create an in-house product or to subscribe to one of the many cloud based systems.

7

It’s just one example in a broad question.
In the Kanban example, I’d most likely pull in something like http://www.riccardotartaglia.it/jkanban/ but I’d still need to communicate with the backend (JSON).

Fundamentally my question would be, how do I call a Server Connect action from my own JS?
And how can I utilise Wappler’s existing client-side Bootstrap components from my own JS (eg. Can I open a modal programmatically as usual)?

8

Great example!

Where to start. Personally I would follow the advice given in Github as per:

Clone the repo then use npm install for download all the dependencies then launch npm run build for build the project

You can use the Wappler Terminal for the npm commands. Play around with that and gradually convert it to use Bootstrap etc.

9

Sorry, I don’t think you follow. I’ve no issue installing third party dependencies @ben and I’m very comfortable with npm etc. Please see my previous post (questions at the bottom).

10

Hey Niall,

Here’s one way of calling server connect routines from script:

$.post('/dmxConnect/api/banks/addBank.php', {
      public_token: public_token, 
      metadata: metadata
    }, function(result) {
      dmx.parse('scGetBanks.load()');
    });

And in the callback you can see the dmx.parse call which gives you the ability to execute server connect, open modals, etc. The example loads a server connect, and opening a modal would be modalName.show()

–Ken

4 Likes
11

That’s a perfect example, many thanks @mebeingken So I can just use regular jQuery Bootstrap functions or is modalName.show() an App Connect thing?

Final piece of the puzzle: how do I get Server Connect to respond with JSON? Also, can I POST JSON to a Server Connect action?

Thank in advance.

12

.Show() comes from.App connect. I usually just use the editor to setup the desired command, and then copy it to the dmx.parse command.

The output of a server connect itself is json, right? As for coming into server connect, you just use post variables and it will ingest the json.

1 Like
13

Thanks for this, it certainly helps :grin: