Full wiring examples

Here's what several real wirings actually look like, square by square - exactly as they're connected in the automation editor. The password-storage example using hash is in the "Functions and expressions" chapter.

1. Contact form → save to table → message → back home

Three field names, name/email/message, are accessible directly as variables right after clicking that form's submit button.

Event

Element interaction

elementId: btn_send
mode: click

Action

Run code (advanced)

{{submissionId = {{genId}}}}
{{sdb.messages[{{submissionId}}].name = {{name}}}}
{{sdb.messages[{{submissionId}}].email = {{email}}}}
{{sdb.messages[{{submissionId}}].message = {{message}}}}
{{sdb.messages[{{submissionId}}].submittedAt = now}}

Action

Show message

text: "Message sent, we'll get back to you soon!"

Action

Go to screen

screen: home
transition: fade

2. Loyalty card - a persistent ID and a QR code on first entry

Generates a persistent ID once per visitor and draws a personal QR code from it, with no user action required.

Event

App entry

Action

Create a persistent ID

target: db.loyalty.customerId
type: short

Action

Generate QR code

target: image_qr
text: {{db.loyalty.customerId}}

3. Age condition - demonstrating "yes"/"no" branches

A condition square is the only one with two outputs - this is how you build a real "if / else".

Event

Element interaction

elementId: btn_submit
mode: click

Condition

left: age
operator: >=
right: 18

yes

Action

Go to screen

screen: welcome

Action

Show message

text: "You must be over 18"

4. Scheduled push notification with two buttons

"Send push notification" gets an extra wire output for every button defined on it - tapping the button in the notification itself continues the graph from that exact output. A button with nothing wired to it simply closes the notification quietly.

Event

Scheduled notification

time: 09:00
timezone: Asia/Jerusalem
days: Sun, Mon, Tue, Wed, Thu

Action

Send push notification

title: "Today only!"
body: "20% off everything"
buttons: [Open sale] [Not now]

Button: Open sale

Action

Go to screen

screen: sale

Button: Not now

- not wired -

The notification closes

No follow-up, and that's perfectly fine

5. A "like" button inside a Data Loop row

The row's columns automatically become variables (here postId), and "Run code" performs the addition (+1) - since that's the only way in the language to increment an existing value.

Event (inside a Data Loop row)

Element interaction

elementId: btn_like (inside the row template)
mode: click

Action

Run code (advanced)

{{sdb.posts[{{postId}}].likes = {{sdb.posts[{{postId}}].likes}} + 1}}

Action

Refresh Data Loop

target: dataLoop_posts

6. Paste a phone number and clean it up

Reads whatever the visitor last copied outside the app, strips the dashes out of it, and shows the cleaned-up result - three small actions doing what would otherwise need "Run code".

Event

Element interaction

elementId: btn_paste
mode: click

Action

Paste from clipboard

save to variable: rawPhone

Action

Find and replace text

text: {{rawPhone}}
find: -
replace with: (empty)
save to variable: cleanPhone

Action

Set text in element/input

elementId: lbl_phone_preview
value: {{cleanPhone}}

7. Escape key backs out of a screen

"Key pressed" fires from anywhere on the screen (not while typing in an input), so a keyboard shortcut like this works no matter what the visitor was just doing.

Event

Key pressed

key: Escape

Action

Go back

8. One "Any key" event driving arrow-key movement

"Any key" plus a condition on {{lastKey}} tells keys apart without needing a separate event node for every one - useful for a full set of WASD/arrow-key game controls off of just four of these.

Event

Key pressed

key: (any key)

Condition

left: lastKey
operator: ==
right: "ArrowRight"

yes

Action

Move element

elementId: player
mode: relative
x: 10
y: 0

Action

(check the next key with another condition, e.g. "ArrowLeft")