> For the complete documentation index, see [llms.txt](https://docs.fortifiedid.se/mobile_server/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.fortifiedid.se/mobile_server/form-format.md).

# 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> &#x20;

is specified using the format #aarrggbb \
(for instance #ffff0000 or #774499cc).&#x20;

#### \<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:&#x20;

{"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:&#x20;

{"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:&#x20;

background\_color: \<color>

Example: \
{"id":"5","type":"padding","value":"dynamic"} {"id":"5","type":"padding","value":"large", "background\_color":"#ffff0000"}

## Examples

#### Example 1

<div align="left"><figure><img src="/files/i4bjsBwJ5p50RE6wZyj3" alt="" width="188"><figcaption><p>Just one element, a confirm button.</p></figcaption></figure></div>

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

#### Example 2

<div align="left"><figure><img src="/files/R2Xwj8zgiywXX6nLBTk3" alt="" width="188"><figcaption></figcaption></figure></div>

```
{
   "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

<div align="left"><figure><img src="/files/w2Rbsvx15g0qjsuCLslm" alt="" width="188"><figcaption></figcaption></figure></div>

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