Server connect form not passing on variable data to API Action

Wappler General
1

I apologize for the very elementary question I am about to ask…

I cannot seem to get a post variable to be passed along to my API call. Quick background - setting up Backendless to be able to manage users more effectively out of the box and set up social auth. Calling the API that inserts a user without variables works perfectly. i.e.,

jsonData like so:

{
“name”: “Fake User”,
“email”: “fake@gmail.com”,
“password”: “123456789”
}

However, when I update to using the variable from the POST form I get a null value for the name:

{
“name”: “{{$_POST.inp_name}}”,
“email”: “fake@gmail.com”,
“password”: “123456789”
}

Am I missing something on how to add a form variable to the JSON data?

2

Try removing the double quotes & double curly brackets like this:

“name”: $_POST.inp_name

3

Hmmm… Always works for me with the {{ }}…

Are you sure the post value contains what you expect?

4

Thanks for the tip, however, without the quotes I get a JSON not valid error and without the curly brackets it’s just text so the curly brackets denote that it actually is a variable and the quotes around it denote that it’s a text variable, as far as I can tell.

5

@Antony Thanks for the tip, I believe so, when I use the developer options to debug I see each of the form fields in the request payload, i.e., I see the values I have inputted into the form in the request payload so it seems like the variables have been assigned accordingly, but for some reason are not being passed on to the server connect form? This is what my set up looks like:

api
api1938×963 178 KB

Note the API-Key and API-ID have been removed and replaced with what you see there…

6

So I solved it, I’m still not entirely sure why the above didn’t work but all I had to do was put the {{$_POST}} in the JSON Data field.

After reading a few threads it seems the proper way to set up the JSON Data is to have it already set up in the variables/objects of the $_POST form.

2 Likes
7

@KaseyL
All,
I also had the same issue getting this to work. It would be great to have additional simple examples on API calls.
I am now trying to figure out how to consume the JSON response from an API call. :grinning:

To that end, I wrote up the process that I went through to get this working, here are my steps, hope someone finds this helpful and saves time.

Using Wappler to call an external API w/JSON, passing form based input

  1. Create a web page.
  2. Insert a Container
  3. Insert a Row
  4. Insert a column
  5. Insert a Form (form1)
  6. Insert a Horizontal Form Group (one for each variable that you would like to pass to your API call)
  7. Update the Text Input properties: ID and Name to be something meaningful. E.G. If you are passing a URL as a variable, change the names to in_url (Input URL)
  8. After the last Horizontal Form Group, add a button
  9. Edit the button properties: Type = ‘Submit”
  10. Edit the form1 properties ‘Method’ to =’post’
  11. That’s all for now on the form1 configuration. Save the form, we will need to go back to this form once we complete the server side tasks.
  12. In wappler, navigate to the ‘Server Connect’ section to create a new server action.
  13. Name your server action. (I group my server connect actions in categories. E.G. I have a folder for all API calls)
  14. Add a new action step, API Connector > choose API Action
  15. Now let’s configure the API action that you want to execute.
  16. First, import the post variables, to do this, under action steps, click “Globals”, and update the Linked page to be the new web page you just created. If you have only one form you should see the “Form” populated with the form we just created, “form1”, click the “Import from Form” button. You should see a message with the number of variables equal to the number of horizontal form groups that you created.
  17. Validate that the variables have been created by clicking on the $_POST section, you should see the variables from your form. E.G. in_url and any other inputs that were created.
  18. Configure your API call. Under Execute > Steps, click on the API Action: api1 to configure your API call to use these variables.
  19. Update the URL property to the API endpoint that you are calling
  20. Add any necessary Query parameters
  21. Add a header to identify the type as json (Name: content-type, Value: application/json)
  22. *There may be other headers required for authentication, these will be api specific and are not covered here.
  23. Update the Method to POST
  24. Update the data type to JSON
  25. Under JSON data click the pencil icon to active the editor.
  26. To pass the URL value to your API, enter the following in your JSON Data: In this example we identify the parameter and then the value, so the api receives: url: “www.example.com/url.html” or whatever the value of the input txt is when the button is submitted.

{

“url”: “{{$_POST.in_url}}”

}

  1. Save the API by clicking the save icon under Action Steps
  2. Final form configuration, edit the properties of form1, choose “Make Server Connect Form, under action, select the API_action that you just created.
  3. If you would like to receive notifications, based upon the API call you may want to enable notifications.
  4. Under App Structure, highlight the App icon, and click plus to add a new component. Select Notifications.
  5. Under form1 properties, add a new dynamic event, click plus, choose Server connect, “Success”, under notifications, select Success Notification and click plus to add to selected actions, then select it to configure the txt property. In single quotes add you message, E.G. ‘API Request Successfully Submitted’
  6. You should now save all web pages and API’s, publish and test that you can submit an api call using JSON as the method of passing 1…N variables.
2 Likes