Build increment / decrement logic

This tutorial uses Uiflow's Increment/Decrement Quantity template as a starting point to build the following functionality:
Note: This functionality is helpful for a range of use cases, such as store application shopping carts.
Enter a quantity.
Increment or decrement the quantity by 1.
Prevent decrementing the quantity below 0.
Note: The Increment/Decrement Quantity template contains a text input to specify the displayed quantity. This button doesn't contain logic, so you can implement it as needed.
This page outlines how to:
1.​Copy the template UI: This tutorial uses the Increment/Decrement Quantity template UI as a base.
2.​Add increment logic: Explains how to build increment logic.
3.​Add decrement logic: Explains how to build decrement logic.
Copy the template UI
This section describes how to copy the Increment/Decrement Quantity template's Design components to your new project:
1.Open two instances of Uiflow in separate browser tabs.
2.In one browser tab, create a new app.
3.In the other browser tab, open the Increment/Decrement Quantity template as a new project:
a. Navigate to Templates > Learn.
b. Click the Increment/Decrement Quantity template to open it as a new template app.
c. Enter a name for the template app.
d. Click Create App.
4.In the Design view, open the Explorer panel and navigate to the Design Layers section.
5.Right-click Quantity & Button Container and select Copy.
This copies the Quantity & Button Container and the following child components:
Text Input: Space for user to input a quantity.
Icon Container: Container that holds the following icons:
Up Icon: Icon that represents the increment option.
Down Icon: Icon that represents the decrement option.
Button: Button to add the indicated quantity of items.
6.Switch to the browser tab that contains your new app.
7.In the Design view, open the Explorer panel and navigate to the Design Layers section.
8.Right-click Home and select Paste.
The UI hierarchy and visual layout in your app should look similar to the following:
Add increment logic
This section describes how to add logic that increments the displayed quantity by 1 each time the Up Icon is clicked:
1.Navigate to the Logic view and open the Libraries panel.
2.From the Design References section, drag-and-drop the Text Input and Up Icon references into the logic canvas.
3.Select Up Icon and open the Actions menu to add an onClick action node.
4.Wire the Up Icon reference's onClick action to the Text Input's setValue node. This sets the Text Input's value when Up Icon is clicked.
5.Navigate to the Libraries panel and add the following components to the logic canvas:
To Number
Add
To String
6.Select the Add component, open the Actions menu, and set input2 to 1. This sets the increment value for your app.
7.Wire the following nodes:
Text Input: getValue > To Number: input — Converts the Text Input's string data to a numeric value.
To Number: output > Add: input — Passes the To Number's numeric value to the Add component, which increments the value by the quantity configured in Step 6.
Add: result > To String: input — Converts the incremented value to a string.
To String: output > Text Input: value — Updates the Text Input component with the incremented value.
Your completed flow should look similar to the following:
8.In the Studio Preview to the right of the logic canvas, test your increment logic. When you click Up Icon, the quantity should increment.
Add decrement logic
This section describes how to build logic that decrements the input quantity by 1 when the Down Icon is pressed, and enforces a lower limit of 0 on the displayed quantity:
1.Navigate to the Logic view and open the Libraries panel.
2.From the Design References section, drag-and-drop the Text Input and Down Icon references into the logic canvas.
3.Select Down Icon and open the Actions menu to add an onClick action node.
4.Navigate to the Libraries panel and add the following components to the logic canvas:
To Number
Subtract
To String
If
Data Switch
5.Select the Subtract component, open the Actions menu, and set input2 to 1. This sets the amount to subtract from the input value each time the component is called.
6.Select If to open the Actions menu and configure the following settings:
Set the datatype for value1 and value2 to number.
Set operator to < (less than). This triggers the If component's true output if the decremented value is less than 0, and the false output if it's greater than 0.
7.Select Data Switch to open the Actions menu and set the first input call's param to 0. If someone tries to decrement the quantity when it's 0, this returns the param value to 0.
8.Wire the following nodes to set up your decrement logic:
Text Input: getValue > To Number: Input — Converts the Text Input's string data to a numeric value.
To Number: Output > Subtract: Input — Passes the To Number's numeric value to the Subtract component, which decrements the value by the quantity configured in Step 6.
Subtract: result > If: value1 — Checks if the decremented value is less than 0.
Your flow should look similar to the following:
9.Wire the following nodes to build your quantity-check and display logic:
Down Icon: onClick > If: call — Calls the If component when the Down Icon is clicked.
If: true > Data Switch: first call — Calls the first Data Switch input when the decremented value is less than 0.
If: false > Data Switch: second call — Calls the second Data Switch input when the decremented value is greater than 0.
Subtract: result > To String: input — Converts the decremented value to a string.
To String: output> Data Switch: second param — Sets the Data Switch's second call's param to the decremented value.
Data Switch: output call > Text Input: setValue — Sets the Text Input's value when the Data Switch is called.
Data Switch: output param > Text Input: value — Sends the updated value to the Text Input component for display.
Your completed flow should similar to the following:
10.In the Studio Preview to the right of the logic canvas, test your decrement logic. When you click the Down Icon, the text should decrement. When you click the Down Icon and the item quantity is 0, the quantity.
Last modified 1mo ago