Welcome, Guest Login

Support Center

Use RESTful Services to write into a Cloud Collection

Last Updated: Aug 01, 2016 03:21PM EDT

This Tutorial has been retired.
Please refer to 'Add Data into a Cloud Collections from an App'




 

Learn RESTful with 'Capture and Upload'
 

Introduction
In this Tutorial we show how to use RESTful service to upload assets into a Cloud Collection by building Capture and Upload an app which stores picture and text into a Cloud Collection.
Note that it works the same if the app stores pictures and text into a 3rd party CMS using RESTful.
We use Cloud Collection for convenience but feel free to use other REST web services.

This articles walks you through the development of the Capture and Upload app.
For convenience you can also install Capture and Upload in your Workspace.

Installation of the Training App

  • Please go to Dashboard and select 'Tutorial' tab.
  • Install the app 'Capture and Upload' in your Workspace.


Requirements


Capture and Upload Overview
Capture and Upload lets a user take a photo or select a photo from the photo directory then allow the user to add their name an a text comment before storing the photo and the text into a Cloud Collection.
The App uses the Remote Query Service (RQS) to execute a RESTful call. 
It uses 'Select Photo' action to access the camera. The photo is stored in a variable passed as a parameter to the RESTful call. 


Step by Step development

First View 

There are 3 Blocks in this view:

1.    Text Block – My Photos
  • Part of Header. It is a text Block used to Title view.
2.    Image Block used as a Button – Camera Button
  • This Image Block is used as a button. The Tap Event of this Image Block trigger the Action  “Select a Photo” . When that Action is complete meaning when a photo has been selected either form the Camera or from the user photo library, it triggers a View Level Event 'Select Photo Done ' which we will use to display the selected photo and continue our questions.
3.    List block – My List
  • This List Block is used to display the contents of the Cloud Collection associated to this app. Each time we add new photo and text in the Collection we refresh the List.
 



 *You will need to create 2 Layers (described further in this article) first. They are “Data Submit” and “Data Form”
 
Now lets edit the Camera Button Events to choose a photo.



Right click the Image and choose Edit to bring up the Component Settings for the block. From here choose the Events Tab. Choose the option Tap. Here we will add 4 actions.
 

 
1.    Action 1: Delete a Variable
  • Variable Name = selectedPhoto
2.    Action 2: Delete a Variable
  • Variable Name = uploadtext
3.    Action 3: Delete a Variable
  • Variable Name = uploadname
4.    Select a Photo
  • Selected Photo Key = selectedPhoto
           This will create a new variable named [[var:selectedPhoto]]
 

View 2: Image Gallery

Choose "New View" from top menu.



Choose Canvas View from the list of options.  Name it Image Gallery and hit Create.



You can add a text block, or image, or button block to the top left of the canvas as a navigation button to get back to the previous page.



Next Drag in an Image Gallery Block from the Component Selector, under the tab Blocks.



Then you will need to set your Data Source to your cloud collection. The Image you want to input is photo_original and choose to Fit for your sizing of the image.

Next you can input a caption. This will come from your column Text found in your data source. (Further down in this article you will see how we input this text In the Layers description under Layer 2: Data Form)
 

Create 3 Layers:

 Layer 1: Data Submit Layer

This Layer will display the image you either capture, or upload from your existing photo library on your device, and be set to the variable [[var:selectedPhoto]]. This layer will also overlay the Data Form submission Layer.

1. Drag in from the and "Image Block" from the Component Selector, under the “Blocks” tab.

2. Right click the image block you just dropped into the builder. Click the block from the menu that pops up to begin editing fields for this block in the Component Settings that will slide out from the right (Alternatively you can choose the block from the Navigation Panel on the left from the hierarchy of views and blocks found in your app. Just click the block to have the Component Settings slide out from the right)

 Under the General Tab label this block “Captured Image”. The changes made, including naming the block, are saved when you click update at the bottom of the Component Settings.

3. Set image source to [[var:selectedPhoto]]
(All of these changes made under the "Specific Tab" in the Component Settings)
  • Click on Edit Image.
  • Choose Image Source
  • From left column choose expression.
  • Type in [[var:selectedPhoto]]
4. Go back to the Canvas and right click and choose “Edit Canvas”

5. Set the image to be 160 from top 0 from the left 0 from the right and 0 from the bottom. This way the Layer we will set up next (Data Form) will be visible so user  can input values.

6. You will now have a Custom Block that can be used for input on the Remote Query Layer we will set up later.



Layer 2: Data Form

This Layer inputs text for the Name of your picture (inputs entered text into your column [Name] in Cloud Collection), creating the variable [[var:uploadname]]


 
This Layer inputs text for the Description of your picture (inputs entered text into your column [Text] in your Cloud Collection), creating the variable [[var:uploadtext]]
 
