Dynamic view

JSON structure

View ID

An ID to be able to open this view.

viewId must be unique

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
{
    "viewId": "createNewTermin",
    "viewType": "view",
    "toolbar": {
        ...
    },
    "background": "white_background_with_corners",
    "items": [
        ...
    ]
}

View type

There are two view types: view and viewWithTabs.

  • view - defines view with items. Contains items
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{
    "viewId": "createNewTermin",
    "viewType": "view",
    "toolbar": {
        ...
    },
    "items": [
        ...
    ]
}
  • viewWithTabs - defines special swipe view with tabs that allows the user to flip left and right through pages. Contains tabs
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{
    "viewId": "contactOverview",
    "viewType": "viewWithTabs",
    "toolbar": {
        ...
    },
    "tabs": [
        ...
    ]
}

Background

A background id

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
{
    "viewId": "createNewTermin",
    "viewType": "view",
    "toolbar": {
        ...
    },
    "background": "white_background_with_corners",
    "items": [
        ...
    ]
}

Data source

It is a configuration for binding this JSON's UI components to the data source

Currently supported types: request

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
{
    "viewId": "createNewTermin",
    "viewType": "view",
    "toolbar": {
        ...
    },
    "dataSource": {
        ...
    },
    "items": [
        ...
    ]
}

Each data source contains:

  • type - a type of data source
  • fieldBinders - a list of binders, which will bind a data to view.

View

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{
    "type": "view",
    "viewId": "contactDataSourceId",
    "fieldBinders": [
        ...
    ],
    "resultBinders": [
        ...
    ]
}
  • resultBinders - a binder of source view data to this view
    • source - an id of the view item in source view
    • prefix - a string which will be added to at the start of the source value
    • postfix - a string which will be added to at the end of the source value
1
2
3
4
5
{
    "source": "radioGroup",
    "prefix": "FREQ=",
    "postfix": ";"
}

List

1
2
3
4
5
6
7
{
    "type": "sync",
    "viewId": "contactDataSourceId",
    "fieldBinders": [
        ...
    ]
}

Sync

  • syncName
1
2
3
4
5
6
7
8
{
    "type": "list",
    "syncName": "syncName",
    "viewId": "contactDataSourceId",
    "fieldBinders": [
        ...
    ]
}

Request

The data will be downloaded and bound on the view

  • type - a request type:
    • GET - a HTTP GET request
  • url - url
1
2
3
4
5
6
7
8
9
{
    "type": "request",
    "viewId": "contactDataSourceId",
    "httpMethod": "GET",
    "url": "v1\/object\/{OID}?serialization={\"type\":\"class\",\"style\":\"detailview\"}",
    "fieldBinders": [
        ...
    ]
}

Binder

An object used to bind data with a view

  • type - there are:
    • string
    • integer
    • date - contains additional required field format "format": "dd.MM.yyyy"
    • timeDuration
  • sourceViewId - a name of data field.
  • destination - an id of view item
1
2
3
4
5
{
    "type": "string",
    "sourceViewId": "Mobiltelefon",
    "destination": "st1"
}

Example of data fetching: data JSON

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{
    "status": {
        "internalStatus": "0",
        "statusMessage": "ok"
    },
    "data": {
        "PhoneNumber": "123456789",
        "Name": "Katharina"
    }
}

binder JSON

1
2
3
4
5
{
    "type": "string",
    "sourceViewId": "Name",
    "destination": "st1"
}

As the result the value "Katharina" will be set to item of "st1" ID.

Also, by using dot "." as separator of field names in sourceViewId, you could bind data with nested structure. For example:

Nested json object

data JSON

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
{
    "status": {
        "internalStatus": "0",
        "statusMessage": "ok"
    },
    "data": {
        "User": {
            "Name": "Katharina",
            "Surname": "Schmitt"
        }
    }
}

binder JSON

1
2
3
4
5
{
    "type": "string",
    "sourceViewId": "User.Name",
    "destination": "st1"
}

As the result the value "Katharina" will be set to item of "st1" ID.

Nested json array

