Wappler Comma Array Extension

A Wappler Server Connect extension that converts delimited strings into arrays with advanced options for trimming, custom delimiters, and filtering.

Features

• ✅ Split comma-separated strings into arrays
• ✅ Custom delimiters (semicolons, pipes, tabs, etc.)
• ✅ Automatic whitespace trimming around values
• ✅ Filter empty values from results
• ✅ Server data bindings for dynamic input

Installation

Via NPM (directly in Wappler)

Install directly in Wappler:

1. Open Project Settings → Extensions
2. Click "+" to add extension
3. Enter: wappler-comma-array
4. Save and restart Wappler

Manual Installation

1. Locate your Wappler project directory

   • Find your project folder on your computer

2. Copy the extension files:

   Option A: Using command line

   # Navigate to the extension directory
   cd /path/to/Comma-Array-Extension
      
   # Copy the UI definition file
   cp commaarray.hjson /path/to/YOUR_PROJECT/extensions/server_connect/modules/
      
   # Copy the implementation file
   cp commaarray.js /path/to/YOUR_PROJECT/lib/modules/

   Option B: Manual file copy

   • Copy commaarray.hjson to [YOUR_PROJECT]/extensions/server_connect/modules/
   • Copy commaarray.js to [YOUR_PROJECT]/lib/modules/
   • Create the directories if they don't exist

3. Completely quit and restart Wappler (not just reload the project!)

4. Verify installation:

   • Open a Server Connect API
   • Click "+" to add a step
   • Search for "Split" or look under Mr Cheese
   • You should see "Split Delimited String"
   • Click "+" to add a step
   • Search for "Split" or look under Mr Cheese
   • You should see "Split Delimited String"

Directory Structure After Installation

Your Wappler project should have:

[Your-Wappler-Project]/
├── extensions/
│   └── server_connect/
│       └── modules/
│           └── commaarray.hjson        ← UI definition
└── lib/
    └── modules/
        └── commaarray.js               ← Implementation

Usage

Basic Example: Split Comma-Separated String

Input: "apple,banana,cherry,date"

Output: ["apple", "banana", "cherry", "date"]

Advanced Example: Custom Delimiter with Spaces

Input: "apple; banana; cherry; date"
Delimiter: ;
Trim: true

Output: ["apple", "banana", "cherry", "date"]

Example: Filter Empty Values

Input: "apple,,banana,,,cherry"
Filter Empty: true

Output: ["apple", "banana", "cherry"]

Configuration Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | Input String | Text | Required | The delimited string to split (supports data bindings) | | Delimiter | Text | , | Character(s) to split by (e.g., ,, ;, \|, \t) | | Trim Whitespace | Boolean | true | Remove leading/trailing spaces from each value | | Filter Empty Values | Boolean | true | Remove empty strings from the result |

Output Data Structure

The action returns:

{
  "success": true,
  "array": ["value1", "value2", "value3"]
}

| Field | Type | Description | |-------|------|-------------| | success | Boolean | Whether the operation succeeded | | array | Array | The resulting array of values | | error | String | Error message (only if success is false) |

Example Use Cases

1. Process Tag Lists

Split a comma-separated list of tags from a form input:

Input: "javascript, nodejs, wappler, serverconnect"
Output: ["javascript", "nodejs", "wappler", "serverconnect"]

2. Parse CSV Data

Convert CSV row data into an array for processing:

Input: "John,Doe,[email protected],555-1234"
Output: ["John", "Doe", "[email protected]", "555-1234"]

3. Split Email Lists

Parse semicolon-separated email addresses:

Input: "[email protected]; [email protected]; [email protected]"
Delimiter: ";"
Output: ["[email protected]", "[email protected]", "[email protected]"]

4. Process IDs from Query Parameters

Split multiple IDs for batch operations:

Input: "101,102,103,104,105"
Output: [101, 102, 103, 104, 105]

Server Connect Workflow Example

1. Set Value (get comma-separated input)
   - Value: {{$_GET.tags}}  // "react,vue,angular"

2. Split Delimited String (Array Tools)
   - Input String: {{value1}}
   - Delimiter: ","
   - Trim Whitespace: true
   - Filter Empty: true
   - Output: true

3. Repeat (loop through array)
   - Repeat: {{split1.array}}
   
   3.1. Database Insert
        - tag_name: {{$value}}

Troubleshooting

Extension doesn't appear in Wappler

• ✅ Check files are in correct directories
• ✅ Verify file names match: commaarray.hjson and commaarray.js
• ✅ Completely restart Wappler (quit and reopen)

"Module doesn't exist" error

• ✅ Ensure commaarray.js is in [project]/lib/modules/
• ✅ Check that module name in .hjson is lowercase: module: 'commaarray'

Empty output array

• ✅ Check if input string is empty or undefined
• ✅ Verify delimiter matches your data format
• ✅ Try disabling "Filter Empty Values" to see raw results

Requirements

• Wappler 6.0.0 or higher
• Node.js 14.0.0 or higher
• EJS 3.1.9 or higher

License

MIT

Support

For issues, questions, or contributions, please speak with Cheese on the Wappler Community.