1. Home
  2. Tutorials
  3. Example Apps
  4. Build a Checklist App
  5. Manage Tasks

Manage Tasks

In this tutorial series you are rebuilding the Checklist example app in Dropsource. Last time you created a page to add user lists. The next page in the app will allow the user to manage tasks for each list.

checklist tasks page ioschecklist tasks page android
Tasks page on iOS / Android.

Add another page, selecting the Nav Bar / App Bar, and naming it “Tasks”. Select the page and set the Navigation Item Title (iOS) / App Bar (Android) Title property to “Tasks”. On iOS, check Back Button Enabled. On Android, select the App Bar and in Properties, set the Nav Icon asset to the back arrow image. Select the App Bar and add a Go Back a Page Action to the Nav Icon Tapped Event. Set any page and navigation element styling properties you like.

tasks page style

Pass List Identifier

This page will need the list ID passed from the previous page so that the request can query for the correct data. Open the Page Variables tab on the right and click the plus plus button to add a variable. Enter the name “list_id” and choose a standard Swift / Java String type, checking Is required during inbound navigation.

list id variable

Back in the Lists page, select the List Cell / Tile Element and open Properties > Events, clicking Add for the Tapped Event. Add a Go To Page Action, selecting the Tasks page, the Push transition, and passing the list ID from the Data Source entry bound to the Cell / Tile.

go to tasks page

Add Tasks Elements

The user will be able to add and delete tasks. Add a View Element at the top of the page (you can copy and paste the Add View Element from the Add Checklist page if you prefer, just alter the placeholder/hint text in the Text Field), renaming it “Add View”, and sizing it to accommodate a single line of text plus some padding. Set any background color you like.

add tasks view

Inside the View, add a Text Field on the left, occupying most of the width, and renaming it “Add Text Field”. Set the Placeholder text property to “Add a todo…” and style it however you like.

add task field

To the right of the Text Field, add a Button (iOS) / Image Button (Android), renaming it “Add Button”. Set the Image Asset property to the plus image and style the Button.

add task button

Under the Add View, add a Table / Dynamic List to display existing tasks, renaming it “Task Table” / “Task List”. On iOS set the Content to Dynamic. Position and scale it to fit the rest of the page height and style it with you chosen colors.

task table

Inside the Table / List, add a Table Cell / List Tile, renaming it “Task Cell” / “Task Tile”. Scale it to around the same height as the View above it, and give it the same background color as its parent Element. Inside the Cell / Tile, add a View, renaming it “Task View” and making it fill most of the space but with a small margin around it.

Inside the View add a Button (iOS) / Checkbox (Android) and rename it “Checkbox Button”. Position it to fit well inside the View, with the same width and height – on iOS set its Background Image / Asset to this image:

unchecked

On iOS, select the Button State property and choose Selected. Set the following image as Asset when the user selects a task to mark it done:

checked

To the right of the Checkbox, add a Label / Text View, renaming it “Task Label” / “Task Text View”, and making it fill most of the remaining width. Set the Text to “task”. To the right of the text Element add a Button / Image Button, renaming it “Action Button”, and scaling it to fit inside the View. Set the Background Image / Asset to the actions image you used earlier. (You might prefer to copy and paste the Actions Button Element from the Add Checklist page instead.)

Add an Activity Indicator / Progress Circle under the Add View, setting its background to be transparent – it will display while the data is loading. Select the Table / List and check its Hidden property.

Your page should look something like this:

tasks page tree

Request Tasks Data

This page is going to use four different API requests – start by adding the GET /todos endpoint in the API tab. Click to open it and in Parameters, select Query. For the done field select a static boolean input of False. For the listId field select the list_id Page Variable you added to the page.

bind tasks parameter

In Responses, bind the Data Source to the Table / List, and the text field to the Task text Element.

tasks responses bound

In the request Events, click Add for the 200 Event. On iOS, add the Stop Animating an Activity Indicator Action, selecting the Activity Indicator. On Android, add the Set Value Action, setting the Progress Circle Hidden property to True. Add another Action to show the data, choosing Set Value – set the Table / List Element Hidden property to a static boolean input value of False.

show tasks table

The request can run whenever the page appears, so select the page Element in the Element Tree and open Properties > Events, clicking Add for the Appeared / Resume Event. Add the Run API Request Action, selecting the GET request.

run tasks request

Add Tasks

Add another request to the page, this time POST /todos so that the user can add tasks. Open the request and in Parameters, select Body. Bind the listId field to the Page Variable you created, and the text field to the Text Field Element.

post tasks parameters

When the request receives a successful response, the app will refresh the tasks displayed, so in Events, click Add for the 201 status code. Add a Run API Request Action, selecting the GET request.

post request refresh

The POST request should run when the user taps the Add Button, so select it on the Canvas and open its Tapped Event. First check for valid input by adding an If Else Action, on iOS checking the Add Text Field TextIs Empty property for a boolean False value, and on Android, checking the Text property does not equal an empty string.

add task conditional

In the True Event, add a Run API Request Action, selecting the POST request. Add another Action to the True Event, this time the Set Value Action, setting the Text Field Text to an empty string.

set text empty

In the False Event for the If Else, add a Show Alert (iOS) / Show Snackbar (Android) Action. Set the Title / Text to “Invalid Entry”. On iOS set the Message to “Please enter valid text!”, the Style to Alert, and add a single “OK” button. On Android, set the Button Text to “OK” and the Duration to Indefinite.

invalid task text

Delete Tasks

The user will be able to delete tasks, so add the DELETE /todos/{id} endpoint to the page. In Parameters, select Path, and bind the id field to the selected task ID via the Data Source container. This will send the ID for the task selected by the user, which is bound to the Element along with the other fields in the same array entry.

delete task parameter

The user will tap the Action Button to delete tasks, so select it in the Element Tree and open its Tapped Event.

  • Add a Get Table Cell Index / Get List Tile Index Action, selecting the Task Cell / Tile.
  • Add a Show Alert (iOS) / Show Alert Dialog (Android) Action, setting the Title to “Actions”, the Message to “Please select an action”, the Style to Action Sheet. On iOS add two buttons – “Delete Task” and “Cancel”. On Android set the Positive and Negative Labels to “Delete Task” and “Cancel”. Save the Action.
    • Add an Action to the Delete Task pressed / Positive Button pressed Event – choosing Run API Request and selecting the DELETE request.
    • Add another Action to the same Event, this time Remove Cell from Table / Remove Tile from List, selecting the Table, the index from the Action Data container (returned by the get index Action), and an animation on iOS.

delete task actions

Mark Tasks Done

The user can check a task to mark it complete – add the PUT /todos/{id}/done request to the page. This request uses two parameter types – select Path first, and bind the Id field to the selected task ID via the Data Source.

todo done parameter

Select the Query Parameters next, and bind the done field to the Checkbox Button Element Checked / Selected property.

selected done parameter

Select the Checkbox Button and open its Tapped Event. Add a Run API Request Action, choosing the PUT request. Next add a Get Table Cell Index / Get List Tile Index Action, selecting the Cell / Tile. Finally add a Remove Cell from Table / Remove Tile from List Action, retrieving the index from the Action Data container.

task done actions

Test the app and navigate to the tasks page – try adding tasks, marking them done, and deleting them.

checklist delete ioschecklist delete android

When the user taps a task in the page, they will navigate to the Comments page, which you will create next, so you will revisit the Tasks page to add that navigation.

Was this article helpful to you? Yes No

How can we help?