Add a completed task counter

This page outlines how to add a task counter to your application that increments when you check an item and decrements when you uncheck it.
To add a completed task counter to your application:
1.​Create a visual task counter layout​
2.​Configure your counter message​
3.​Build increment logic​
4.​Build decrement logic​
Create a visual task counter layout
This section describes how to add and configure the Container and Text components for your task counter:
1.In your application, open the Design view.
2.Open the Libraries panel and drag-and-drop a Container under the Title.
3.Name the Container Counter.
4.Select Counter and open the Styles tab.
5.Set Width to Fill container.
6.Open the Libraries panel, and drag-and-drop a Text component into the Counter component.
7.Name the Text component Counter message.
Your app should look similar to this:
Configure your counter message
This section outlines how to create a dynamic message for the task counter and display it in your application.
To configure your counter message:
1.Enter Logic view and open the Explorer panel.
2.Under Logic Flows, click the Add a new logic flow icon to create a new logic flow.
3.Name the logic flow Task counter. This is where you will build your task counter's logic.
4.Select the Task counter logic flow and open the Libraries panel.
5.Drag-and-drop a String Template component and a Counter message reference into your application.
Note: The String Template component enables you to create a dynamic string that updates when tasks are checked/unchecked.
6.Select String Template and open the quick selection State menu.
7.In the template field, edit the message as needed. This determines how your counter message appears in the application.
8.Replace ${name}! with ${tasks}. This updates the variable name in the **String Template ** component to tasks.
Note: When you update the variable name in the template field, it also updates the corresponding node name.
9.Set Type to number. This enables you to use tasks as a numeric variable in your counter message.
10.Open String Template’s quick selection Actions menu and update the tasks field to 0 . This sets the default value of tasks to 0 .
11.Connect the String Template's output node to the Counter message's label node. When the setLabel action is called, this sets the Counter message's text label to the dynamic string you created in the String Template.
12.From the Libraries panel's Design References section, drag-and-drop a Home reference into the application.
13.Connect the Home reference's onPageLoad node to the Counter message's setLabel node. When the application loads, this calls the setLabel action.
14.View your app in the Preview panel. It should look similar to this:
Build increment logic
This section outlines how to build the application logic that increments the task counter when you check a task.
To build the increment logic:
1.Open the Libraries panel and drag-and-drop a Task List reference into your logic flow.
2.Double-click into Task List and drag-and drop a reference to its Checkbox child component into the flow.
3.Drag-and-drop the Checkbox's onCheck node outside the Task List boundary. This enables you to access the node from the main application layer.
4.Click the Task Counter breadcrumb to return to the main application layer.
5.Drag-and-drop the following components into your application:
Sequence
Variable
Add
6.Select the Add component and open the quick selection Actions menu.
7.Set input 2 to 1. This is the increment value when the user checks a task.
8.Build the following connections:
(Task List) Checkbox.onCheck > (Sequence) call: Invokes two calls when a box is checked.
(Sequence) call 1 > (Variable) setValue: Sets the Variable's value when a box is checked.
(Sequence) call 2 > (Counter message) setLabel: Sets the Counter message label when a box is checked.
(Variable) getValue > (Add) input: Sets the Add component's input value to the Variable component's value.
(Add) result > (Variable) value: Sets the Variable's value to the sum of the Add component's input and input 2 values.
(Variable) getValue > (String Template) tasks: Sets the String Template's tasks variable to the Variable's value.
9.Preview your app to ensure the counter increments when you check a task.
Build decrement logic
This section outlines how to build the application logic that decrements the task counter when you uncheck a task:
1.Drag-and-drop the Checkbox's onUncheck node outside the Task List boundary. This enables you to access the onUncheck event from the main application layer.
2.Click the Task counter breadcrumb to return to the main application layer.
3.Drag-and-drop the following components into your application:
Subtract
Sequence
4.Select the Subtract component and open the quick selection Actions menu.
5.Set input 2 to 1. This is the decrement value when the user unchecks a task.
6.Select the Variable component and open the Actions menu.
7.Add another setValue action to the component. This enables you to connect the Subtract component to the Variable.
8.Build the following connections:
(Task List) Checkbox.onUncheck > (Sequence) call: Invokes two calls when a checkbox is unchecked.
(Sequence) call 1 > (Variable) setValue: Sets the Variable component's value when a checkbox is unchecked.
(Sequence) call 2 > (Counter message) setLabel: Sets the Counter message's text label when a checkbox is unchecked.
(Variable) getValue > (Subtract) input: Sets the Subtract component's input value to the Variable component's value.
(Subtract) result > (Variable) value: Sets the Variable's value to the difference of the Subtract component's input and input 2 values.
9.Preview your app to ensure the counter decrements when you check a task.
Your task counter should now be fully functional! Continue to the Enable task deletion page to complete your application.