Form-format

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


Just one element, a confirm button.

{
   "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"}
   ]
}