Servoy Web Services Part-3

Hello,

Welcome back again...Keep your fingers ready to type in some codes now...

Let us create a HTML file and have a form with simply two fields 'firstName' and 'lastName'. We will be doing POST request to post these form data to servoy web service and store them in database.

HTML form contents

 <form id="myForm">
      <label for="name">First Name:</label>
      <input name="firstName" type="text"  /><br>
 <label for="name">Last Name:</label>
 <input name="lastName" type="text"  /><br>
      <input type="button" value="Submit" onclick="postFormDataToServoy();"/>
</form>

Lets add JQuery to our web page...

<script src="jquery.js"></script>

Now lets define the postFormDataToServoy():

function postFormDataToServoy() {

  // Get all the form data and create the JSON
  var formData = {};
jQuery('form').serializeArray().map(function(item) {
formData[item.name] = item.value;
});
 
   // If data is present form a POST request and submit to servoy URL
   if (formData){
      $.ajax({url:'http://ip:port/servoy-service/rest_ws/servoy_web_services/servoyWebServiceMethods/',
      contentType: 'application/json',
      type:'POST',
      data: JSON.stringify(formData),
      dataType: 'json',
      success: function(data) {
alert('success' + data.id);
      },
      error: function(){
alert('fail');
      }
      });
   }
}

Now we have the web page ready with a form to post the data to servoy web service. Let create the ws_create(data) to receive the data and store them.

Servoy ws_create method:

/**
 * Method that will accept the new user data and store them in database
 * @param{Object} newUser
 *
 * @properties={typeid:24,uuid:"8106875A-973C-4D4A-9CAB-F4421F59B473"}
 */
function ws_create(newUser){
// Create a new record in servoy
var rec = foundset.getRecord(foundset.newRecord());   // Creare a new record
rec.firstname = newUser.firstName;  // Store the firstName
rec.lastname = newUser.lastName;  // Store the lastName
// Save the record in database
if(databaseManager.saveData(rec)){
var retVal={};
retVal.surveyUserId = rec.id; // Create the return value with id
return retVal; // Return the value to the form
}
return null;
}

That is it...Host the web page anywhere you want to and access it. Fill up the form and click on submit. We will be receiving the response and will show the message accordingly with the 'id'
of the newly created user.


This is just for posting form data from an external web site to servoy. But what will be use of just posting if we can not fetch data back to web page from servoy. It will be like one way transmission of data. :(

No worries, we have three other methods..remember. We can GET the data from servoy and show it in the web page. We can also DELETE a record from web page. We can UPDATE data as well from the web page..without touching the servoy solution.


I will be explaining these process in my next articles....stay tuned..

Till then..
Happy coding.. :)