"Please wait" when working with APIs

Hello,

I want to create the following workflow and I do not know if Wappler allows that:

  1. Sending a request from a form (input) to an API endpoint - :white_check_mark:
  2. Contacting the same API endpoint automatically until one of the data fields has a certain value and show a “Please wait” message in the page - :grey_question:
  3. When that value exists in the API response, do another action - :grey_question:

Thank you.

That is exactly what the new App connect Flow will be perfect for!

We will be adding the API connector as flow component next to general UI notification / alerts elements to show progress/status

So you will be able to do it all.

Of course for status / progress you can also toggle existing components in the page.

1 Like

Oh really? Wow! :star_struck:

Now I need to work on that new component to understand how it works.

Thank you for the tips!

What do you mean? Loop through all the returned records and compare them to a certain value?

1 Like

Yes, exactly. Contacting the API endpoint maintaining the same variable specified in the form (basically sending the same request) in loop, until the comparison (for example, status==‘READY’) becomes true. While the loop is ongoing, showing a “Please wait…” message in the page until it finishes.

You can use the dynamic show attribute with the “executing” state of your server connect form :slight_smile: just select it in the data picker.

I have to hit automatically the API endpoint multiple times until the comparison becomes true.
The first time, the response could contain (status==‘XXX’), the second time (status==‘YYY’), and so on until the last response contains (status==‘READY’).

How can I do that with the “executing” state? I guess that even during the first call, the “executing” state is completed.

So you submit your form multiple times and not just submit it once, and then loop through all the returned results?
Maybe a more detailed explanation of how your API works would help to answer your question.

Yes, exactly. I want to submit the form multiple times (automatically) and loop through all the returned results until the comparison is true. Then, perform another action (like page redirection or something else). Also, I want to display a message during the loop.

So do you think I can do it with Wappler now or do I have to wait for a new component?

How does your api work exactly?
Do you just need to submit the form and not change anything? Does it randomly return a record on each submit or how do you loop through them?

Yes, I just need to submit the form and not change anything.

At each request, the content may change.

So I need to repeat the same request until the response contains the value I want. Then, perform an action when the value is correct.

During the “loop”, I would like to show a waiting message on the page.

Ok I see - this should be possible with the new flow component, I will try to post some quick guide how to achieve this (tomorrow).

Should the form be submitted manually initially?

1 Like

Yes, it has to be submitted manually initially (input field - variable).

Thank you very much @Teodor!

Hello,

Pleas do the following:

  1. Add an alert on the page, for example in the form. Enter the text you want to display inside it.
  2. Select form, add new dynamic event > server connect > start > alert show (this will add something like alert1.show() in the code )
  3. Add another dynamic event > server connect > done and add there:
data.status == "READY" ? alert1.hide() : form1.submit()

just make sure to replace the form1/alert1 with your actual form/alert ids.

1 Like

Hello @Teodor,

I have good and bad news.

Good news: the form repeats successfully the same request to the API endpoint and the alert message is shown

Bad news: it does not stop even if the “status” value is “READY” and the alert message, of course, does not disappear

Also, why I cannot see on the “Available Actions” panel the structure of the API Schema? Is it a bug?

Are you sure the status value is what you entered?
A

Not sure what do you mean by that?

The “status” value (READY) is not what I enter (a variable provided by the input field). It is the value provided at some point by the API response after hitting multiple time the endpoint.

I cannot see something like this:

I found the issue! It works now!

I changed

data.status == "READY" ? alert1.hide() : form1.submit()

to

data.analyse.data.status == "READY" ? alert1.hide() : form1.submit()

Thank you @Teodor!