๐Ÿ”ข

Data Operations: Math, Arrays & Strings in Flows

Powerful data operations

7 min read
โ† Back to Blog
FlowsTutorialData

New Data Manipulation Flow Nodes

Until now, doing math or manipulating arrays in Codular meant creative workarounds. Not anymore! We've added 10 powerful data manipulation nodes that let you process data directly in your flows.

Array Operations

arrayPush - Add Items to Arrays

Add items to any array variable. Use a direct value or push from another variable.

Example: Todo App
  • User types in TextInput (bound to "todoText" variable)
  • Clicks "Add" button
  • Flow: event โ†’ arrayPush(variableId: "todos", sourceVariableId: "todoText") โ†’ setVariable(todoText, "")
  • The List component showing "todos" automatically updates!

arrayRemove - Remove Items

Remove by index position or by matching value.

Example: Delete todo at position 2

Flow: event โ†’ arrayRemove(variableId: "todos", removeBy: "index", index: 2)

arrayFind - Search Arrays

Find an item in an array and store it in a result variable.

arrayLength - Count Items

Get the number of items in an array. Perfect for showing "3 items in cart" or "12 notifications".

Flow: event โ†’ arrayLength(variableId: "cartItems", resultVariableId: "cartCount")

Math Operations

The mathOperation node supports:

  • Add (+): Calculate totals, increment scores
  • Subtract (-): Track expenses, countdown
  • Multiply (ร—): Calculate prices with tax
  • Divide (รท): Split bills, calculate averages
  • Modulo (%): Check even/odd, pagination
Example: Shopping Cart Total

Flow: event โ†’ mathOperation(operation: "multiply", variableIdA: "price", variableIdB: "quantity", resultVariableId: "subtotal")

String Operations

stringConcat - Join Text

Combine variables and static text together.

Format: Use "var:variableId" for variables and "text:literal" for static text. Example: Greeting

Parts: "text:Hello , var:userName, text:! You have , var:notifCount, text: notifications"

Result: "Hello John! You have 5 notifications"

Other New Nodes

  • parseJSON - Convert a JSON string into a usable object/array
  • formatDate - Format dates as YYYY-MM-DD, DD/MM/YYYY, or full text
  • randomNumber - Generate random numbers within a range (great for games!)
  • generateId - Create unique IDs for new items

User Interaction Nodes

We also added these interaction nodes:

  • showConfirm - Yes/No dialog with true/false branching (like ifElse but for user input!)
  • showInputDialog - Popup asking for text input
  • showActionSheet - Bottom popup with multiple options
  • showSnackbar - Brief bottom message with action
  • requestPermission - Properly ask for camera/location/storage access
  • setComponentProp - Dynamically change any component's property
  • openWhatsApp - Open WhatsApp with pre-filled message

These nodes make Codular flows as powerful as actual code. Start using them at mobcraft.in!

C
Codular Team
Building the future of no-code app development

Build Your App Now

No coding required. AI-powered. Free to start.

Get Started Free