DRGCMS Forms - Demo form
  • 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
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"
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
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
Text area field type.
60:
  name: field6
  type: text_area
  size: 80x5
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
Password field for entering hidden text.
80:
  name: password
  type: password_field
  size: 10
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
Simple select field. If choices option is not specified values should be provided in localization files.
20:
  name: field21
  type: select
Similar but with blank allowed
30:
  name: field22
  type: select
  html:
    include_blank: true
Choices provided in form
40:
  name: field23
  type: select
  choices: "One:1,Two:2,Three:3,Four:4"
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
Choices provided from code defined in any Class.method.
60:
  name: field25
  type: select
  eval: DemoForm.choices4_field24
  html:
    include_blank: true
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
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
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
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
Clasical Rails Date and DateTime field types.
10:
  name: field41
  type: date_select

20:
  name: field42
  type: datetime_select
  options:
    include_blank: true
— :
Date picker field types.
30:
  name: field43
  type: date_picker
DateTime picker field types with some additional options.
40:
  name: field44
  type: datetime_picker
  options:
    step: 60
    inline: true
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
html_field field is used to enter HTML formated text data.
20:
  name: body
  type: html_field   options: "height: 500"
  • Demo ajax call