data JSON

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
    "status": {
        "internalStatus": "0",
        "statusMessage": "ok"
    },
    "data": {
        "Users": [
            {
                "Name": "Katharina",
                "Surname": "Schmitt"
            },
            {
                "Name": "Luise",
                "Surname": "Holland"
            },
            {
                "Name": "Gertrude",
                "Surname": "Winkler"
            }
        ]
    }
}

binder JSON

1
2
3
4
5
{
    "type": "string",
    "sourceViewId": "Users.Name",
    "destination": "spinner"
}

As the result the values "Katharina", "Luise", "Gertrude" will be set to item of "spinner" ID.

You could bind arrays only to items with "options" parameters. For example: "radio group", "check box" and "spinner"

Validator

Checks if value in view item with id itemId fulfills the condition from operator by comparing with itemValue. Validator sets characteristic on the settable item

  • type - validator type
  • itemId - id of view item with which you want to compare
  • itemValue - value which will be compared
  • operator - operator
1
2
3
4
5
6
{
    "type": "visibility",
    "itemId": "isSerial",
    "itemValue": "true",
    "operator": "=="
}

Validator types:

  • visibility - sets view item visibility. True - visible, false - is invisible, and doesn't take any space

Operator

Serves for executing logical operations

  • "==" - equal
  • "!=" - not equal
  • ">" - greater
  • ">=" - greater or equal
  • "<" - less
  • "<=" - less or equal

Action

Defines how a user can interact with the item and what should happen after

  • trigger - a type of trigger
    • click - one click on element
    • longClick - long click on element
  • type - an action type
    • openView - opens another dynamic view. Should contain additional field viewId "viewId": "anotherViewId"
    • executeMacro
    • delete
    • phoneCall - opens phone app with phone number provided in parameters
    • shortMessage - opens SMS app with phone number provided in parameters
    • openNativeView - opens another native view. Should contain additional field viewId "viewId": "anotherViewId"
    • receiveValue - closes current view and forwards back parameters from current view and additionally from parameters
    • executeRequest - executes request. Should contain additional fields:
      • url - the request address
      • httpMethod
        • GET - executes GET request
        • POST - executes POST request. Should contain additional array field queryParameters. Can be empty
1
2
3
4
5
6
7
8
9
{
    ...
    "queryParameters": [
    {
            "name": "owner",
            "value": "GSDWebService"
        }
    ]
}
  • successText - a text for snackbar which will be shown after successfully executed action
  • parameters - additional parameters which will be provided to action. They are simple "name-value" values
  • conditionals - checks if the action is be executable
    • source - name of data field
    • value - value which will be compared
    • operator - operator
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
{
    "trigger": "click",
    "type": "executeRequest",
    "successText": "Appointment is created",
    "parameters": [
        {
            "name": "Telefon",
            "value": "123"
        }
    ],
    "conditionals": [
        {
            "source": "Mobiltelefon2",
            "value": "",
            "operator": "!="
        }
    ]
}

Global variables

Values generated on mobile side, which could be used anywhere in JSON. To use them you have to add a variable name and the prefix $. This combination will be replaced by specified value (see below)

For example this json file with global variable LOGGED_USER_NAME:

1
2
3
4
5
6
7
8
9
{
    "type": "singleEditText",
    "id": "title",
    "hint": "Name",
    "value": "$LOGGED_USER_NAME",
    "input": "text",
    "isEditable": true,
    "validators": []
}

will be converted to:

1
2
3
4
5
6
7
8
9
{
    "type": "singleEditText",
    "id": "title",
    "hint": "Name",
    "value": "GSDAdmin",
    "input": "text",
    "isEditable": true,
    "validators": []
}

where $LOGGED_USER_NAME is replaced by logged user name (GSDAdmin).

Global variables names:

  • LOGGED_USER_NAME - a name of currently logged user
  • LOGGED_USER_ID - an ObjectID of currently logged user
  • CURRENT_ISO_DATE - a current time and date presented in ISO format

Toolbar

toolbar is optional object where you can define top bar content and its look/appearance.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{
    "viewId": "createNewTermin",
    "viewType": "view",
    "toolbar": {
        ...
    },
    "items": [
        ...
    ]
}

Simple toolbar

