Appendix A — Skeleton Templates

Copy-paste starting points. Remember: all ids in real usage must be globally unique.

A.1 Module

{
"id": "my_module",
"type": "module",
"version": "1.0",
"context": { "title": "Screen Title" },
"state": { "isLoading": false, "error": "", "data": {}, "onClose": false },
"dependencies": [],
"children": [],
"events": {
"onAppear": [{ "state": { "id": "reset_close", "input": { "onClose": false } } }]
}
}

A.2 Tab Application Root

{
"id": "app_root", "type": "tab",
"children": [
{ "id": "tab_home", "type": "module",
"context": { "_tabTitle": "Home", "_tabImage": "house" },
"state": { "onClose": false }, "children": [] },
{ "id": "tab_settings", "type": "module",
"context": { "_tabTitle": "Settings", "_tabImage": "gear" },
"state": { "onClose": false }, "children": [] }
]
}

A.3 Dynamic List

{
"id": "my_list", "type": "dynamic",
"context": { "_data": "${items}" },
"prototype": {
"id": "my_row", "type": "hstack",
"children": [
{ "id": "row_img",   "type": "image", "context": { "_source": "@{item.image}" },
"style": { "layout": { "width": 40 } } },
{ "id": "row_title", "type": "text",  "context": { "_text": "@{item.title}" } }
]
}
}

A.4 Template Component Use

{ "id": "my_card", "type": "template",
"context": { "_source": "dp://card_template", "_inline": true, "accentColor": "blue" } }

A.5 Push Navigation (link)

{ "id": "nav_link", "type": "link",
"destination": {
"id": "detail_module", "type": "module",
"style": { "navigation": { "navigationTitle": "@{item.name}" } },
"state": { "detail": {}, "error": "", "onClose": false },
"children": [],
"events": { "onAppear": [{ "state": { "id": "reset", "input": { "onClose": false } } }] }
},
"children": [{ "id": "row_text", "type": "text", "context": { "_text": "@{item.name}" } }]
}

A.6 Repo → State Action Chain

{ "repo": {
"id": "load_data",
"input": { "repositoryId": "repo_api", "operation": "read", "params": {} },
"output": {
"success": [{ "state": { "id": "set_data",  "input": { "data":  "@{load_data}" } } }],
"failure": [{ "state": { "id": "set_error", "input": { "error": "@{load_data.message}" } } }]
}
} }

A.7 Conditional Rendering

{ "id": "cond_view", "type": "conditional",
"context": {
"_condition": "{{ notEmpty(${error}) }}",
"_trueComponent": { "id": "err_text", "type": "text",
"context": { "_text": "${error}" },
"style": { "common": { "foreground": { "color": "red" } } } },
"_falseComponent": { "id": "err_empty", "type": "empty" }
}
}

A.8 Condition Action Branch

{ "condition": {
"id": "auth_check",
"input": "{{ notEmpty(${token}) }}",
"output": {
  "success": [{ "repo": { "id": "load_user", "input": { "repositoryId": "repo_api",
    "operation": "read", "params": {} } } }],
  "failure": [{ "state": { "id": "set_unauth", "input": { "error": "Login required" } } }]
}
} }