{ "templates": { "pretty_input": { "type": "input", "width": { "type": "match_parent" }, "height": { "type": "wrap_content" }, "margins": { "left": 16, "top": 8, "right": 16, "bottom": 8 }, "paddings": { "left": 16, "top": 10, "right": 16, "bottom": 10 }, "alpha": 1.0, "alignment_horizontal": "center", "alignment_vertical": "center", "background": [ { "type": "solid", "color": "#0e000000" } ], "border": { "corner_radius": 8 }, "font_size": 16, "font_weight": "medium", "text_color": "#000000", "$text_variable": "variable", "$hint_text": "hint", "hint_color": "#888888", "highlight_color": "#e0bae3", "line_height": 22 }, "pretty_text": { "type": "text", "width": { "type": "match_parent" }, "height": { "type": "wrap_content" }, "paddings": { "left": 32, "top": 4, "right": 16, "bottom": 4 }, "alpha": 1.0, "alignment_horizontal": "center", "alignment_vertical": "center", "font_size": 16, "font_weight": "medium", "text_alignment_horizontal": "left", "text_alignment_vertical": "center", "text_color": "#000000" }, "button": { "type": "text", "width": { "type": "match_parent" }, "height": { "type": "wrap_content" }, "margins": { "left": 16, "top": 16, "right": 16, "bottom": 16 }, "paddings": { "left": 16, "top": 16, "right": 16, "bottom": 16 }, "alpha": 1.0, "alignment_horizontal": "center", "alignment_vertical": "center", "background": [ { "type": "solid", "color": "#ffdc60" } ], "border": { "corner_radius": 4, "has_shadow": 1 }, "font_size": 20, "font_weight": "medium", "text_alignment_horizontal": "center", "text_alignment_vertical": "center", "text_color": "#000000" } }, "card": { "log_id": "ui_test_card", "variables": [ { "name": "input", "type": "string", "value": "37" }, { "name": "allow_empty", "type": "boolean", "value": 0 }, { "name": "value_are_too_small_variable", "type": "boolean", "value": 0 }, { "name": "minimum_value", "type": "string", "value": "42" } ], "states": [ { "state_id": 0, "div": { "type": "container", "width": { "type": "match_parent" }, "height": { "type": "wrap_content" }, "paddings": { "top": 8, "bottom": 8 }, "items": [ { "type": "pretty_text", "text": "Minimum value:" }, { "id": "input", "type": "pretty_input", "variable": "minimum_value", "hint": "Minimum value", "keyboard_type": "number" }, { "type": "pretty_text", "text": "Value:" }, { "id": "input", "type": "pretty_input", "variable": "input", "hint": "value", "keyboard_type": "number", "validators": [ { "type": "expression", "condition": "@{toNumber(input == '' ? 0 : input) >= toNumber(minimum_value == '' ? 0 : minimum_value)}", "allow_empty": "@{allow_empty}", "label_id": "value_are_too_small_title", "variable": "value_are_too_small_variable" } ] }, { "id": "value_are_too_small_title", "type": "pretty_text", "text": "Value are too small", "text_color": "#ff0000", "font_size": 14, "visibility": "@{value_are_too_small_variable ? 'invisible' : 'visible'}" }, { "type": "state", "id": "allow_empty_button", "default_state_id": "false", "states": [ { "state_id": "false", "div": { "type": "button", "text": "Allow empty", "actions": [ { "log_id": "allow_empty_true", "url": "div-action://set_variable?name=allow_empty&value=true" }, { "log_id": "allow_empty_true_button_state", "url": "div-action://set_state?state_id=0/allow_empty_button/true" } ] } }, { "state_id": "true", "div": { "type": "button", "text": "Disallow empty", "actions": [ { "log_id": "allow_empty_false", "url": "div-action://set_variable?name=allow_empty&value=false" }, { "log_id": "allow_empty_false_button_state", "url": "div-action://set_state?state_id=0/allow_empty_button/false" } ] } } ] } ] } } ] } }