How to prevent double entries in a POST or PUT webservice block

When submitting a new data with an image included through a POST or PUT webservice it can take a while for the upload to be finished. In some cases your users may not realize that the upload process is still going and resubmit the same entry, causing duplicates. There are a couple of ways to counter this; for example adding a text label with a warning, or a Logic popup message before the submission is sent in. These solutions aren't perfect though, so in this tutorial I'll show you a method that will prevent your users from clicking the submit button twice. 

PLEASE NOTE that Form (beta) blocks can also use this custom feature. Scroll down to find the "Bonus content". Do these steps first if you're working with a Form (beta) block. 

Prerequisites

• POST/PUT webservice block. (Form (beta) blocks also work, check the note above)
• An Imagepicker control (optional, but most often the cause for duplicate entries due to upload time)
• Any other fields you may want to use
• Some experience with editing your layout in the Source view, and Logic

How to

1. We'll start off with a fairly simple POST webservice block. Our block has an Imagepicker and a Textfield control and will be used as a photo submission page for our test app: 
   
   
   
2. Add a Label control with some text that will indicate that the app is processing the submission and give it a simple name such as uploadLabel:
   
   I have placed the Label below the submit button, but it's up to you where you place it. The same goes for styling. 
   
   
3. Open the Source of your layout and add the following code somewhere between the existing parameters of your new Label control: visible="false"
   
   Example: 
   
   This will hide the label for now. Please note that you may have to replace the quotation marks, as copying them from a webpage can sometimes include unwanted formatting. 
   
   
4. Make sure everything is saved and open the Logic tab of your Webservice block and select the btnExecute.Click state: 
   
   You'll see the following screen: 
   
   Please note: If you're not seeing the btnExecute.Click name, but a btnSubmit.Click name instead, it means that you're not using a Webservice block, but a Form (beta) block. Please scroll down to the "BONUS CONTENT" and perform the steps described first. Then come back to this part of the tutorial. 
   
   
5. Click on the + icon below the ASSIGNMENT label: 
   
   
   
6. Click on the Set Property option: 
   
   
   
7. Click the blue + icon to add another set of fields and add these properties/values:
   
   Please note that in my example I've used the name "uploadLabel" for my Label control. Yours might be different. Adjust the property accordingly. Hit the Finish button. Save your changes. 
   btnExecute.visible
   uploadLabel.visible
   
   
8. Next, click on the + icon that's linked to the first "OK" label: 
   
   This one is linked to the "Success" message of your webservice. 
   
   
9. Again, choose the Set Property option and now add the same properties, but add different values this time: 
   
   Note that these properties are the same as the ones mention above, but with the true/false values switched. 
   
   
10. Do the same for the "OK" label of the "Error" message of your webservice by clicking the remaining + icon: 
    
    
    
11. And add the exact same properties/values as the ones added in step 9. The end result should look something like this: 
    
    This concludes the tutorial. Save your changes and test it! 

What does this actually do? 

When a user hits the Execute button to submit the data, the Webservice is executed in the background and the image is uploaded. During the execution, the "ASSIGNMENT" phase will be in progress and the properties set for this phase will be active. The Execute button will be hidden, and your "Uploading.." label will be shown. 

When the process has completed, either by successfully sending the data or due to an error that prevented the submission, the button will reappear and the label will be hidden. 

Any questions about this tutorial can be sent to support@appmachine.com.

BONUS CONTENT

This custom feature also works for Form (beta) blocks, but you need to modify your Form (beta) block a bit to be able to implement the same Logic actions. 

1. Start by clicking the Logic tab of your Form (beta) block: 
   
   
   
2. Then click on the btnSubmit.Click option (or your own button name if you changed it) and look at the dataprovider by then clicking the Script action: 
   
   Note down the Dataprovider1 name.
   
   
3. Delete the Script. Save it. We'll be coming back in a minute. 
   
   
4. Next, click on the Developer page in the left side menu and locate the Data service that has the same Dataprovider name:
   
   In this example you see two services, since we just noted down the Dataprovider1 name, we now know that "Data" is the service we need. 
   
   
5. Head back over to the Logic tab of your Form (beta) block and add a new Logic action for the btnSubmit.Click. Select the "Webservice" option and select the service with the name we just found in the Developer page: 
   
   
   
6. Finish and save. You now have the same starting point as the POST and PUT web service blocks that allow you to add more Logic actions. This includes adding the "Show message" Logic actions.