Hi all,
I would like to understand what is the best method to handle this use case.
I have set up 4 API actions for CRUD operation without any problems.
In the case of creating a new record I would like to use a form for field validation and if everything is ok I should call the CREATE api.
is this the right approach?
I also don't know how to pass the data in JSON to the API.
Thanks in advance for your help
Hey! I recommend you to use API Form action, you can put there all the inputs you need, if json is selected, then the payload will be that way 
Also you can use something like beeceptor and check what's sending:
As you can see, a valid json
If you need to send some cookies on headers, just add credentials="true" on the code, please see: https://community.wappler.io/t/credentials-flag-on-app-connect-api-form/62205/1
Thanks for the reply,
in my case maybe it's not the best way because I have only one form to manage both the insert and the update.
The ideal would be to understand if the form is validated and call the correct api action based on the selected button (Save/Update)
Sorry, don't understand what you mean
In the example above that is possible with the Api Form component, so can you explain what are you trying?
Do you have access to the backend? Why don't handle this serverside? If identity is present then update? Use a condition
I'll try to explain my need better.
I created an API action for create and one for update.
When I select a record in the table I fill a data detail, show the data in the form and enable the Update button.
This button calls the update API.
When I click on the Create new button, I empty the form and enable the save button.
This button calls the create API.
In both cases I should validate the fields before calling the APIs but at the moment I don't know how to do it since I don't do the submit.
I wouldn't like to use the backend because I would have to build an API that calls other APIs and it doesn't seem very logical to me.
I would like to manage everything on the frontend side.
I also encounter another problem.
Although the name of the data passed to the API is written with a capital letter, in the payload it is all lowercase and the API gives me an error because it is case sensitive.
Normally, within your form, you will have a record id field (normally hidden).
In the case of an update this has a value as it is used for the update action.
In the case of a creation form, the ud will be empty as it has not been populated.
In your API action, simply test the value id with a conditional and call the create action if empty else the update action.
Yes this is clear to me and I have set everything in this mode.
What I can't understand is how to validate the fields since the two buttons perform the loading of the API and not the submit of the form
The form should be a server connect form which submits the form contents as JSON to the API action and makes the data available in the picker.
Hey @enriweb77, while your structure of having a seperate endpoint for each CRUD action is correct, unfortunately there's a limitation that Wappler does not fully support this. Like others have mentioned to make it this work you have to have one endpoint that handles both create and update and check with a condition if the ID was passed.
An alternative method to try if you want to keep the seperate endpoints, is to add a dynamic Action URL to the form, append the ID to the URL so you are creating a more RESTful structure and add that to your routing.
Routing:
POST https://your_url/form - route handles the create
POST https://your_url/form/:id - route handles the update as the ID is passed as a param.
Hope that makes sense.
Wappler fully supports this. You can simply set a dynamic action for the Server Connect form through the Dynamic Attributes to have two separate actions depending on the hidden record id value.
<form id="form1" is="dmx-serverconnect-form" method="post" dmx-bind:action="inp_recid.value ? 'path/to/update' : 'path/to/create' ">
So when the hidden field inp_recid has a value call the update endpoint and when it doesn't have a value call the create endpoint.
Thanks for clarifying @Teodor 
I was kinda getting at the same thing, you explained that much better.
An alternative is to use the same endpoint and use the record id inside a condition within a single API like this:
Thanks everyone for the suggestions, I tried both methods but in the end I chose to create an endpoint as suggested by Hyperbytes since I had to manage other actions as well
