Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents

 

Edit Existing Item - PUT

If you choose PUT, you will need to enter the URL for a GET call - this is to retrieve the item's data so you can see it while editing.  You can also add additional input fields if needed.

URL

On the REST Service URL step of the wizard, after choosing POST, you can enter two REST URLs, one for PUT and one for GET.  The GET call is needed so the app can display the current data.

Check "Include Custom Headers" if needed and you can add as many key/value pairs as necessary.  (If you're not sure if you need this, check with your REST database administrator)

Click the blue "Send" button and the platform executes the GET call.  Below that, you will see the response from the REST server - if the GET call is correct, you should see "200: The request has succeeded."  It will also show the data returned - the fields here will be used in the next step, Data Mapping.

 

Data Mapping

On the Data Mapping step of the wizard, you can set the input type for each input field that was returned by the GET call.

You can also add additional input fields by clicking the green "Add New Field" button at the bottom of the page.

When you do this, you will need to enter the field path.  Generally, this will be similar to the field path of your other fields, which you can see by clicking the blue arrow beside a field.  For example, if you have a field with Database Name "email", and the field path is "$..email", then the field path of your new input field should start with "$.." - if your new field is "age", you would enter "$..age" as the field path.

 

Dropdown Menu

For each field you set to "Dropdown" on the Data Mapping step, you can enter all the options.  For each option, you must enter a Database Name and a Display Name.

The Database Name is what gets sent to your REST server.  The Display Name is what the app user will see.

For example, let's say that an employee changes positions, and the company has four job titles: "Tester", "Manager", "Developer", or "Sales Associate".  If your REST server stores those titles as "test", "mgr", "dev", and "sales", respectively, then you would fill out the Dropdown Menu step like this:

 

When an app user is editing an employee, there will be a dropdown field for the title field.  The app user will see four options: "Tester", "Manager", "Developer", and "Sales Associate".  If he chooses "Tester", when he submits the page the app will send "test" as the value of the title field.

 

Dropdown menu on iPhone

 

Canvas

After finishing the wizard, go to your new page and design the canvas.

 

Inputs

In the Tool Box on the right, under the Inputs tab, you will find the input fields - these are the ones added by sending the GET call on the REST Service URL step of the wizard, plus any you added on the Data Mapping step of the wizard, minus any you marked as "Do Not Use" on the Data Mapping step.  You can drag an input field onto the canvas and configure it.  You can only put one of each input field on the canvas.

 

Generic Tools

Under the Generic Tools tab, you will find the standard generic tools: Text Label, Image, Plain Button, Button w/ Image, Fly-out Trigger, and HTML Snippet.

 

Action Buttons

In the Tool Box on the right, under the Actions tab, you will find the action buttons:

  • Save Item - when the app user taps this button, the app submits the form (if all required fields have been filled in).
    • **NOTE** Be sure to add the Save Item action button to the canvas or navbar - otherwise the app user will not be able to submit the form!
  • Cancel - when the app user taps this button, the app leaves the page (without submitting the form) and returns to the page it came from (the page where you added the Edit Item action button and targeted this PUT page).
  • Reset Form - when the app user taps this button, the app resets each field to its original value.
  • More - when the app user taps this button, it opens the More menu.

 

 

When designing your Input canvas, you could simply use the input fields by themselves.  You could also use the Text Label and Image tools to enhance the appearance.  The following video shows one way you can do that.  Click here to download the image used in the video.  Of course, you can always design your own image!

Widget Connector
width948
urlhttps://www.youtube.com/watch?v=x05PtGJ_aOQ
height408

**NOTE** The video shows an Input canvas for a POST call, but the canvas behaves exactly the same for a PUT call.


Once you have all your fields on the canvas, be sure to add your action buttons.  You can add an action button to the navbar or to the canvas.  In the navbar, the button can be displayed as a default icon, text, or an image.  On the canvas, the button can be displayed as text or an image.  For an Input page, you should always add a Save Item button.  Most of the time, you will want to add a Cancel button as well.  This video shows how you can do that:

Widget Connector
width948
urlhttps://www.youtube.com/watch?v=5mlPdbter4U
height408

**NOTE** The video shows an Input canvas for a POST call, but the canvas behaves exactly the same for a PUT call.


Targeting

When you have finished designing your page, be sure to give the app user a way to get to the page.  On a Detail page, under the Actions tab in the Tool Box, there is an Edit Item action button.  Grab this and drop it on the canvas or navbar,

then set the target as your PUT Input page:

 

Device Behavior

From a Detail page, the app user taps the Edit Item action button and is taken to the Input page.  Each input field shows the current value by default.  If a field has no value, it will display the Placeholder Text.

iPhone: Detail View to Input View

 

Filter by label (Content by label)
showLabelsfalse
max5
spacesMOSTKB
showSpacefalse
sortmodified
reversetrue
typepage
cqllabel in ("post","rest","add","put","input","component","edit","form") and type = "page" and space = "MOSTKB"
labelsinput form post put rest component add edit

Page Properties
hiddentrue
Related issues