This layer also has an image block; in the image below it is a blue UPLOAD image.  This image acts as a button, triggering the Event to “Add Layer = Remote Query” (set under the events tab in Component Settings) which will send the text from the Text input blocks to your Cloud Collection.


Before we add tap actions of the camera button, tap on “Edit View” then choose the “EVENTS” Tab. Scroll down to where you see Select Photo Done. Here you will choose to Add Layer and choose the Layer “Data Form”. Add one more action and select Add Layer and choose the Layer “Data Submit”

 


Layer 3: Remote Query Service

1. URL to https://builder.eachscape.com/data/api.xml


 
2. Method – set to “POST” so that the app knows to post anything we have selected to our Cloud Collection.

3. Fields = 3
*any column of our data source is input into brackets with the term value before it. Ex: if I had a Column labeled Photos in my cloud collection I would input its Name as – value[Photos] (see image below)
  • FIELD # 1: 
             - NAME = values[text] 
               This tells the builder which column to add our input to
             - VALUE = [[var:uploadtext]]
               The variable we set up in the “Data Form”  View can be accessed here in the Variable option from the left
              column when you tap on the Pencil to edit content for this value.
  • FIELD # 2: 
             - NAME = value[Name]  
               This tells the builder to add inputted text to our [Name] Column in our Cloud Collection
             - VALUE = [[var:uploadname]] 
               This tells the builder to add inputted text from Data Form 
 
  • FIELD # 3: 
             - NAME = api_key
               This is the api we generated to make our Cloud Collection our own and not a shared collection when app is
                imported. See:
              http://support.eachscape.com/customer/portal/articles/1430838-setting-up-the-app-capture-and-upload
             - VALUE = api key we generated from our Cloud collection
                See Link below for how to obtain the api key for this field.
               http://support.eachscape.com/customer/portal/articles/1430838-setting-up-the-app-capture-and-upload



4.IMAGE – The image we called “Captured Image”

5.IMAGE NAME = values[Photo][asset]
  • This tells builder as we now know from previous step, to add the image or [asset] to the [Photo] Column of our Cloud Collection.
6.IMAGE FILENAME – image.png
  • Name to give our [asset] (photo we capture or upload from our library to be added to our Cloud Collection)
7.RESPONSE TYPE = XML
 
8.RESPONSE PARSER = XPath
 
9.STATUS CODE VARIABLE = httpStatus
  • This is the variable to use to store the HTTP response code.
10.STATUS CODE REASON VARIABLE = usedValue
  • This is the variable that tells us the reason for response from our [[var:httpStatus]] variable and the server.
 

IMPORTANT

This Remote Query Service Text Upload app is setup with an API key that references a specific Cloud Collection. In order to make the app your own you will need to generate an API from the Cloud Collection attached to the app. This Cloud Collection is called "RQS". 

Here is a support document on how to generate an API key: Generating an API key from an EachScape Cloud Collection.

EVENTS FOR THE REMOTE QUERY SERVICE LAYER:



SUCCESS:
  • Show Alert Popup: Text = “Photo is successfully uploaded”
Lets the user know that the upload worked and image and text was sent to the cloud collection correctly.
  • Refresh Data Source: Choose your data source
Updates the cloud collection and adds a record with new image and text user has inserted.
  • Remove All Layers
  • Refresh Block: Refresh the Block on your first view with the List that displays all the content of your Cloud Collection.
We do this so that whenever you upload a new photo and text the user will see this change as soon as the block is viewed again, now with all our updated content.

FAILURE
  • Show Alert Popup: Text = “Upload failed”
Lets the user know that the upload did not work. Something went wrong. Go back and look to make sure remote query is set up correctly and check to make sure all fields you have filled out are correct.
  • Remove All Layers
NO RESPONSE
  • Show Alert Popup: Text = “Server error [[var:httpStatus]] [[var:usedValue]]. Please try again.
Uses the variable we set up in remote query SPECIFIC Tab.
 

The Workflow
 
Workflow for capturing and uploading an image:

1. Use the select photo action and set the photo to a variable. 
2. Have an Image block somewhere that is driven by that variable (which needs to be refreshed after the photo is selected). 
3. Add the remote query service layer. 

The events run Asynchronously, the Remote Query Service layer will be added before the user is done selecting a photo.
The events work like this: Tap event: select a photo. View's Select Photo Done event: Refresh image block; add a layer (layer has rqs in it). 
 
 

Help us improve! Rate this article:

Yes I found this article helpful

Ask a Question   

support@eachscape.com
http://assets2.desk.com/
false
eachscape
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete