glib-web 4.3.0 → 4.4.1

data/app/views/json_ui/garage/forms/generic_post_all.json.jbuilder

@@ -0,0 +1,3 @@
+json_ui_response json do |action|
+  render "#{@path_prefix}/forms/alert_post_all_data", action: action
+end

data/app/views/json_ui/garage/forms/selects.json.jbuilder

@@ -54,7 +54,6 @@ page.form url: json_ui_garage_url(path: 'forms/generic_post'), method: 'post', p
     value: ['melbourne', 'sydney'],
     multiple: true,
     onChange: ->(action) do
-      # TODO: Fix needed. When closing this dialog, the dirty prompt appears.
       action.dialogs_alert message: 'Options selected'
     end
 

data/app/views/json_ui/garage/forms/show_hide.json.jbuilder

@@ -76,6 +76,23 @@ page.form \
     form.spacer height: 10
     form.label id: 'label5', text: 'Both Checked'
 
+    form.spacer height: 6
+    form.fields_check\
+      image: { template: 'thumbnail', url: 'https://cdn.pixabay.com/photo/2020/08/05/13/12/eco-5465432_1280.png', width: 24, height: 24 },
+      name: 'user[check22]', checkValue: 'on', label: 'check thumbnail', uncheckValue: 'off', onChangeAndLoad: ->(action) do
+        action.logics_set targetId: 'label22', conditionalData: { displayed: { "==": [{ "var": 'user[check22]' }, 'on'] } }
+      end
+    form.fields_check\
+      image: { template: 'featured', url: 'https://cdn.pixabay.com/photo/2020/08/05/13/12/eco-5465432_1280.png', width: 80, height: 80 },
+      name: 'user[check25]', checkValue: 'on', label: 'Check featured', uncheckValue: 'off', onChangeAndLoad: ->(action) do
+        action.logics_set targetId: 'label25', conditionalData: { displayed: { "==": [{ "var": 'user[check25]' }, 'on'] } }
+      end
+    form.spacer height: 10
+    form.label id: 'label25', text: 'Is Checked25'
+
+    form.spacer height: 10
+    form.label id: 'label22', text: 'Is Checked22'
+
     form.spacer height: 20
     form.h1 text: 'Radio Group'
     form.fields_radioGroup \
@@ -106,8 +123,14 @@ page.form \
         end
       end,
       childViews: ->(group) do
-        group.fields_radio value: 'show', label: 'Show', icon: 'edit', iconSize: 40
-        group.fields_radio value: 'hide', label: 'Hide', imageUrl: 'https://cdn.pixabay.com/photo/2020/08/05/13/12/eco-5465432_1280.png'
+        group.fields_radio\
+          value: 'show', label: 'Show', icon: { template: 'featured', name: 'edit', size: 40, color: '#d1d1d1' }
+        group.fields_radio\
+          value: 'hide', label: 'Hide',
+          image: { template: 'featured', url: 'https://cdn.pixabay.com/photo/2020/08/05/13/12/eco-5465432_1280.png', width: 80, height: 80 }
+        group.fields_radio\
+          value: 'no', label: 'No',
+           image: { template: 'thumbnail', url: 'https://cdn.pixabay.com/photo/2020/08/05/13/12/eco-5465432_1280.png', width: 24, height: 24 }
         group.fields_radio value: '', label: 'Empty'
       end
     form.spacer height: 10
@@ -349,12 +372,14 @@ page.form \
     form.spacer height: 20
     options = [
       { text: 'Option 1', value: 'option1' },
-      { text: 'Option 2', value: 'option2' }
+      { text: 'Option 2', value: 'option2' },
+      { text: 'Option 3', value: 'option3' }
     ]
     form.fields_select name: 'user[loadif7]', width: 'matchParent', label: 'Select "show"', options: options, value: '', onChangeAndLoad: ->(action) do
       action.runMultiple childActions: ->(saction) do
         saction.logics_set targetId: 'panel7a', conditionalData: { displayed: { "==": [{ "var": 'user[loadif7]' }, 'option1'] } }
         saction.logics_set targetId: 'panel7b', conditionalData: { displayed: { "==": [{ "var": 'user[loadif7]' }, 'option2'] } }
+        saction.logics_set targetId: 'panel7c', conditionalData: { displayed: { "==": [{ "var": 'user[loadif7]' }, 'option3'] } }
       end
     end
 
@@ -363,8 +388,8 @@ page.form \
       styleClass: 'border-2',
       width: 'matchParent',
       padding: { top: 8, right: 8, bottom: 8, left: 8 },
-      childViews: ->(res) do
-        res.fields_text name: 'user[loadif_target9]', width: 'matchParent', value: 'Value 7a'
+      childViews: ->(vertical) do
+        vertical.fields_text name: 'user[0][loadif_target9]', width: 'matchParent', value: 'Value 7a'
       end
 
     form.panels_vertical \
@@ -372,8 +397,17 @@ page.form \
       styleClass: 'border-2',
       width: 'matchParent',
       padding: { top: 8, right: 8, bottom: 8, left: 8 },
-      childViews: ->(res) do
-        res.fields_text name: 'user[loadif_target9]', width: 'matchParent', value: 'Value 7b'
+      childViews: ->(vertical) do
+        vertical.fields_text name: 'user[1][loadif_target9]', width: 'matchParent', value: 'Value 7b'
+      end
+
+    form.panels_vertical \
+      id: 'panel7c',
+      styleClass: 'border-2',
+      width: 'matchParent',
+      padding: { top: 8, right: 8, bottom: 8, left: 8 },
+      childViews: ->(vertical) do
+        vertical.fields_text id: 'target_panel_3', name: 'user[2][loadif_target9]', width: 'matchParent', value: 'Value 7c'
       end
 
     form.spacer height: 20

data/app/views/json_ui/garage/forms/submit_on_change.json.jbuilder

@@ -107,7 +107,7 @@ page.scroll childViews: ->(scroll) do
         end
 
       form.spacer height: 20
-      rules = { fileType: 'image', maxFileSize: 5000, fileTypeErrorText: 'Invalid!', maxFileSizeErrorText: 'Too big!' }
+      rules = { fileType: 'image', maxFileSize: 5000, maxFileSizeErrorText: 'Too big!' }
       form.fields_file \
         name: 'user[photo][]',
         width: 'matchParent',

data/app/views/json_ui/garage/forms/text_validation.json.jbuilder

@@ -15,29 +15,32 @@ page.form \
       name: 'user[name]',
       width: 'matchParent',
       label: 'Name'
-
+    form.spacer height: 8
 
     form.fields_email \
       name: 'user[email]',
       width: 'matchParent',
       label: 'Email'
+    form.spacer height: 8
 
     form.fields_url \
       name: 'user[url]',
       width: 'matchParent',
       label: 'URL'
+    form.spacer height: 8
 
     form.fields_number \
       prop: :age,
       name: 'user[age]',
       width: 'matchParent',
       label: 'Age'
-
+    form.spacer height: 8
 
     form.fields_phone \
       name: 'user[phone1]',
       width: 'matchParent',
       label: 'Phone field'
+    form.spacer height: 8
 
     form.fields_phone \
       name: 'user[phone2]',
@@ -45,6 +48,7 @@ page.form \
       label: 'Phone field with Australia as the default country',
       disableAutoDetect: true, # Disable country auto detect by user IP
       defaultCountry: 'AU' # ISO Country code, see: https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes
+    form.spacer height: 8
 
     form.fields_password \
       name: 'user[password]',
@@ -52,6 +56,7 @@ page.form \
       label: 'Password',
       hint: 'Should contain at least 6 characters',
       leftIcon: 'lock'
+    form.spacer height: 8
 
     form.fields_textarea \
       prop: :words,
@@ -59,6 +64,7 @@ page.form \
       width: 'matchParent',
       label: 'Textarea with maxLength',
       maxLength: 1000
+    form.spacer height: 8
 
 
     options = ['programmer', 'devops', 'designer', 'ceo', 'office_boy'].map { |v| { text: v.humanize, value: v } }
@@ -68,11 +74,10 @@ page.form \
       width: 'matchParent',
       label: 'Position',
       options: options
+    form.spacer height: 8
 
 
-    form.spacer height: 10
     form.h4 text: 'Gender'
-    form.spacer height: 4
     form.fields_radioGroup \
       name: 'user[gender]',
       validation: { required: { message: 'Required' } },
@@ -82,9 +87,9 @@ page.form \
         group.fields_radio value: 'F', label: 'Female'
       end
 
-    form.spacer height: 10
+    form.spacer height: 8
+
     form.h4 text: 'Skills'
-    form.spacer height: 4
     form.fields_checkGroup \
       name: 'user[skills][]',
       uncheckValue: 1,
@@ -95,10 +100,10 @@ page.form \
         group.fields_check checkValue: 4, label: 'Mobile Development'
       end
 
-    form.spacer height: 10
+    form.spacer height: 8
     form.fields_check prop: :accept, label: 'Accept terms & condition', name: 'user[accept]'
 
-    form.spacer height: 30
+    form.spacer height: 8
     form.fields_submit text: 'Submit'
     form.fields_submit text: 'Submit (disable if form invalid)', disableIfFormInvalid: true
   end

data/app/views/json_ui/garage/panels/index.json.jbuilder

@@ -131,6 +131,10 @@ json_ui_page json do |page|
           action.windows_open url: json_ui_garage_url(path: 'panels/grid')
         end
 
+        template.thumbnail title: 'Tree', subtitle: 'Tree like view just like folder and subfolder', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'panels/tree')
+        end
+
         template.thumbnail title: 'List Template Accessory', onClick: ->(action) do
           # TODO
         end

data/app/views/json_ui/garage/panels/tree.json.jbuilder

@@ -0,0 +1,77 @@
+json.title 'Panels'
+
+json_ui_page json do |page|
+  render "#{@path_prefix}/nav_menu", json: json, page: page
+
+  page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
+    scroll.h2 text: 'Standard'
+    scroll.spacer height: 4
+
+    scroll.panels_tree selected: params[:selected] || 'arabian-1.mp3', width: 300, sections: [
+      ->(section) do
+        section.header childViews: ->(header) do
+          header.h2 text: 'Music 🎶'
+        end
+
+        section.rows builder: ->(template) do
+          template.standard id: 'pop', title: 'Pop', rows: ['pop-1.mp3', 'pop-2.mp3', 'pop-3.mp3']
+          template.standard id: 'arab', title: 'Arabian', rows: ['arabian-1.mp3', 'arabian-2.mp3', 'arabian-3.mp3']
+          template.standard id: 'phonk', title: 'Phonk', rows: ['phonk1.mp3', 'phonk-2.mp3', { id: 'hard-phonk', title: 'Hard Phonk', rows: ['hard-phonk-1.mp3', 'hard-phonk-2.mp3'] }]
+        end
+      end,
+      ->(section) do
+        section.header childViews: ->(header) do
+          header.h2 text: 'onClick windows/reload'
+        end
+
+        section.rows builder: ->(template) do
+          template.standard title: 'funny-video.mp4', id: 'fun', onClick: ->(action) { action.windows_reload url: json_ui_garage_current_url(selected: 'fun') }
+          template.standard title: 'animal-planet.mp4', id: 'animal', onClick: ->(action) { action.windows_reload url: json_ui_garage_current_url(selected: 'animal') }
+          template.standard title: 'wedding.mp4', id: 'wedding', onClick: ->(action) { action.windows_reload url: json_ui_garage_current_url(selected: 'wedding') }
+        end
+      end
+    ]
+
+    scroll.spacer height: 8
+    scroll.h2 text: 'Standard with drop functionality'
+    scroll.spacer height: 4
+
+    objects = [
+      { id: 'folder', name: 'folder', icon: { name: 'folder', color: '#6e6e6e' }, rows: ['subfolder1', 'subfolder2'], dropData: { key: 'folder' } },
+      { id: 'folder1', name: 'folder1', icon: { name: 'folder', color: '#6e6e6e' }, rows: ['subfolder1', 'subfolder2'] },
+      { id: 'folder2', name: 'folder2', icon: { name: 'folder', color: '#6e6e6e' }, rows: ['subfolder1', 'subfolder2'] },
+    ]
+
+    scroll.panels_column md: { cols: 6 }, childViews: ->(col) do
+      col.panels_tree \
+        selected: 'folder2',
+        width: 300,
+        onDrop: ->(action) do
+          action.files_upload directUploadUrl: glib_direct_uploads_url, onFinished: ->(saction) do
+            saction.http_post url: json_ui_garage_url(path: 'forms/generic_post_all')
+          end
+        end,
+        sections: [
+          ->(section) do
+            section.header childViews: ->(header) do
+              header.h2 text: 'Folder'
+            end
+
+            section.rows objects: objects, builder: ->(row, item, index) do
+              row.standard id: item[:id], title: item[:name], rows: item[:rows], dropData: item[:dropData], icon: item[:icon]
+            end
+          end
+        ]
+    end
+
+    scroll.panels_column md: { cols: 4 }, childViews: ->(col) do
+      col.panels_ul childViews: ->(li) do
+        li.label text: '🍌 Banana', dragData: { item: 'banana'  }
+        li.label text: '💣 Bomb', dragData: { item: 'bomb'  }
+        li.label text: '🍈 Melon', dragData: { item: 'melon' }
+        li.label text: '🐻 Bear', dragData: {  item: 'bear'  }
+        li.label text: '🍴 Fork and knife', dragData: {  item: 'fork_and_knife' }
+      end
+    end
+  end
+end

data/app/views/json_ui/garage/test_page/_header.json.jbuilder

@@ -0,0 +1,14 @@
+navs = ['form', 'dialog', 'form_dynamic', 'auto_validate', 'multiupload']
+
+view.panels_flow innerPadding: { bottom: 0 }, styleClass: 'align-right', width: 'matchParent', childViews: ->(res) do
+  navs.each_with_index do |nav, index|
+    if index < navs.size && index != 0
+      res.spacer width: 4
+      res.label text: '|'
+      res.spacer width: 4
+    end
+    res.label text: nav, onClick: ->(action) do
+      action.windows_open url: json_ui_garage_url(path: "test_page/#{nav}")
+    end
+  end
+end

data/app/views/json_ui/garage/test_page/auto_validate.json.jbuilder

@@ -0,0 +1,77 @@
+json.title 'Test Page (Form)'
+
+page = json_ui_page json
+
+page.body childViews: ->(body) do
+  render 'json_ui/garage/test_page/header', view: body
+
+  model = Glib::DummyJobApplication.new(
+    name: 'John Deo',
+    accept: '0',
+    words: '',
+    age: 17,
+    position: 'ceo',
+    pet_you_have: 'crocodile'
+  )
+
+  body.panels_responsive padding: glib_json_padding_body, childViews: ->(res) do
+    res.h2 text: 'Job Application'
+    res.spacer height: 8
+    res.panels_form \
+      url: json_ui_garage_url(path: 'forms/generic_post'),
+      method: 'post',
+      model: model,
+      autoValidate: true,
+      childViews: ->(form) do
+        form.fields_text prop: :name, label: 'name', name: 'user[name]', width: 'matchParent'
+        form.spacer height: 4
+
+        form.fields_text label: 'say hello', name: 'user[say]', width: 'matchParent', validation: { format: { regex: 'hello', message: 'Say hello!' } }, value: 'sup'
+        form.spacer height: 4
+
+        form.fields_number prop: :age, label: 'age', name: 'user[age]', width: 'matchParent'
+        form.spacer height: 4
+
+        form.fields_number \
+          name: 'user[height]',
+          label: 'height',
+          width: 'matchParent',
+          validation: { numericality: { greater_than_or_equal_to: 155, less_than_or_equal_to: 190, message: { greater_than_or_equal_to: 'Too short', less_than_or_equal_to: 'Too long' } } },
+          value: 150
+        form.spacer height: 4
+
+        form.fields_textarea prop: :words, label: 'words', name: 'user[words]', width: 'matchParent'
+        form.spacer height: 4
+
+        form.fields_textarea label: 'Tell me story', name: 'user[story]', width: 'matchParent', validation: { length: { minimum: 1, message: { too_short: { one: 'Min %{count} word', other: 'Min %{count} words' } } } }
+        form.spacer height: 4
+
+        options = ['programmer', 'devops', 'designer', 'ceo', 'office_boy'].map { |v| { text: v.humanize, value: v } }
+        form.fields_select prop: :position, label: 'postion', name: 'user[position]', width: 'matchParent', options: options
+        form.spacer height: 4
+
+        options2 = ['crocodile', 'cat', 'dog', 'bird', 'shark'].map { |v| { text: v.humanize, value: v } }
+        form.fields_select prop: :pet_you_have, label: 'Pet you have', name: 'user[pet_you_have]', width: 'matchParent', options: options2
+        form.spacer height: 4
+
+        form.label text: 'Decision'
+        options3 = ['choose me', 'dont choose me', 'whatever']
+        form.fields_radioGroup value: 'dont choose me', validation: { exclusion: { in: ['dont choose me'], message: 'dont choose me' } }, childViews: ->(radio) do
+          options3.each do |option|
+            radio.fields_radio label: option, value: option
+          end
+        end
+        form.spacer height: 4
+
+        form.fields_check prop: :accept, label: 'accept', name: 'user[accept]', width: 'matchParent', checkValue: '1'
+        form.spacer height: 4
+
+        form.spacer height: 4
+        form.fields_submit text: 'submit'
+        form.spacer height: 2
+        form.fields_submit text: 'submit (if form valid)', disableIfFormInvalid: true
+      end
+
+    res.spacer height: 16
+  end
+end

data/app/views/json_ui/garage/test_page/dialog.json.jbuilder

@@ -0,0 +1,38 @@
+
+
+json.title 'Test Page (Form)'
+
+page = json_ui_page json
+
+page.body childViews: ->(body) do
+  render 'json_ui/garage/test_page/header', view: body
+
+  body.panels_responsive padding: glib_json_padding_body, childViews: ->(res) do
+    res.h2 text: 'Dialog'
+    res.spacer height: 8
+    res.button text: 'Dialog updateExisting', onClick: ->(action) do
+      action.runMultiple childActions: ->(saction) do
+        saction.dialogs_show content: ->(dialog) do
+          dialog.body padding: glib_json_padding_body, childViews: ->(sbody) do
+            sbody.h1 text: 'Hello world'
+            sbody.button text: 'change dialog content', onClick: ->(ssaction) do
+              ssaction.dialogs_show updateExisting: true, disableCloseButton: true, content: ->(sdialog) do
+                sdialog.body padding: glib_json_padding_body, childViews: ->(ssbody) do
+                  ssbody.h1 text: 'Hello world (updated)'
+                  ssbody.spacer height: 8
+                  ssbody.button text: 'close', onClick: ->(xaction) do
+                    xaction.dialogs_close
+                  end
+                end
+              end
+            end
+          end
+        end
+      end
+    end
+    res.spacer height: 4
+    res.button text: 'Dialog open', onClick: ->(action) do
+      action.dialogs_open url: json_ui_garage_url(path: 'test_page/dialog_open')
+    end
+  end
+end

data/app/views/json_ui/garage/test_page/dialog_open.json.jbuilder

@@ -0,0 +1,14 @@
+page = json_ui_page json
+
+page.body padding: glib_json_padding_body, childViews: ->(body) do
+  body.panels_responsive width: 'matchParent', childViews: ->(res) do
+    res.h2 text: 'Title'
+    res.spacer height: 16
+    res.button text: 'open', onClick: ->(action) do
+      action.dialogs_open url: json_ui_garage_url(path: 'test_page/dialog_open')
+    end
+    res.button text: 'close', onClick: ->(action) do
+      action.dialogs_close
+    end
+  end
+end

data/app/views/json_ui/garage/test_page/form.json.jbuilder

@@ -0,0 +1,111 @@
+json.title 'Test Page (Form)'
+
+page = json_ui_page json
+
+page.body childViews: ->(body) do
+  render 'json_ui/garage/test_page/header', view: body
+
+  body.panels_responsive padding: glib_json_padding_body, childViews: ->(res) do
+    res.h2 text: 'Form'
+    res.spacer height: 8
+    res.panels_form \
+      url: json_ui_garage_url(path: 'forms/generic_post'),
+      method: 'post',
+      childViews: ->(form) do
+        form.panels_flow innerPadding: { bottom: 0 }, width: 'matchParent', childViews: ->(hori) do
+          hori.button text: 'components/set', onClick: ->(action) do
+            action.runMultiple childActions: ->(saction) do
+              saction.components_set targetId: 'textarea', data: { value: 'The quick brown fox jumps over the lazy dog' }
+              new_options = [{ text: 'Option99', value: 'option99' }]
+              ['select', 'chip_group'].each do |id|
+                saction.components_set targetId: id, data: { options: new_options, value: ['option99'] }
+              end
+            end
+          end
+          hori.spacer width: 4
+          hori.button text: 'logics/set', onClick: ->(action) do
+            action.logics_set targetId: 'date', conditionalData: { value: { "+": [{ "var": ['user[date]'] }, 60 * 60 * 24 * 3] } }
+          end
+          hori.spacer width: 4
+          hori.button text: 'components/replace', onClick: ->(action) do
+            action.runMultiple childActions: ->(saction) do
+              saction.components_replace targetId: 'radio_group', newView: ->(view) do
+                view.fields_radioGroup value: '', childViews: ->(sview) do
+                  sview.fields_radio label: 'Option99', value: 'option99'
+                end
+              end
+
+              saction.components_replace targetId: 'check_group', newView: ->(view) do
+                view.fields_checkGroup value: '', childViews: ->(sview) do
+                  sview.fields_check label: 'Option99', value: nil, checkValue: 'option99'
+                end
+              end
+            end
+          end
+          hori.spacer width: 4
+          hori.button text: 'hide select', onClick: ->(action) do
+            action.components_set targetId: 'select', data: { displayed: false }
+          end
+          hori.spacer height: 4
+          hori.button text: 'hide jack', onClick: ->(action) do
+            action.runMultiple childActions: ->(saction) do
+              saction.components_set targetId: 'ver', data: { displayed: true }
+              saction.components_set targetId: 'ver1', data: { displayed: false }
+            end
+          end
+          hori.spacer height: 4
+          hori.button text: 'show jack', onClick: ->(action) do
+            action.runMultiple childActions: ->(saction) do
+              saction.components_set targetId: 'ver', data: { displayed: false }
+              saction.components_set targetId: 'ver1', data: { displayed: true }
+            end
+          end
+        end
+
+        form.spacer height: 8
+        form.hr width: 'matchParent'
+        form.spacer height: 8
+
+        validation = { required: { message: 'Required' } }
+        options = ['option1', 'option2', 'option3', 'option4'].map { |option| { 'text'=> option.humanize, 'value' => option } }
+
+        form.fields_date width: 'matchParent', name: 'user[date]', id: 'date', value: Date.new(2024, 7, 24), validation: validation
+        form.hr width: 'matchParent'
+        form.fields_select multiple: true, width: 'matchParent', name: 'user[select][]', id: 'select', options: options, value: ['option1', 'option2'], validation: validation
+        form.hr width: 'matchParent'
+        form.fields_chipGroup width: 'matchParent', name: 'user[chip_group]', id: 'chip_group', options: options, value: ['option2'], validation: validation
+        form.hr width: 'matchParent'
+        form.fields_radioGroup width: 'matchParent', name: 'user[radio_group]', id: 'radio_group', value: 'option3', validation: validation, childViews: ->(radio) do
+          options.each do |option|
+            radio.fields_radio label: option['text'], value: option['value']
+          end
+        end
+        form.hr width: 'matchParent'
+        check_group_value = ['option3', 'option1']
+        form.fields_checkGroup width: 'matchParent', name: 'user[check_group][]', id: 'check_group', value: check_group_value, validation: validation, childViews: ->(radio) do
+          options.each do |option|
+            radio.fields_check label: option['text'], checkValue: option['value']
+          end
+        end
+        form.hr width: 'matchParent'
+        form.panels_vertical width: 'matchParent', id: 'ver', childViews: ->(ver) do
+          form.fields_text width: 'matchParent', name: 'user[text]', id: 'text', value: 'John Doe', validation: validation.merge(format: { regex: /Doe\z/, message: 'Must end with Doe' })
+        end
+        form.panels_vertical width: 'matchParent', id: 'ver1', displayed: false, childViews: ->(ver) do
+          form.fields_text width: 'matchParent', name: 'user[text]', value: 'Jack Doe', validation: validation.merge(format: { regex: /Doe\z/, message: 'Must end with Doe' })
+        end
+
+        form.hr width: 'matchParent'
+
+        form.fields_textarea width: 'matchParent', name: 'user[textarea]', id: 'textarea', value: 'Lorem ipsum et dumet bla bla bla...'
+
+        form.hr width: 'matchParent'
+        form.fields_submit text: 'submit'
+        form.spacer height: 2
+        form.fields_submit text: 'submit (if form valid)', disableIfFormInvalid: true
+      end
+
+
+    res.spacer height: 16
+  end
+end

