In this tutorial we'll explain the basics of building a POST web service in AppMachine to submit data to your database. Each AppMachine app has its own database that you can use to store data in separate datastores.
We'll be making a simple reporting system where app users can submit reports to the AppMachine database.
Prerequisites
- User registration needs to be enabled
After making sure you've enabled User registration the building process can begin.
Section I - Adding the POST web service block
- Add a Web service block by clicking the red "+ Block" button and selecting it from the Pro blocks tab.
- Select AppMachine as provider.
- Select the POST option from the list of predefined web service types.
- On the next screen we will need to come up with a name for your datastore. For this tutorial we'll use "reports".
!!! Note: You can ignore the dropdown that pops up when you select the field. !!! - Next, we'll have to decide which fields we're going to use in our POST web service. These items will be the fields that the user needs to fill in. Adding additional fields a later time is possible, but we'll cover this in a different section.
We've already added "open" as default value for the status field. This will be explained in a later tutorial where we go deeper into creating a review system for the reports. Click "Next" when you've entered all of your fields names.
!!! Note: Do not use "name" as field name in this step. This value is reserved for the datastore name. !!! - On the next screen you'll get confirmation that your POST web service has been created. Click "Next".
- Give your newly created block a suitable name and click "Finish".
Section II - Adjusting the layout of your POST web service form
- Notice that after selecting the newly created POST web service block all of your fields are already added to the layout, including a "Name" field. Remove this field and save it.
- Add {user:name} as text value to the Username field.
This will automatically fill in the name of the logged in user. - And repeat the same step for the Email field, but add {user:email} in this field.
This will automatically fill in the email address of the logged in user. - Click the "Source" button on the top right corner of the layout editor, and find the source code for the "Date" field.
- Scroll all the way to the right side of the source and copy the binding value for the "Date" field.
Include everything from the binding parameter and the value between (and including) the quotation marks. - Exit the Source view and remove the "Date" field from your layout.
- Click on the "Controls" tab of the layout editor and drag/drop a Date and time picker control to your layout.
Click on the newly added "Date" field and adjust it to your liking. - Next, open the Source view again, and paste the binding parameter that we copied earlier at the back of the newly added "Date" field.
- We'll now do the same for the "Photo" fields, but we'll replace the original fields with Image picker fields.
- And don't forget to add the correct bindings to the newly added "Photo" fields.
- Lastly we will remove the "Status" field, as this should not be visible for the users.
This field is automatically filled in by the default parameter that we've set up in Section I - step 5 and the user should not have the possibility to edit this value.
Section III - Details
Now that the layout looks about right there's a couple more things that we need to do to be able to continue to the next tutorial. Of course you can spend more time on getting the layout of your form to look better, but that's not really our main focus here.
Lock block
We need to make sure that users who aren't logged in cannot access the block to ensure the correct email address is used.
- Step 1 is to add a Lock block.
You'll find it under the Plus blocks. - Pick "Authorisation level" as the lock type.
The default setting for this block will require to have the "Registered" status to access the block, which is exactly what we need. You can adjust the image and description text of the block if needed. - Drag and drop the "Submit Report" block and nest it below the Lock block like this:
And you're done.
Testing the POST web service block
Next it's time to actually use your newly created setup and see whether the POST web service block works as expected. At the same time we'll use this test run to find things we still want to adjust.
- Log in using the Simulator in the AppMachine CMS with a test account that you've created through the Users section. Or you can use the AppMachine Previewer if you have an Android device.
- Unlock the Lock block by clicking the Unlock button.
- Fill in the fields and execute the web service.
- Check the Developer section of the CMS and locate the Custom Object in which your data is stored. The name will be the one you've chosen in the start of this tutorial:
- Verify that your data is submitted:
A couple of things still need some attention:
- Execute button name
- The pop up message after executing the web service
- The user is not redirected after completing the web service execution
Button name
You can change this by selecting the button in your layout under the "Caption". Change it to "Submit" or something similar.
!!! Note: Do not change the "Name" field at this point as that will remove the function the button has. !!!
Popup message
Double-click the button, or select the btnExecute.Click from the Logic tab. Select the first (overlapped) Success Action modal: 
Change the message to your liking. You can do the same for the Error modal.
Behavior after execution
Click the "+" icon behind the message you've just edited. Add whatever action you'd like. Most situations require a "Goto" action to a different block. You can change this whenever you want.
Done.
Now that we've covered all the basics for creating a POST web service block in your AppMachine app we can continue to the next part of the tutorial, which can be found here.
If you have any feedback or questions about this tutorial, please let us know by sending an email to [email protected].