Normal toolbar

  • type - there you can define 3 types: simple, collapsing and complex
  • title - title
  • menuActions - here is the place for the menu buttons (top right corner). They will be presented on view in the same order as placed here
1
2
3
4
5
6
{
    "type": "simple",
    "menuActions": [
        ...
    ]
}

Buttons located in the toolbar

  • id - should be unique and integer
  • title - hint, will appear by long pressing on button
  • icon - icon name from predefined set of icons. Can be empty
  • isHidden - true - list the item in the app bar's overflow menu, false - will place this item in the app bar if there is room for it, if there is no place for item then it will be placed in the app bar's overflow menu
  • action - action
1
2
3
4
5
6
7
8
9
{
    "id": 0,
    "title": "Save",
    "icon": "ic_check_mark",
    "isHidden": false,
    "action": {
        ...
    }
}

Collapsing toolbar

This toolbar is collapsible. By scrolling up the toolbar will collapse to simple state. Otherwise, by scrolling down, the toolbar will expand and show all additional items. Additionally to simple, collapsing contains:

  • subtitle - text behind title
  • avatar - round image where icon can be defined including tint and background color

All additional items are aligned to left.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
{
  "type": "collapsing",
  "title": "test description",
  "subtitle": "Produkt",
  "avatar": {
    "iconId": "ic_product",
    "iconColor": "#ffffff",
    "iconBackgroundColor": "#653fcc"
  },
  "menuActions": [
    ...
  ]
}

Normal state

Collapsed state

Complex toolbar

This toolbar is collapsible. By scrolling up the toolbar will collapse to simple state. Otherwise, by scrolling down, the toolbar will expand and show all additional items. Additionally to collapsing, complex contains:

  • toolbarActions - additional buttons

All additional items are centered.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
{
  "type": "complex",
  "title": "New appointment",
  "subtitle": "",
  "avatar": {
    "iconId": "ic_person",
    "iconColor": "#000000",
    "iconBackgroundColor": "#ffffff"
  },
  "menuActions": [
    ...
  ]
}

Normal state

Collapsed state

Toolbar actions

Additional buttons located in the collapsible area. In the toolbar's collapsed state these buttons are hidden.

  • id - should be unique
  • title - hint, will appear by long pressing on button
  • icon - icon name from predefined set of icons. Can be empty
  • iconColor - color of the icon
  • actions - list of actions
1
2
3
4
5
6
7
8
9
{
    "id": "ta0",
    "title": "Phone",
    "icon": "ic_phone",
    "iconColor": "#FFFFFF",
    "actions": [
        ...
    ]
}

Items

Here is the place for the graphical elements. They will be presented on view in the same order as placed here

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
{
    "viewId": "createNewTermin",
    "viewType": "view",
    "title": "New appointment",
    "items": [
        ...
    ],
    "menuActions": [
        ...
    ]
}

Each item contains:

  • type - predefined names of items types. This field should contain only predefined exact name (see below)
  • id - ID of the item, used to identificate the item in actions
  • validators - list of validators, used to set state on the item based on states of other items in the view. Can be empty

Single text

Type - "singleText"

Simple text box without possibility to edit

  • value - simple text
  • icon - icon name from predefined set of icons. Can be empty
  • iconColor - icon color. Default color is #000000 (black). Can be empty then the default color will be used
1
2
3
4
5
6
7
8
{
    "type": "singleText",
    "id": "titleSt",
    "value": "Create a new appointment",
    "icon": "ic_localization",
    "iconColor": "#000000",
    "validators": []
}

Single edit text

Type - "singleEditText"

Edit text where the user can put just a single line of text

  • hint - hint
  • value - default text
  • input - type of keyboard. Are supported only text (is possible to write any text) and number (is possible to write only decimal numbers)
  • isEditable - defines whether this edit text is possible to edit or not. By default it is true
1
2
3
4
5
6
7
8
9
{
    "type": "singleEditText",
    "id": "title",
    "hint": "Name",
    "value": "",
    "input": "text",
    "isEditable": true,
    "validators": []
}

Number picker

Type - "numberPicker"

