# datus
| Name | datus |
|---|---|
| Type | panel |
| Version | 1.0 |
| Since | 2020-01-01 |
# Prologue
Extra powerful panel to define form schema and render it as form inputs.
# Preview
# Configuration
datus:
render: {width: 6}
config:
# Required
variable: connection
# Optional | Default - false
# After successful form submit, try to go to next step
gonext: true
ui:
# Optional | Default - null
# Panel title
title: Panel title
# Optional | Default - null
# Panel description
description: Description of the panel
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Examples
# Datus
Example of datus panel with many inputs.
steps:
example:
title: Example step
layout:
sections:
s21:
panels:
datus:
render: {width: 6}
config:
variable: invoice
inputs:
invoice_number:
control:
label: Invoice number
type: text
validations:
required: true
notBlank: []
regex: [pattern: "#^[0-9]+$#", message: "Invoice number can only contain numbers"]
invoice_date:
control:
label: Invoice date
type: date
validations:
dateTimeGreaterThan: [compareTo: "today"]
invoice_type:
control:
label: Invoice type
type: select
options:
items: [Standard, Premium]
useKeys: false
send:
control: {type: submit, label: Save}
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
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
# Nanodatus
Example of datus panel with single input, a.k.a nanodatus.
steps:
example:
title: Example step
layout:
sections:
s21:
panels:
datus:
render: {width: 6}
config:
variable: invoice
input:
control:
label: Invoice number
type: text
validations:
required: true
notBlank: []
regex: [pattern: "#^[0-9]+$#", message: "Invoice number can only contain numbers"]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Datus items
Example of datus panel with multiple nested inputs, a.k.a datus items.
steps:
example:
title: Example step
layout:
sections:
s21:
panels:
datus:
render: {width: 12}
config:
variable: datus4
ui:
title: Datus items
inputs:
headline:
control:
label: Headline
type: text
items:
control:
label: Invoice items
type: multicontainer
options:
actions:
add:
title: Add item
color: green
value: {price: 1, note: "automatic"}
remove:
title: Remove item
color: red
confirm: "Really remove invoice item?"
inputs:
type:
control:
label: Select type
type: select
options:
items: [Fiber, Wired]
useKeys: true
render:
class: w-32
price:
control:
label: Price
type: numeric
render:
class: w-32
note:
control:
label: Note
type: text
render:
class: flex-1
validations:
required: true
notBlank: [message: "Zadejte popisek polozky"]
regex: [pattern: "#^[A-Z]+$#", message: "Popisek akcepujte pouze velka pismena"]
send:
control: {type: submit, label: Submit form}
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
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