Form-format
This document describes the format of the form used in Tasks.
Concept
The form is build up by stacking elements from top to bottom using a json format.
Requirements
The form must consist of:
At least one element
At least one button_confirm
Only one background element
Only one title element
All elements must have unique id's
Entities
<color>
is specified using the format #aarrggbb (for instance #ffff0000 or #774499cc).
<image>
is represented by a base64-representation of a jpeg or png image.
Types of elements
title
The title element is presented as a text in the titlebar
Example
{"id":"1","type":"title","value":"Login to VPN"}
background
The background fills the entire form. It's value can either be a <color> or an <image>
Example:
{"id":"2","type":"background","value":"#ffff0000"} {"id":"2","type":"background","value":""}
image
The image value is an <image> stretched to full width and scaled in height keeping the aspect ratio. A preferable pixel-width of the image is 640.
Attributes:
background_color - <color>
Example:
{"id":"3","type":"image","value":""} {"id":"3","type":"image","value":"", "background_color":"#ff005500"}
label
Label displays a text which are wrapped if the width exceeds the task-width
Attributes:
text_color: <color> text_size: "thin", "extra_small", "small", "medium", "large", "extra_large" text_alignment: "left", "center", "right" text_bold: "true", "false" background_color: <color>
Example:
{"id":"3","type":"label","value":"Hello World!"} {"id":"3","type":"label","value":"Hello World!", "text_color":"#ff0000ff", "text_size":"small", "text_alignment":"right", "text_bold":"true"}
button_confirm & button_reject
Note: Two or more consecutive buttons are displayed side-by-side. If this effect is not desired, separate them with small padding.
Attributes:
text_color: <color> button_color: <color> background_color: <color>
Example:
{"id":"4","type":"button_confirm","value":"Login"} {"id":"4","type":"button_confirm","value":"Login", "text_color":"#ff000000", "button_color":"#ffffaaaa"}
padding
Note: Dynamic padding "eats up" the remaining vertical space of the form. Multiple dynamic padding shares this space equal. All other paddings are fixed sizes.
Possible values: "dynamic", "thin", "extra_small", "small", "medium", "large", "extra_large"
Attributes:
background_color: <color>
Example: {"id":"5","type":"padding","value":"dynamic"} {"id":"5","type":"padding","value":"large", "background_color":"#ffff0000"}
Examples
Example 1

{
"elements":
[
{"id":"1","type":"button_confirm","value":"Confirm"}
]
}
Example 2

{
"elements":
[
{"id":"1","type":"title","value":"Login"},
{"id":"2","type":"background","value":"#ffccccff"},
{"id":"3","type":"padding","value":"dynamic"},
{"id":"4","type":"button_confirm","value":"Confirm"},
{"id":"5","type":"button_reject","value":"Reject"},
{"id":"6","type":"padding","value":"dynamic"}
]
}
Example 3

{
"elements":
[
{"id":"1","type":"title","value":"Confirm login"},
{"id":"2","type":"background","value":"#ff444499"},
{"id":"3","type":"padding","value":"dynamic"},
{"id":"4","type":"label","value":"Welcome!", "text_color":"#ffffffff", "text_size":"large", "text_bold":"true"},
{"id":"5","type":"label","value":"Confirm your login", "text_size":"small"},
{"id":"6","type":"padding","value":"extra_large"},
{"id":"7","type":"button_confirm","value":"Confirm"},
{"id":"8","type":"button_reject","value":"Reject"},
{"id":"9","type":"padding","value":"dynamic"}
]
}
Last updated