Edit text where the user can put just only number values

  • hint - hint
  • value - default number
  • input - type of keyboard. Supported is only decimal (is possible to write only decimal numbers)
1
2
3
4
5
6
7
8
9
{
    "type": "numberPicker",
    "id": "Preis",
    "hint": "Price",
    "value": 0,
    "input": "decimal",
    "isEditable": true,
    "validators": []
}

Multiline edit text

Type - "multilineEditText"

Edit text with the possibility to put many lines of text

  • hint - hint
  • value - default text
  • minLines - the minimal size of item. Type - integer. Can be omitted, then will be used "4" as default value
  • isEditable - defines whether this edit text is possible to edit or not. By default it is true
1
2
3
4
5
6
7
8
9
{
    "type": "multilineEditText",
    "id": "description",
    "hint": "Type a description here...",
    "isEditable": true,
    "value": "",
    "minLines": 20,
    "validators": []
}

Date picker

Type - "datePicker"

A field to select date and time

  • hint - hint
  • value - default value, should be formatted to ISO date or empty
  • dateFormat - format to display date
  • mode - the mode determines whether dates, times, or both dates and times are displayed
    • date - displays a picker for the date in months, days of the month, and years
    • time - displays a picker for the date in hours and minutes
    • dateAndTime - displays two pickers in sequence: the first is the date picker and the next - the time picker. It is a default mode
1
2
3
4
5
6
7
8
9
{
    "type": "datePicker",
    "id": "dpEnds",
    "hint": "Ends on",
    "value": "",
    "dateFormat": "dd.MM.yyyy",
    "mode": "dateAndTime",
    "validators": []
}

Complex date picker

Type - "complexDatePicker"

A set of two date pickers (start date and end date) and one switch (all day). By checking the all-day switch - the two date pickers will have only the possibility to select a date, a time selection will be disabled.

  • start - contains id (is used as normal ID in actions) and value (default value, should be formatted to ISO date or empty). If value is empty, is set to default value (hour rounded to next hour).
  • end - contains id (is used as normal ID in actions) and value (default value, should be formatted to ISO date or empty). If value is empty, is set to default value (hour rounded to next hour + 1)
  • allDay - contains id (is used as normal ID in actions) and value (default value, Boolean)
  • dateFormat - format to display date when allDay is checked
  • dateWithTimeFormat - format to display date with time when allDay is unchecked
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
{
    "type": "complexDatePicker",
    "id": "complexDatePicker",
    "start": {
        "id": "from",
        "value": ""
    },
    "end": {
        "id": "to",
        "value": ""
    },
    "allDay": {
        "id": "wholeDay",
        "value": false
    },
    "dateFormat": "dd.MM.yyyy",
    "dateWithTimeFormat": "dd.MM.yyyy HH:mm",
    "validators": []
}

Time duration

Type - "timeDuration"

A period selector that selects the number of days, hours and minutes. The value is presented in ISO duration format (e.g. 4 days, 12 hours and 30 minutes - "P4DT12H30M")

  • title - title of the item
  • value - default value, should be formatted to ISO duration or empty
1
2
3
4
5
6
7
{
    "type": "timeDuration",
    "id": "timeDuration",
    "value": "",
    "title": "Set alarm",
    "validators": []
}

Switch

Type - "switch"

A simple switch button with just 2 states - checked or unchecked

  • title - name of the switch
  • value - true - checked, false - unchecked
  • icon - icon name from predefined set of icons. Can be empty
  • iconColor - icon color. Default color is #000000 (black). Can be empty then the default color will be used
1
2
3
4
5
6
7
8
9
{
    "type": "switch",
    "id": "isSerial",
    "title": "Serial",
    "value": false,
    "icon": "ic_series",
    "iconColor": "#000000",
    "validators": []
}

Radio group

Type - "radioGroup"

