DRGCMS Forms - Demo form
Process
Demo ajax call
TEXT INPUT
SELECT FIELDS
SELECT CONTINUES
Date&Time
Content
RESULT
Simple text input field.
10:
name: field11
type: text_field
size: 20
Enter data
Text input field with html5 required option and some custom field styling.
20:
name: field2
type: text_field
text: my.own.localization
size: 5
html:
required: yes
style: "background-color: rgba(255,0,0,0.1);"
class: "my-class"
my.own.localization
Readonly type field is displayed on form but can not be edited. Its value will be saved to database on save action.
30:
name: field3
type: readonly
Field3
ReadOnly field 1
Other way for defining readonly field is with readonly option. This field can be initialized, displayed on form but its value will not be saved to database on save action..
40:
name: field4
type: text_field
readonly: yes
Field4
Text area field type.
60:
name: field6
type: text_area
size: 80x5
Field6
Text with select is normal text_field with select option added. Value can be selected from list of available options or entered manualy.
70:
name: field7
type: text_with_select
size: 40
choices: one,two,three
Field7
one
two
three
Password field for entering hidden text.
80:
name: password
type: password_field
size: 10
Password
First check_box field which shares most of choices options with select field.
10:
name: field20
type: check_box
choices: helpers.label.dc_memory.choices4_field21
check_box
Simple select field. If choices option is not specified values should be provided in localization files.
20:
name: field21
type: select
select
Yes
No
Similar but with blank allowed
30:
name: field22
type: select
html:
include_blank: true
select with blank
Waiting
Sending
Sent
Error
Choices provided in form
40:
name: field23
type: select
choices: "One:1,Two:2,Three:3,Four:4"
Field23
One
Two
Three
Four
Choices provided from any database data. dc_choices4 helper will except collection name, description field and key name and provide values for choices.
50:
name: field24
type: select
eval: "dc_choices4("dc_site","name","_id")"
html:
include_blank: true
Field24
localhost
portal.drgcms.org
singlesitedoc.drgcms.org
test
tulips.drgcms.org
www.drgcms.com
www.drgcms.org
Choices provided from code defined in any Class.method.
60:
name: field25
type: select
eval: DemoForm.choices4_field24
html:
include_blank: true
Field25
six
five
four
Select multiple choices. Be aware that you should use Array type field to store data to MongoDB.
10:
name: field31
type: select
eval: dc_choices4("dc_site","name","_id")
multiple: true
Field31
localhost
portal.drgcms.org
singlesitedoc.drgcms.org
test
tulips.drgcms.org
www.drgcms.com
www.drgcms.org
Select field with autocomplete. With option to invoke form for adding new document into related collection.
20:
name: field32
type: text_autocomplete
search:
table: dc_site
field: name
with_new: dc_site
Field32
When there is too much items for select field with multiple options, multitext_autocomplete field can be used.
30:
name: field33
type: multi_text_autocomplete
search:
table: dc_site
field: name
Field33
When items are organized as a tree, tree_select field can be used. The example shows how menu is selected when editing dc_page document.
30:
name: menu_id
type: tree_select
eval: "@parent.dc_menu_class.choices4_menu_as_tree(@record.dc_site_id)"
style: "max-height: 300px"
multiple: true
Menu id
tulips
Single
Double
Beauty
Line
Bunch
Clasical Rails Date and DateTime field types.
10:
name: field41
type: date_select
20:
name: field42
type: datetime_select
options:
include_blank: true
Field41
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
January
February
March
April
May
June
July
August
September
October
November
December
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
Field42
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
January
February
March
April
May
June
July
August
September
October
November
December
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
—
00
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
:
00
01
02
03
04
05
06
07
08
09
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
Date picker field types.
30:
name: field43
type: date_picker
Field43
DateTime picker field types with some additional options.
40:
name: field44
type: datetime_picker
options:
step: 60
inline: true
Field44
Select (upload, delete, manage) file from server file system. Double click on input field to activate file manager.
10:
name: file_name
type: file_select
size: 40
File name
html_field field is used to enter HTML formated text data.
20:
name: body
type: html_field options: "height: 500"
Body
Result
Process
Demo ajax call