Links

Retrieve tasks from a database

In addition to manually adding tasks, you may also want to give users the ability to retrieve tasks from a database.
This topic shows how to retrieve todo tasks from a database via REST requests to the test endpoint https://dummyjson.com/todos.

Modify the app to retrieve data

To modify the app to retrieve todo tasks from the REST endpoint:
  1. 1.
    Navigate to the Connect tab and click Add a new data connection.
  2. 2.
    (Optional) Change the Connection Name to a more descriptive name (e.g. Todos Endpoint).
  3. 3.
    Locate the REST API option on the Add a new Connection popup and click Add Connection.
  4. 4.
    Set the URL to https://dummyjson.com and the Path to /todos.
  5. 5.
    Click Send in the Test Data Connection pane and verify that the todos JSON collection is returned.
  6. 6.
    Click Publish to Logic to make the REST API connection available to the app.
  7. 7.
    In the Logic view, ensure the Home page is selected.
  8. 8.
    Add another call to the Combine component. This call will be connected in subsequent steps to automatically add todo items retrieved from the request component.
    • Select the Combine component and open the quick selection State menu.
    • Set Num Blocks to 3.
  9. 9.
    Navigate to the Explorer tab and drag-and-drop the Home page reference and the request created in the previous steps onto the Home page. These will be used to get the todo items when the page loads.
  10. 10.
    Connect Home onPageLoad > request call and preview the app. The todos node should appear in the request component upon previewing the app:
  11. 11.
    Drag-and-drop For Each and Get Value at Path components onto the app, and make the following connections:
    • request onSuccess > For Each call: The Request component tells the For Each component to fetch todo tasks when the REST request successfully completes.
    • For Each call > Third Combine call: Each iteration performed by the For each component tells the Combine component to pass along a todo task.
    • For Each item > Get Value at Path object: Each iteration performed by the For each component passes the current todo task element to the next component.
    • Get Value at Path value > Third Combine param: Extracts the todo field from the current element returned from the For Each component.
    The logic should look as follows:
  12. 12.
    Test the app. Upon loading, the Home page should display all of the todo tasks retrieved from the request component:
Congratulations! Your app can now display tasks stored in a database.