A set of radio buttons. Checking one radio button unchecks any previously checked radio button in the same group

  • title - name of the switch
  • value - selected option, used only in actions
  • options - options in check box. name - option name, value - option ID, isSelected - true - checked, false - unchecked. Can be checked only one option at the same time, if there are more checked options - will be selected the first checked option
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{
    "type": "radioGroup",
    "id": "radioGroup",
    "value": "",
    "options": [
        {
            "name": "Every day",
            "value": "DAILY",
            "isSelected": true
        },
        {
            "name": "Every week",
            "value": "WEEKLY",
            "isSelected": false
        },
        {
            "name": "Every month",
            "value": "MONTHLY",
            "isSelected": false
        },
        {
            "name": "Every year",
            "value": "YEARLY",
            "isSelected": false
        }
    ],
    "validators": []
}

Check box

Type - "checkBox"

A set of two-state buttons that can be either checked or unchecked

  • value - selected option, used only in actions
  • separator - separator used in building value for actions
  • options - options in check box. name - option name, value - option ID, isSelected - true - checked, false - unchecked
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
{
    "type": "checkBox",
    "id": "months",
    "value": "",
    "separator": ",",
    "options": [
        {
            "name": "Monday",
            "value": "MO",
            "isSelected": false
        },
        {
            "name": "Tuesday",
            "value": "TU",
            "isSelected": false
        },
        {
            "name": "Wednesday",
            "value": "WE",
            "isSelected": false
        },
        {
            "name": "Thursday",
            "value": "TH",
            "isSelected": false
        },
        {
            "name": "Friday",
            "value": "FR",
            "isSelected": false
        },
        {
            "name": "Saturday",
            "value": "SA",
            "isSelected": false
        },
        {
            "name": "Sunday",
            "value": "SU",
            "isSelected": false
        }
    ],
    "validators": []
}

Spinner

Type - "spinner"

A quick way to select one value from a set. Touching the spinner displays a dropdown menu with all other available values, from which the user can select a new one

  • value - selected option, used only in actions
  • options - options in check box. name - option name, value - option ID, isSelected - true - checked, false - unchecked. Can be checked only one option at the same time, if there are more checked options - will be selected the first checked option
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
    "type": "spinner",
    "id": "spinner",
    "value": "",
    "options": [
        {
            "name": "Home",
            "value": "HOME",
            "isSelected": true
        },
        {
            "name": "Work",
            "value": "WORK",
            "isSelected": false
        },
        {
            "name": "Other",
            "value": "OTHER",
            "isSelected": false
        }
    ],
    "validators": []
}

Normal state

Expanded state with dropdown list

Button

!WORK IN PROGRESS!

Type - "button"

A button to execute defined action

  • title - name of the button
1
2
3
4
5
6
7
{
    "type": "button",
    "id": "openCalendar",
    "title": "Open My Calendar",
    "value": "",
    "validators": []
}

Single object picker

Type - "singleObjectPicker"

A button to open another dynamic view and next show a result from that view in this item

  • title - name of the button
  • value - default value which is used only in actions
  • icon - left icon name from predefined set of icons. Can be empty
  • iconColor - icon color. Default color is #000000 (black). Can be empty then the default color will be used
  • dataSource - source of data, from which this item will be filled
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
{
    "type": "singleObjectPicker",
    "id": "remindBefore",
    "title": "Reminder",
    "value": "P0DT0H0M",
    "icon": "ic_alert",
    "iconColor": "#000000",
    "dataSource": {
        ...
    },
    "validators": []
}

Multiple object picker

Type - "multipleObjectPicker"

A list with button, by clicking on which you could select many objects

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
{
    "type": "multipleObjectPicker",
    "id": "description",
    "value": "Select attendees",
    "title": "Attendees",
    "dataSource": {
        ...
    },
    "item": {
        ...
    },
    "validators": []
}

Empty picker

Filled picker

Dialog with list of objects

Recipients picker

Type - "recipientsPicker"

Here you could select one or many DOCUframe users.

  • hint - hint
  • value - default recipients, should be separated by value in separator. For example: "value": "Value0,Value1,Value2"
  • separator - separator used in parsing value
1
2
3
4
5
6
7
8
{
    "type": "recipientsPicker",
    "id": "recipientsPicker",
    "hint": "Add recipients",
    "value": "",
    "separator": ",",
    "validators": []
}

Empty picker

Filled picker

Dropdown with list of recipients

Dialog with list of recipients

Text button

Type - "textButton"

A button where value represents a name of that button

  • value - a name of the button
1
2
3
4
5
6
{
    "type": "textButton",
    "id": "textButton",
    "value": "",
    "validators": []
}

Horizontal divider

Type - "horizontalDivider"

A horizontal line. Could not contain any data

  • value - is not used here
1
2
3
4
5
6
{
    "type": "horizontalDivider",
    "id": "horizontalDivider",
    "value": "",
    "validators": []
}

Horizontal layout

Type - "horizontalLayout"

A special item, where you can place inside other items. Items will be in horizontal order.

  • background - a background identifier
  • value - a list of nested items
1
2
3
4
5
6
7
8
9
{
    "type": "horizontalLayout",
    "id": "horizontalLayout",
    "background": "white_background_with_corners",
    "value": [
        ...
    ],
    "validators": []
}

Vertical layout

Type - "verticalLayout"

A special item, where you can place inside other items. Items will be in vertical order.

  • background - a background identifier
  • value - a list of nested items
1
2
3
4
5
6
7
8
9
{
    "type": "verticalLayout",
    "id": "verticalLayout",
    "background": "white_background_with_corners",
    "value": [
        ...
    ],
    "validators": []
}

Tabs

Only presented in viewWithTabs view type. Defines views through which users will flip left and right.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{
    "viewId": "contactOverview",
    "viewType": "viewWithTabs",
    "toolbar": {
        ...
    },
    "tabs": [
        ...
    ]
}

Each tab contains:

  • type - type of the view. There can be:
    • dynamicView and dynamicList - will open dynamic view or list accordingly
    • native - will open predefined and already implemented view
  • id - ID of the view, if it is dynamic view it will search by "viewId"
  • name - name of the tab
  • validators - list of validators, used to set the state on the item based on states of other items in the view. Can be empty
1
2
3
4
5
6
{
    "type": "dynamicView",
    "id": "contactDetails",
    "name": "Overview",
    "validators": []
}

Example

