API call on button click

Wappler General Need Help
1

Hi, I have a newbie question here.

I have a button and a text area on the page and the intended workflow is like this:

  1. Whenever the button is clicked, make an API call to this endpoint: https://official-joke-api.appspot.com/random_joke.
  2. Display the response in textarea

This is what I did on server side:

image
image491×533 18.9 KB

On client side, I used button onclick event as below. For ‘Action’, I selected the server action I just made.

image
image808×654 31 KB

Up to this point everything seems to look fine. I can see the response correctly from the chrome dev tool:

image
image1152×264 15.2 KB

But I am stuck here as I don’t know how to access this response coming from the Server Action invoked by clicking the button.

What I tried was to add another action step using Control Flow->Run after the server action. And since I want to put the response on the textarea, I tried setting the textarea’s value but I can’t see the server action data from the previous step.

image
image865×671 19.7 KB

Which leads me to my question: How do I access the server action’s data from the client side for such scenario?

In coding, I would usually be able to access its response using the success callback function. As I am pretty new to Wappler, I would really appreciate it if anyone can point me in the right direction on how to go about achieving this simple task.

2

Hi there,

To have the server connect data display in your textarea, you can use the Dynamic Attributes to dynamically set the value. You use the lightning bolt to choose the data returned from your server action.

It will be something like this:

Screen Shot 2020-10-20 at 7.35.26 AM
Screen Shot 2020-10-20 at 7.35.26 AM416×571 31.3 KB

3

It looks like you have created a server connect inside flow. You might need to enable output to access that data inside that. And bind the value via the flow.

Else, the better way is to create a server connect on the page. Keep it as “no-auto-load”. On click, just load the server connect.
Don’t forget to bind that value as shown above by Ken.

4

Thank you both for your responses.

This solution worked for me. Thanks!

5

Glad I could help.

Have changed the category of this post to “How To” so you can mark a reply a solution.
Having correct categorization helps others later.