# 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

# 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

# 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

# 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