JSON

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
{
    "viewId": "createNewTermin",
    "viewType": "view",
    "toolbar": {
        "type": "simple",
        "menuActions": [
            {
                "id": 0,
                "title": "Save",
                "icon": "ic_check_mark",
                "isHidden": false,
                "action": {
                    "trigger": "click",
                    "httpMethod": "POST",
                    "type": "executeRequest",
                    "url": "v1/appointments",
                    "successText": "Appointment is created",
                    "parameters": [
                        {
                            "name": "owner",
                            "value": "GSDWebService"
                        }
                    ],
                    "queryParameters": [],
                    "conditionals": [
                        {
                            "source": "from",
                            "value": "",
                            "operator": "!="
                        },
                        {
                            "source": "to",
                            "value": "",
                            "operator": "!="
                        }
                    ]
                }
            }
        ],
        "title": "New appointment"
    },
    "background": "white_background_with_corners",
    "items": [
        {
            "type": "singleText",
            "id": "titleSt",
            "value": "Create a new appointment",
            "validators": []
        },
        {
            "type": "singleEditText",
            "id": "title",
            "hint": "Name",
            "value": "",
            "input": "text",
            "validators": []
        },
        {
            "type": "complexDatePicker",
            "id": "complexDatePicker",
            "start": {
                "id": "from",
                "value": ""
            },
            "end": {
                "id": "to",
                "value": ""
            },
            "allDay": {
                "id": "wholeDay",
                "value": false
            },
            "dateFormat": "dd.MM.yyyy",
            "dateWithTimeFormat": "dd.MM.yyyy HH:mm",
            "validators": []
        },
        {
            "type": "switch",
            "id": "isSerial",
            "title": "Serial",
            "value": false,
            "icon": "ic_series",
            "iconColor": "#000000",
            "validators": []
        },
        {
            "type": "singleObjectPicker",
            "id": "rrule",
            "title": "Serial appointment",
            "value": "",
            "icon": "ic_series",
            "iconColor": "#000000",
            "dataSource": {
                "type": "view",
                "viewId": "serialAppointmentSetup",
                "fieldBinders": [
                    {
                        "type": "string",
                        "sourceViewId": "radioGroup",
                        "destination": ""
                    }
                ],
                "resultBinders": [
                    {
                        "source": "radioGroup",
                        "prefix": "FREQ=",
                        "postfix": ";"
                    },
                    {
                        "source": "every",
                        "prefix": "INTERVAL=",
                        "postfix": ";"
                    },
                    {
                        "source": "etEnds",
                        "prefix": "COUNT=",
                        "postfix": ";"
                    },
                    {
                        "source": "dpEnds",
                        "prefix": "UNTIL=",
                        "postfix": ";"
                    },
                    {
                        "source": "months",
                        "prefix": "BYDAY=",
                        "postfix": ""
                    }
                ]
            },
            "validators": [
                {
                    "type": "visibility",
                    "itemId": "isSerial",
                    "itemValue": "true",
                    "operator": "=="
                }
            ]
        },
        {
            "type": "button",
            "id": "openCalendar",
            "title": "Open My Calendar",
            "value": "",
            "validators": []
        },
        {
            "type": "multipleObjectPicker",
            "id": "attendees",
            "value": "Select attendees",
            "title": "Attendees",
            "dataSource": {
                "type": "request",
                "viewId": "users",
                "httpMethod": "GET",
                "url": "v1/objects/User?serialization={\"type\":\"class\",\"style\":\"detailview\"}&perPage=999",
                "fieldBinders": [
                    {
                        "type": "string",
                        "sourceViewId": "Name",
                        "destination": "title"
                    },
                    {
                        "type": "string",
                        "sourceViewId": "Description",
                        "destination": "subTitle"
                    }
                ]
            },
            "item": {
                "itemId": "addressListItem",
                "backgroundColor": "#ffffff",
                "titleColor": "#101a24",
                "subtitleColor": "#898989"
            },
            "validators": []
        },
        {
            "type": "singleText",
            "id": "descriptionTitle",
            "value": "Description",
            "validators": []
        },
        {
            "type": "multilineEditText",
            "id": "description",
            "hint": "Type a description here...",
            "value": "",
            "validators": []
        },
        {
            "type": "singleText",
            "id": "location",
            "value": "Location",
            "icon": "ic_localization",
            "iconColor": "#000000",
            "validators": []
        },
        {
            "type": "singleEditText",
            "id": "place",
            "hint": "Address",
            "value": "",
            "input": "text",
            "validators": []
        },
        {
            "type": "singleObjectPicker",
            "id": "remindBefore",
            "title": "Reminder",
            "value": "P0DT0H0M",
            "icon": "ic_alert",
            "iconColor": "#000000",
            "dataSource": {
                "type": "view",
                "viewId": "reminderPicker",
                "fieldBinders": [
                    {
                        "type": "timeDuration",
                        "sourceViewId": "timeDuration",
                        "destination": "timeDuration"
                    }
                ],
                "resultBinders": [
                    {
                        "source": "timeDuration",
                        "prefix": "",
                        "postfix": ""
                    }
                ]
            },
            "validators": []
        },
        {
            "type": "singleObjectPicker",
            "id": "occupancy",
            "title": "Status",
            "value": 3,
            "icon": "ic_status",
            "iconColor": "#000000",
            "dataSource": {
                "type": "view",
                "viewId": "statusPicker",
                "fieldBinders": [
                    {
                        "type": "integer",
                        "sourceViewId": "radioGroup",
                        "destination": "radioGroup"
                    }
                ],
                "resultBinders": [
                    {
                        "source": "radioGroup",
                        "prefix": "",
                        "postfix": ""
                    }
                ]
            },
            "validators": []
        },
        {
            "type": "singleObjectPicker",
            "id": "type",
            "title": "Category",
            "value": 0,
            "icon": "ic_status",
            "iconColor": "#000000",
            "dataSource": {
                "type": "view",
                "viewId": "categoryPicker",
                "fieldBinders": [
                    {
                        "type": "integer",
                        "sourceViewId": "radioGroup",
                        "destination": "radioGroup"
                    }
                ],
                "resultBinders": [
                    {
                        "source": "radioGroup",
                        "prefix": "",
                        "postfix": ""
                    }
                ]
            },
            "validators": []
        }
    ]
}

Android layout