Designer Use Guide
Dynamic logic in Fliddo is represented by Dots (Nodes) on the canvas. These dots act as containers that wrap your components in Maple syntax, allowing you to manage programming logic through a visual interface.
1. Syntax & Dot Relationships
Each set of syntax is represented by a specific color-coded dot. Selecting a dot allows you to edit its "values" via a popup menu.
| Logic Type | Dot Color | Syntax Example |
|---|---|---|
| Includes | ● Blue | { inc path/to/template } |
| Conditions | ● Red | { variable == value } ... { end } |
| Loops | ● Orange | { item in collection } ... { loop } |
Variables: Output directly as { VarName } and are visible via the in the Structure panel.
2. Managing Logic on the Canvas
Managing logic does not require a side panel. Interaction happens directly on the canvas via the Node Toolbar.
- The Toolbar: When you click a Dot, a toolbar appears with options to move, delete, or edit the logic.
- Value Popups: Clicking the edit option opens a Modal Popup. Here, you can change the variable names, collection sources, or file paths without touching the raw braces.
- Updates: Changing a value in the popup ( E.g. swapping a loop collection from 'products' to 'posts' ) instantly updates the canvas preview to reflect the new syntax.
3. Wrapping Objects
Logic Dots are functional wrappers. To apply logic to a design, you drag your objects "inside" the Dot's hierarchy. The editor automatically ensures that closing tags like { loop } and { end } stay correctly positioned around your content.
In Fliddo, the Maple Logic Nodes ( colored dots ) are managed through a context sensitive Action Toolbar. This interface allows you to bridge the gap between your visual layout and the dynamic data driving the template.
1. Accessing Logic Settings
To keep the workspace focused on design, logic settings remain hidden until a Node is selected. Clicking on a Blue, Red, or Orange Dot triggers a floating toolbar directly above the selection.
- Value Popup: By clicking the "Edit" icon, a popup window appears. This is where you define the logic parameters such as collection names for loops or variable logic for conditions ( without needing to manually type the syntax ).
- Direct Manipulation: The toolbar provides a Move Handle, allowing you to reposition an entire logic block ( and all the Html elements it wraps ) as a single unit within your template.
2. Node-Specific Controls
The toolbar provides unique functionality depending on the specific logic type you are interacting with:
- Loop Iterations ( Orange Dots ): A unique toolbar button that controls the "Skeleton" view. It allows you to specify how many mock items render on the canvas.
Note: If you update styles on the first item, you must use the "Apply" action in this menu to re-render the additional iterations. - Conditions ( Red & Variable Nodes ): Provides instant access to the variable comparison logic and data binding paths.
- Roles and Members Login: Elements can be wrapped in "Logged In" or "Has Role" logic, the toolbar allows you to quickly adjust the required user permissions for that specific block.
Add Your Feedback