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. 

Prerequisites

• A POST/PUT webservice block with: 
• an Imagepicker control,
• 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, but a btnSubmit.Click instead, it means that you're not using a Webservice block, but a Form (beta) block. This specific tutorial is intended for Webservice blocks. 
   
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.