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

Manage Comments

In this tutorial series you are rebuilding the Checklist example app in Dropsource. Last time you created a page to manage list tasks. The final page in the app will allow the user to manage comments on tasks.

checklist comments page ioschecklist comment page android
Comment page on iOS / Android.

Add a page, choosing no config elements on iOS / but select the App Bar on Android. Name the page “Task Comments”. Set any page and navigation element styling properties you like.

Pass Task Information

This page will display comments for a particular task – in Page Variables on the right, add a variable, naming it “todo_id” and choosing String type. Back in the Tasks page, select the Table Cell / List Tile, and add an Action to its Tapped Event – choosing Go To Page. Select the Task Comments page, the pushup transition, and the task ID from the Data Source container.

task comments transition

Go back to the Task Comments page.

Add Task Elements

The page will display information about the task the user is managing comments for. Add a View at the top of the page, renaming it “Details View” and scaling it to occupy around one tenth of the page height. Set styling properties on the View as you prefer.

Inside the View, add an Image Element, renaming it “Back Image”, and setting the image asset to the back arrow image:

back arrow

Position it to fit well inside the View.

To the right of the arrow image, add a Label / Text View Element, renaming it “Title Label” / “Title Text View” and scaling it to accommodate a single line of text.

comment detail view

Under the top View, add another View, naming it “Add View” and scaling it to be around the same size as the previous View. (You can copy and paste the Add View Element from the Add Checklist page again if you prefer, just alter the placeholder/hint text in the Text Field). Use the background color to distinguish it from the rest of the page. Inside this View add a Text Field named “Add Text Field”, positioned on the left and occupying most of the width. Set the Placeholder text to “Add a comment…”. Add a Button (iOS) / Image Button (Android) to the right of the Text Field, naming it “Add Button”, setting the image asset to the plus image, and scaling it to fit inside the View.

add comment view

Now add a Table / Dynamic List under the Add View, scaling it to occupy the rest of the page height, and renaming it “Comment Table / List” – on iOS set the Content to Dynamic. Add a Table Cell / Dynamic List Tile and rename it “Comment Cell / Tile”, scaling it to accommodate a single comment. Give it the same background color as its parent Element, and add a View inside it, naming it “Comment View”. Make the View occupy most of the Cell / Tile, but with a different background color to distinguish it. Add a Label / Text View inside the View, naming it “Comment Label” / “Comment Text View” and scaling it to occupy most of the width.

comment views

Select the Table / List and check Hidden – the app will show it when it receives the comments from the API. Finally, add an Activity Indicator / Progress Circle near the top of the page, under the Add View.

Your page should look something like this:

checklist comments page

Request Comments

In the API tab, add the GET /todos/{id} endpoint to request comments on the relevant task. Click to open the new request, and in Parameters, select Path. Bind the id field to the Page Variable.

task comment variable

In Responses, bind the Data Source to the Table / List, and the string field inside it to the text Element inside the Table Cell / List Tile. Bind the text field to the Title Label / App Bar Title property.

task comments bound

In the Events for the request, open the 200 response. 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. Then add a Set Value Action, setting the Hidden property of the Table / List to False.

get comment event

This request can run when the page appears, so select the page in the Element Tree and in Properties open the Appeared / Load Event. Add a Run API Request Action, choosing the GET request.

Add Comments

Finally the page needs to add user comments – add the POST /todos/{id}/comment endpoint to the page. In Parameters, set the Pathid field to the Page Variable, and the Querycomment field to the Add Text Field. In the request Events, manage the 200 response, adding a Run API Request Action, selecting the GET request.

This request needs to run when the user taps the Add Button, so select it and open its Tapped Event.

  • Add an If Else, on iOS checking the Add Text Field TextIs Empty value for a boolean False value, on Android checking the Text does not equal an empty string.
    • In the True Event, add a Run API Request Action, selecting the POST request. In the same Event, add a Set Value Action, setting the Add Text Field Text to an empty string.
    • In the False Event, add a Show Alert / Show Snackbar Action, setting the Title / Text to “Invalid Entry”, the iOS Message to “Please enter valid text!”and Style to Alert, with a single “OK” button.

post comment actions

Comments Page Functionality

Now you can finish the app by adding back navigation from the Task Comments page. On iOS, select the Back Image and add a Go Back a Page Action to its Tapped Event, choosing True. On Android, add the Action to the App Bar Nav Icon Tapped Event.

Run the App!

Now you can test the app to see all of its functionality in action. Check out the Settings in the Example App project as well to see how it specifies app preferences – you will need to use these settings if you plan to release your Dropsource apps. Why not try extending it with new features of your own – for example, you could incorporate a map Element, and allow the user to pinpoint locations for tasks.

Was this article helpful to you? Yes No

How can we help?