Hello,
I am trying to retrieve data (which is a list of images) from a callback, but not sure how to retrieve it into my frontend.
My current workflow is as following
User clicks button on frontend → API Call is made (with a callback url in this) → callback URL is in backend workflow to retrieve data (list of images) after api call is made → data from callback URL backend workflow (list of images) is sent back to frontend.
However, I’m not sure how to set this up…
I have the following currently setup:
Step1 here is the initial API Call, step 2 is getting that data from the callback url which is the list of images.
However, there is no option here to select what those images are… (in that box that says click).
Here is a screenshot of the backend workflow for the callback url:
Any idea what to do from here?
Appreciate any help.
Do you want to share a link to the API docs for this? (as I think you’re doing a few things wrong here, but without seeing the docs it’s hard to say)…
1 Like
Sure:
And the reason I am not using the Bubble plugin they have is because it doesn’t the customizability that I am building in my app. So I prefer to do it this way
Appreciate the help boss
Ok, so it’s fairly straight forward…
First create your backend workflow to receive the webhook (callback), set it to ‘Detect Request Data’, and click the Detect Data button. Copy the URL of the workflow (including /initialize)
Then, set up your API call in the API connector, using the workflow’s URL (including /initialize) as the callback URL, and initialize this API call.
Assuming the API call initializes correctly, it will trigger the webhook workflow which will detect the request data.
Save the webhook workflow accordingly, and add whatever actions you want to the workflow.
Go back to the API connector and remove /initialize from the callback URL.
Now you can add the API call as an action on your page.
In order to know when the webhook has been receive, you’ll need to listen for a change in the database on the page…
So you can either use a ‘do when condition is true workflow’ or you can ‘trigger a custom event when data changes’ to listen out for whatever data it is that the webhook workflow is changing.
1 Like
You haven’t set a parameter on the Custom event, so you can’t tell it what data to watch out for the change.
You’ll need to set it to the same datatype as the backend workflow is modifying, and tell it what field to watch (i.e. newImages)
Okay, I updated it to the parameter, but for some reason it’s not ‘watching’ the dataset.
heres the parameter i set the custom event to ‘images’.
and here is me trying to set the element ‘Image_generations’ to that list of images so it can show on the frontend.
But when triggered the event it still has things to watch as empty.
Does changing the parameter on custom event not change this or is there something else I am supposed to do?
Did you define the thing to watch and the field to watch when triggering the custom event?
How can I define that?
Here is the current settings of the custom event :
I defined the imageData parameter if that is what you mean
That’s because you’re defining a list of things… you can only use that workflow action on a single thing, which you have to specify… you can’t use it on a list.
In any case, I see that your backend workflow is only creating a new thing… so this won’t work in your case at all (you can’t watch for changes on a thing that doesn’t yet exist).
So, in your case you’ll have to use some other method to determine when the backend workflow has run (i.e. a do when condition is true workflow).
Although, personally I’d suggest making things simpler by making a change to some data on the backend that lets you know that the webhook has been triggered - even if it’s just some temporary ‘log’ datatype use specifically for this purpose.
Then you can just use ‘trigger custom event when data changes’ as explained above.
1 Like
I’m not sure I quite understand… this is what I changed it to upon your suggestion:
I changed the backend workflow to this:
Created a new datapoint called ‘log’ which is text, and changing to triggered when this is triggered upon.
Here is the custom event:
I’m still not sure how this will change the list of newImages, since there is nothing to get the list of images from the backend workflow, since I changed it from the image trigger to the log trigger.
And this is the workflow calling upon the trigger:
However, with all this setup, i dont know how I will get that list of images, since I need to watch for that in the backend and not the log (?).
Also, when running this in the preview page, I get the following error:
What exactly are you making changes to now in the backend workflow? (I can’t quite make sense of what you’re trying to do now?)
I am making a change to the ‘log’ thing you recommended I add.
This so I guess it could ‘detect’ when the callback happens as it is listening for a single thing rather than a list of images, which I had to as before.
But I need to change the list of images but not sure how to send that data forward to the frontend to use as an action?
Sorry if that doesn’t make sense.
But what is that? Where is it coming from (what exactly are you searching for in your search?)
It is set here under the imageData data type:
Logs is to watch for trigger for change, and newImages is supposed to be the list of images that I get from the callback, that I want to show on my frontend.
And this is what it is searching for:
Yeah, I meant what is the actual ‘thing’ you’re making changes to (not the datatype)… presumably there is one? And it’s the same one you’re watching for changes on the page?
In any case, if you’re making changes to a thing in the backend workflow, and listening for that change on the front end then everything should work as expected.
If it’s not then something’s going wrong somewhere.
and newImages is supposed to be the list of images that I get from the callback, that I want to show on my frontend.
How and where are you setting that? (you’re not in your screenshot)
1 Like
Oh I see.
I am changing the newImages list with the image list gathered from the callback.
I am also adding the image list gathered from callback into the users data as well:
If you mean where am I setting it, like in my frontend, I have a repeatinggroup with the images there:
Here is a screenshot of the repeating group:
And here is the image within the repeatingroup:
Hopefully this clarifies, thank u
I get this error everytime I get to the trigger custom event section of the workflow where its supposed to be listening for the data chance:
For some reason… when doing initial API call the request data isn’t getting an update. Could this be why everything is broken?
It works perfect when sending the request from postman but when done on my app, no data is detected to the callback URL.
It’s a bit hard for me to follow what you’re doing now…
But this is how I would do it.
On the front end, a button would be clicked, which would trigger a workflow with the following actions:
- Create a new Thing (log)
- Make the API call
- Store the ID of the API response on the Log
- Trigger a custom event when data changes - thing to watch result of step 1 (log), field to watch: ‘Complete’ (yes/no)
The webhook would do whatever actions I need it to do (i.e. create a new thing, or change a thing, add the list of images to a thing, or whatever it is that needs doing).
Then, once all of that is finished, make changes to the ‘Log’ (search for the log by matching the ID to the webhook request data), set the complete field to ‘Yes’ (then delete the Log if you don’t have any need to keep it)
That will trigger the on-page custom event to run, in which you can do whatever it is you need to do.
For some reason… when doing initial API call the request data isn’t getting an update. Could this be why everything is broken?
It works perfect when sending the request from postman but when done on my app, no data is detected to the callback URL.
I’m not entirely sure what you mean by that?..
Are you saying the webhook is not being triggered?
Or it is being triggered, but the request body is empty?
Or something else?
Okay, im trying to follow along here but I am getting lost…
Step 1: Create a new thing (log).
Step 2: API CALL
Step 3:
This is where I am Lost.
What do you mean store the ID of the API Response?
Step 4:
Is this happening in the backend workflow?
Also:
I am only using the webhook to get the images generated URL’s, so I can show them on the frontend and then save them to the user’s data.
It goes api call → images generated in backend (takes 30 sec to 1 minute) → webhook then shows generated url images
