AppNoy
Elements
Elements are dragged from the side panel into the phone frame in the editor. Every element has a readable name and a fixed ID (e.g. btn_1, img_2) and a sequence number - the index - shown as "#N" in the properties panel. You can reference the index in a "Run code" action as element[N], to read or write directly to that element on the current screen.
Element categories
| Category | Elements |
|---|---|
| Text & content | Heading · Text · Card · List · Badge · Tags/chips · Accordion (collapsible list) |
| Media | Image · Video · Audio player · Image carousel · Avatar · Icon |
| Input & interaction | Input field · Button · Toggle switch · Star rating |
| Structure & layout | Container · Layout (quick row splits - half/thirds/quarters) · Divider · Spacer · Data Loop |
| Live data & status | Progress bar · Progress ring · Stat counter · Countdown timer · Calendar · Alert banner |
| Game & drawing | Color picker · Shape (rectangle/circle/triangle) · Drawing canvas (freehand drawing with color/brush-size/clear actions) |
| Links | Social links (WhatsApp, Instagram, Facebook, TikTok, email, phone) |
Container vs. Data Loop
These are the only two "container elements" that can hold elements inside them:
- Container - can hold any number of child elements, and lets you lay them out in a column, a row, or a wrapping row (row-wrap).
- Data Loop - reads rows from a server-side data table (sdb.<table>) and repeats its child template once per row. It's allowed only one child - if you want several elements per row (e.g. image + text + button), wrap them in a single container first and put that container inside the loop.
Inside the row template, that row's columns are referenced as {{row.columnName}}. The loop's own fields: collection (table name), sortBy/sortDir (ascending/descending), limit, and an optional row filter filterField / == / != / filterValue - and all of these fields can also take a {{variable}} instead of a fixed value. Full detail on the table itself is in the "Data tables" chapter.
Show/hide and entrance animation
- Hidden at start - a flag on an element that keeps it from showing at all when the app loads, until an automation with a "Show element" action reveals it. Useful for menus, hidden prizes, game results, etc.
- Entrance animation - none / fadeIn / slideUp / slideIn / zoomIn / bounceIn / flipIn, triggered once when the element enters view. An automation can re-trigger the same one on demand with the "Replay entrance animation" action.
- Continuous animation - none / pulse / bounce / float / spin, plays for as long as the element exists (not just once) - a "pay attention here" cue with no automation needed. If both this and an entrance animation are set, the entrance plays first and the continuous one starts once it finishes. An automation can start, swap, or stop it at runtime with the "Set continuous animation" action.
An element marked "hidden at start" that you never wire to any automation with a "Show element" action will stay hidden forever. Always make sure there's a path that reveals it (see the "Common mistakes" chapter for detail).
Input field - field types
An input has a fieldType list that maps directly to an HTML field type: short text, password, long text (textarea), number, date, date+time, time, phone number, email, website (URL). The field's name (fieldName) is what lets you read what the visitor typed as a regular variable (e.g. a field named email is accessible as {{email}} right after a click event on that form's submit button).