data/app/views/json_ui/garage/test_page/form_dynamic.json.jbuilder

@@ -0,0 +1,63 @@
+json.title 'Test Page (Form)'
+
+page = json_ui_page json
+
+page.body childViews: ->(body) do
+  render 'json_ui/garage/test_page/header', view: body
+
+  body.panels_responsive padding: glib_json_padding_body, childViews: ->(res) do
+    res.h2 text: 'Form'
+    res.spacer height: 8
+    res.panels_form \
+      url: json_ui_garage_url(path: 'forms/generic_post'),
+      method: 'post',
+      childViews: ->(form) do
+
+        properties = [
+          [
+            { name: 'question', value: 'Punctuality' },
+            { name: 'type', value: 'rating' },
+          ],
+          [
+            { name: 'question', value: 'Quality of work' },
+            { name: 'type', value: 'rating' },
+            { name: 'enabled', value: '1' },
+          ],
+          [
+            { name: 'question', value: 'Satisfied?' },
+            { name: 'type', value: 'yes_no' },
+          ]
+        ]
+        validation = { required: { message: 'Required' } }
+        form.fields_dynamicGroup width: 'matchParent', name: 'user[evaluation]', groupFieldProperties: properties, titlePrefix: 'Entry', content: ->(group) do
+          group.template padding: { left: 32 }, childViews: ->(template) do
+            template.spacer height: 10
+            template.fields_text width: 'matchParent', name: 'question', label: 'Question', placeholder: 'Question', validation: validation
+
+            options = [ :rating, :yes_no ]
+            template.fields_select \
+              width: 'matchParent',
+              name: 'type',
+              label: 'Answer Type',
+              placeholder: 'Answer Type',
+              options: options.map { |o| { text: o.to_s.humanize, value: o } },
+              validation: validation
+
+            template.fields_check \
+              width: 'matchParent',
+              name: 'enabled',
+              label: 'Enable',
+              checkValue: '1',
+              showIf: { "==": [{ "var": 'user[evaluation][{{index}}][type]' }, 'rating'] }
+
+            template.spacer height: 14
+          end
+        end
+        form.fields_submit text: 'submit'
+        form.spacer height: 2
+        form.fields_submit text: 'submit (if form valid)', disableIfFormInvalid: true
+      end
+
+    res.spacer height: 16
+  end
+end