Store tasks in a database

With the ability to add todo tasks to the list, you may also want to give users the ability to store them in a database.
This topic shows how to store todo tasks in a database via REST requests to the test endpoint

Modify the app to store data

This section shows how to store a new todo task in the database by passing three fields of information in the body of a POST request:
  • todo: The name/description of the task entered by the user.
  • completed: Completion status, hard-coded to false.
  • userId: ID of the end user. Hard-coded to 12.
Note: In practice, the userId will likely be set to the ID returned from the authentication process performed on the Login screen. However, the endpoint used in this example requires an integer, while the authenticator used in previous topics provides a GUID. So this example will hard-code the user's ID to 12.
Note: Ensure you first complete Retrieve tasks from a database, as the steps below build off of some of the components added in that topic.
To modify the app to store todo tasks:
  1. 1.
    Navigate to the Connect tab and locate the REST connection configured in the previous section.
  2. 2.
    Locate the Add Action section and click + to add a new request. The new action will appear under Existing Actions.
  3. 3.
    Select the new action and configure the following:
    • (Optional) Action Name: A descriptive name (e.g. POST request)
    • URL:
    • Method: POST
    • Path: /todos/add
  4. 4.
    Click Publish to Logic to make the REST API connection available to the app.
  5. 5.
    Navigate to the Logic view, select the Explorer pane and drag-and-drop the configured request component onto the app's Home page.
  6. 6.
    Select the request component, open the quick selection Action menu, and ensure its method is POST and its path is /todos/add.
  7. 7.
    Drag-and-drop Variable and Create object components to the left of the request component. The Variable component will be used as an intermediary storage location to hold the task entered by the user. The Create Object component will be used in subsequent steps to construct the JSON body to pass to the request.
  8. 8.
    (Optional) Drag-and-drop a console component to the right of the request. This will be used to log the response from the request.
  9. 9.
    Select the Create Object component, open the quick selection State menu, and add and configure three nodes:
    • todo (string): Leave empty.
    • completed (boolean): Set to false.
    • userId (number): Hard-code to 12.
  10. 10.
    Make the following connections between the new and existing components:
    • Text Input getValue > Variable value: Stores the value entered by the user.
    • Sequence call 1 > Variable setValue: Instructs the Variable component to get the todo task value entered by the user.
    • Variable getValue > Create Object todo: Add the user's todo task value to the JSON object being constructed.
    • Create Object object > request body: Passes the JSON object to the request component where its used as the body of the request.
    • Button onClick > request call: Invokes the POST request when the user clicks the Add Task button.
    • (Optional) request onSuccess > Console log: Instructs the console to log a successful result.
    • (Optional) request response > Console val: Logs the successful response to the console.
    • (Optional) request onError > Console error: Instructs the console to log an error.
    • (Optional) request error > Console val: Logs the error response to the console.
    The components and connections for this section should look similar to the following:
  11. 11.
    Run the app and enter a value in the todo list. If the request was successful, you should see a result similar to the following in the request component's response field:
Congratulations! Your app can now add tasks to a database.