Tutorial: Idea Box

Build a simple "Idea Box" application where anyone can submit ideas and see them displayed on the page. This tutorial covers creating a table, building a form, configuring a submission pipeline, and displaying data with a repeater.

What You Will Build

• A form where visitors submit ideas (content + author name).
• A list of all submitted ideas, newest first.
• An action pipeline that validates, timestamps, and saves each idea.

Step 1: Create a New App

1. Go to WP-Nexus > Apps in your WordPress admin.
2. Click Create App.
3. Name it Idea Box.
4. Click Save.

Step 2: Create the Ideas Table

1. In your Idea Box app, go to the Tables tab.
2. Click Add Table.
3. Name the table ideas.
4. Add these columns:

Column Name	Type	Description
content	text	The idea text
author_name	varchar(255)	Who submitted it
created_at	datetime	When it was submitted

5. Click Save Table.

TIP

The id column is created automatically as an auto-incrementing primary key. You do not need to add it.

Step 3: Create a Component

1. Go to the Components tab.
2. Click Add Component.
3. Name it Idea Box Page.
4. You are now in the visual UI builder.

Step 4: Build the Submission Form

Add these widgets to the canvas:

1. Heading -- Text: Share Your Idea.
2. Form Container -- This wraps the form fields.

Inside the Form Container, add:

3. Textarea -- Name: content, Label: Your Idea, Required: true.
4. Text Input -- Name: author_name, Label: Your Name, Required: true.
5. Submit Button -- Text: Submit Idea.

Your widget tree should look like:

Heading ("Share Your Idea")
Form Container
  ├── Textarea (name: "content")
  ├── Text Input (name: "author_name")
  └── Submit Button ("Submit Idea")

Step 5: Configure the onSubmit Pipeline

Select the Form Container widget and open the Actions panel. Click Configure onSubmit to open the pipeline builder.

Add these nodes and connect them in order:

Node 1: Context

This is the entry point. It collects the form field values (content, author_name).

Node 2: Set Field

Set the created_at timestamp:

fieldName: "created_at"
expression: "now()"

Node 3: Validate

Add these validation rules:

[
  { "field": "content", "rule": "required" },
  { "field": "content", "rule": "min_length", "value": "5" },
  { "field": "author_name", "rule": "required" },
  { "field": "author_name", "rule": "min_length", "value": "2" }
]

Node 4: Save Row

tableId: (your ideas table ID)

Node 5: Output

Connect Save Row to Output. This returns the saved row to the frontend.

Final pipeline:

Context → Set Field (created_at) → Validate → Save Row → Output

TIP

If validation fails, the pipeline stops at the Validate node and returns error messages. The form automatically displays them next to the relevant fields.

Step 6: Display Ideas with a Repeater

Below the form, add a Divider widget for visual separation, then add a Heading with text Recent Ideas.

Next, add a Repeater widget. Configure its data source:

Data Source Pipeline

1. Add a Table Query node:

   tableId: (your ideas table ID)
   orderBy: "created_at"
   order: "DESC"
   limit: 50

2. Add a Result node and connect it.

Table Query → Result

Repeater Template

Inside the Repeater, add:

1. Card container with these children:
   • Text -- Content: { {row.content}}
   • Container (flex, row, justifyContent: space-between)
     • Text -- Content: By { {row.author_name}}, font size: 14px, color: #666
     • Text -- Content: { {date_format(row.created_at, 'M j, Y g:i A')}}, font size: 14px, color: #999

Step 7: Style the Components

Card styling

padding: 16px
borderWidth: 1px
borderColor: #e0e0e0
borderRadius: 8px
margin: 0 0 12px 0
backgroundColor: #ffffff

Idea text

fontSize: 16px
color: #333
margin: 0 0 8px 0

Step 8: Add a Shortcode

1. Save your component.
2. Go to the Components tab.
3. Copy the shortcode shown for the Idea Box Page component (e.g., [wp_nexus app="idea_box" component="idea_box_page"]).
4. Paste it into any WordPress page or post.

TIP

Slugs use underscores, not hyphens. The shortcode attributes must match the exact slugs defined in WP-Nexus (e.g., idea_box, not idea-box).

Step 9: Test It

1. Visit the page with the shortcode.
2. Fill in an idea and your name.
3. Click Submit Idea.
4. The form should clear and the new idea should appear at the top of the list.
5. Try submitting with empty fields to see validation errors.

What You Learned

• Creating a custom database table with WP-Nexus.
• Building a form with Form Container, inputs, and a Submit Button.
• Configuring an action pipeline: Context, Set Field, Validate, Save Row, Output.
• Displaying data with a Repeater and Table Query data source.
• Using expressions like { {row.content}} and { {date_format(...)}} in widgets.

Next Steps

• Add a Rate Limit node to prevent spam.
• Add a Sanitize node to clean input.
• Add a delete button per idea (see Delete Row).
• Require login to submit ideas (see Require Auth).