Now with table and datasource

Gruntfile.coffee

@@ -67,7 +67,7 @@ module.exports = (grunt) ->
             'bower_components/jquery-ui/ui/jquery.ui.droppable.js'
             'bower_components/jquery-ui/ui/jquery.ui.sortable.js'
             'bower_components/jquery.scrollWindowTo/index.js'
-            'bower_components/underscore/underscore-min.js'
+            'bower_components/lodash/dist/lodash.min.js'
             'bower_components/underscore.mixin.deepExtend/index.js'
             'bower_components/rivets/dist/rivets.js'
             'bower_components/backbone/backbone.js'

bower.json

@@ -28,7 +28,7 @@
     "bootstrap": "~3.1.1",
     "summernote": "~0.5.1",
     "node-uuid": "~1.4.1",
-    "underscore": "~1.7.0",
-    "mathjs": "~1.1.1"
+    "mathjs": "~1.1.1",
+    "lodash": "~2.4.1"
   }
-}
+}

dist/formbuilder.css

@@ -2,7 +2,7 @@
 .fb-icon-date:before{content:'\e800'}
 .fb-icon-radio:before{content:'\e801'}
 .fb-icon-checkbox:before{content:'\e802'}
-.fb-icon-list:before{content:'\e803'}
+.fb-icon-data-source:before{content:'\e803'}
 .fb-icon-dropdown:before{content:'\e804'}
 .fb-icon-signature:before{content:'\e805'}
 .fb-icon-info:before{content:'\e806'}
@@ -42,6 +42,7 @@
 .edit-response-field input,.edit-response-field textarea,.edit-response-field select{border:thin solid #ddd;border-radius:.25em;padding:.5em;display:inline-block;height:auto;vertical-align:middle}
 .edit-response-field input:focus,.edit-response-field textarea:focus,.edit-response-field select:focus{outline:none}
 .edit-response-field select{font-size:14px}
+input[readonly]{cursor:not-allowed;background-color:#eee}
 .fb-field-wrapper .subtemplate-wrapper{border:1px dashed transparent;margin-bottom:10px;padding:10px;position:relative}
 .fb-field-wrapper .subtemplate-wrapper .cover{position:absolute;top:0;left:0;height:100%;width:100%;z-index:2}
 .fb-field-wrapper .subtemplate-wrapper > label{display:block;border-bottom:thin solid #eee;padding-bottom:3px;margin-bottom:7px}
@@ -52,7 +53,6 @@
 .fb-field-wrapper .input-line > span input{width:100%}
 .fb-field-wrapper .input-line > span > label{display:block;font-size:13px;margin-left:3px}
 .fb-field-wrapper .help-block{display:block;font-size:12px;margin-top:5px}
-.fb-edit-field-grid .fb-label-description{display:none}
 .fb-edit-field-wrapper{font-size:13px}
 .fb-edit-field-wrapper .fb-field-label{font-weight:normal;background:#eee;padding:.75em;color:#666;font-size:1.25em}
 .fb-edit-field-wrapper .fb-field-label .type{margin-top:.5em;display:block;font-family:'Source Sans Pro',sans-serif;font-size:1em}
@@ -85,6 +85,7 @@
 .response-field-table .cover{display:none}
 .response-field-table .section-name{display:inline-block}
 .response-field-table .element-selector{margin:0 5px;float:right;position:absolute;right:5px;top:5px}
+.response-field-table tr{vertical-align:top}
 .response-field-table table{margin-bottom:30px}
 .response-field-table table td{padding:10px 10px 0 10px}
 .response-field-table table td label{border:none !important}
@@ -93,63 +94,63 @@
 .fb-options-per-row-1:before{content:" ";display:table}
 .fb-options-per-row-1:after{content:" ";display:table;clear:both}
 .fb-options-per-row-1{clear:both}
-.fb-options-per-row-1 .fb-option-wrapper{width:100%;float:left}
+.fb-options-per-row-1 .fb-option-wrapper{width:100%}
 .fb-options-per-row-2:before{content:" ";display:table}
 .fb-options-per-row-2:after{content:" ";display:table;clear:both}
 .fb-options-per-row-2{clear:both}
-.fb-options-per-row-2 .fb-option-wrapper{width:50%;float:left}
+.fb-options-per-row-2 .fb-option-wrapper{width:50%}
 .fb-options-per-row-3:before{content:" ";display:table}
 .fb-options-per-row-3:after{content:" ";display:table;clear:both}
 .fb-options-per-row-3{clear:both}
-.fb-options-per-row-3 .fb-option-wrapper{width:33.333333333333336%;float:left}
+.fb-options-per-row-3 .fb-option-wrapper{width:33.333333333333336%}
 .fb-options-per-row-4:before{content:" ";display:table}
 .fb-options-per-row-4:after{content:" ";display:table;clear:both}
 .fb-options-per-row-4{clear:both}
-.fb-options-per-row-4 .fb-option-wrapper{width:25%;float:left}
+.fb-options-per-row-4 .fb-option-wrapper{width:25%}
 .fb-options-per-row-5:before{content:" ";display:table}
 .fb-options-per-row-5:after{content:" ";display:table;clear:both}
 .fb-options-per-row-5{clear:both}
-.fb-options-per-row-5 .fb-option-wrapper{width:20%;float:left}
+.fb-options-per-row-5 .fb-option-wrapper{width:20%}
 .fb-options-per-row-6:before{content:" ";display:table}
 .fb-options-per-row-6:after{content:" ";display:table;clear:both}
 .fb-options-per-row-6{clear:both}
-.fb-options-per-row-6 .fb-option-wrapper{width:16.666666666666668%;float:left}
+.fb-options-per-row-6 .fb-option-wrapper{width:16.666666666666668%}
 .fb-options-per-row-7:before{content:" ";display:table}
 .fb-options-per-row-7:after{content:" ";display:table;clear:both}
 .fb-options-per-row-7{clear:both}
-.fb-options-per-row-7 .fb-option-wrapper{width:14.285714285714286%;float:left}
+.fb-options-per-row-7 .fb-option-wrapper{width:14.285714285714286%}
 .fb-options-per-row-8:before{content:" ";display:table}
 .fb-options-per-row-8:after{content:" ";display:table;clear:both}
 .fb-options-per-row-8{clear:both}
-.fb-options-per-row-8 .fb-option-wrapper{width:12.5%;float:left}
+.fb-options-per-row-8 .fb-option-wrapper{width:12.5%}
 .fb-options-per-row-9:before{content:" ";display:table}
 .fb-options-per-row-9:after{content:" ";display:table;clear:both}
 .fb-options-per-row-9{clear:both}
-.fb-options-per-row-9 .fb-option-wrapper{width:11.11111111111111%;float:left}
+.fb-options-per-row-9 .fb-option-wrapper{width:11.11111111111111%}
 .fb-options-per-row-10:before{content:" ";display:table}
 .fb-options-per-row-10:after{content:" ";display:table;clear:both}
 .fb-options-per-row-10{clear:both}
-.fb-options-per-row-10 .fb-option-wrapper{width:10%;float:left}
+.fb-options-per-row-10 .fb-option-wrapper{width:10%}
 .fb-options-per-row-11:before{content:" ";display:table}
 .fb-options-per-row-11:after{content:" ";display:table;clear:both}
 .fb-options-per-row-11{clear:both}
-.fb-options-per-row-11 .fb-option-wrapper{width:9.090909090909092%;float:left}
+.fb-options-per-row-11 .fb-option-wrapper{width:9.090909090909092%}
 .fb-options-per-row-12:before{content:" ";display:table}
 .fb-options-per-row-12:after{content:" ";display:table;clear:both}
 .fb-options-per-row-12{clear:both}
-.fb-options-per-row-12 .fb-option-wrapper{width:8.333333333333334%;float:left}
+.fb-options-per-row-12 .fb-option-wrapper{width:8.333333333333334%}
 .fb-options-per-row-13:before{content:" ";display:table}
 .fb-options-per-row-13:after{content:" ";display:table;clear:both}
 .fb-options-per-row-13{clear:both}
-.fb-options-per-row-13 .fb-option-wrapper{width:7.6923076923076925%;float:left}
+.fb-options-per-row-13 .fb-option-wrapper{width:7.6923076923076925%}
 .fb-options-per-row-14:before{content:" ";display:table}
 .fb-options-per-row-14:after{content:" ";display:table;clear:both}
 .fb-options-per-row-14{clear:both}
-.fb-options-per-row-14 .fb-option-wrapper{width:7.142857142857143%;float:left}
+.fb-options-per-row-14 .fb-option-wrapper{width:7.142857142857143%}
 .fb-options-per-row-15:before{content:" ";display:table}
 .fb-options-per-row-15:after{content:" ";display:table;clear:both}
 .fb-options-per-row-15{clear:both}
-.fb-options-per-row-15 .fb-option-wrapper{width:6.666666666666667%;float:left}
+.fb-options-per-row-15 .fb-option-wrapper{width:6.666666666666667%}
 .response-field-grid-table{border-collapse:collapse;border-spacing:0;margin-bottom:5px;table-layout:fixed;width:100%}
 .response-field-grid-table .response-field-grid-row{height:100px;vertical-align:top}
 .response-field-grid-table td{padding:10px 10px 0 10px}

index.html

@@ -30,18 +30,31 @@
 
   <script>
     $(function() {
-      Formbuilder.attr('sources', ['List 1', 'List 2']);
+      Formbuilder.attr('sources', {
+        Person: {
+          title:'Employee',
+          properties: {'id': 'ID', 'payroll_number': 'Payroll Number'}
+        },
+        Contractor: {
+          title:'Contractor',
+          properties: {'id': 'ID', 'name': 'Name'},
+          filters: {
+            status : {
+              name: 'Status',
+              values: {
+               '1': 'Draft',
+               '2': 'In Progress',
+               '3': 'Current',
+               '4': 'Blocked'
+              }
+            }
+
+          }
+        }
+      });
       window.fb = new Formbuilder({
         selector: '.fb-main',
         bootstrapData: [
-          {
-            "label": "Employee Name",
-            "type": "text",
-            "required": true,
-            "options": {},
-            "parent_uuid": "909cbdba-4431-4ed8-ab28-96006d356ad7",
-            "uuid": "d2ce1858-603a-4e31-8cce-ea51ef08ef13"
-          },
           {
             "label": "Hours worked",
             "type": "number",
@@ -66,20 +79,44 @@
             "parent_uuid": "909cbdba-4431-4ed8-ab28-96006d356ad7",
             "uuid": "c171bdb9-dffb-4bf7-84a9-fd6ae848dd79"
           },
+          {
+            "label": "Total Column",
+            "type": "number",
+            "model_only": true,
+            "parent_uuid": "c171bdb9-dffb-4bf7-84a9-fd6ae848dd79",
+            "uuid": "b9a1b61f-fd1a-4df5-b8ba-9bed3aa41d7a",
+            "options": {
+               "calculation_type": "sum(column_uuid_c171bdb9_dffb_4bf7_84a9_fd6ae848dd79)"
+            }
+          },
+          {
+            "label": "Total Hours Worked",
+            "type": "number",
+            "model_only": true,
+            "parent_uuid": "76b257ed-16fa-422d-a732-da6c6170c807",
+            "uuid": "efc11190-a876-457a-9210-1d2ae8882ff5",
+            "options": {
+               "calculation_type": "sum(column_uuid_76b257ed_16fa_422d_a732_da6c6170c807)"
+            }
+          },
           {
             "type": "table",
             "label": "Table",
             "options": {
-                "elements": [{"uuid":"d2ce1858-603a-4e31-8cce-ea51ef08ef13"},{"uuid":"76b257ed-16fa-422d-a732-da6c6170c807", "totalColumn": true},{"uuid":"a720d44f-e4da-4fa5-a7aa-567e82a5fe2a"},{"uuid":"c171bdb9-dffb-4bf7-84a9-fd6ae848dd79", "totalColumn": true}],
+                "elements": [{"uuid":"d2ce1858-603a-4e31-8cce-ea51ef08ef13"},{"uuid":"76b257ed-16fa-422d-a732-da6c6170c807", "totalColumn": true,  "totalColumnUuid": 'efc11190-a876-457a-9210-1d2ae8882ff5'},{"uuid":"a720d44f-e4da-4fa5-a7aa-567e82a5fe2a"},{"uuid":"c171bdb9-dffb-4bf7-84a9-fd6ae848dd79", "totalColumn": true, "totalColumnUuid": 'b9a1b61f-fd1a-4df5-b8ba-9bed3aa41d7a'}],
             },
             "uuid": "909cbdba-4431-4ed8-ab28-96006d356ad7"
           },
          {
-            "type": "list",
-            "label": "List",
+            "type": "datasource",
+            "label": "Work Contractor",
             "options": {
-                "data_source": 'List 2',
-                "multiple_selections": true
+                "data_source": 'Contractor',
+                "value_template": 'name',
+                "multiple_selections": true,
+                "is_filtered": true,
+                "filter": "Status",
+                "filter_values": [1, 2]
 
             },
             "uuid": "188e4f03-4d5d-4234-9b1f-f916fee48691"
@@ -171,6 +208,14 @@
             "parent_uuid": '940cb41b-8440-4ff2-b699-a1dfa6cccebb',
             "uuid": "097fae5e-90ce-4f4e-bed5-7e86eb86a913"
           },
+          {
+            "label": "Employee Name",
+            "type": "text",
+            "required": true,
+            "options": {},
+            "parent_uuid": "909cbdba-4431-4ed8-ab28-96006d356ad7",
+            "uuid": "d2ce1858-603a-4e31-8cce-ea51ef08ef13"
+          },
           {
             "type": "radio",
             "answers": [{
@@ -186,7 +231,7 @@
             },
             "parent_uuid": '940cb41b-8440-4ff2-b699-a1dfa6cccebb',
             "uuid": "ff9f46f8-bb47-4211-b690-d884285feaf9"
-          },
+          }
 
         ]
       });

src/scripts/fields/checkbox.coffee

@@ -38,10 +38,12 @@ Formbuilder.registerField 'checkbox',
 
   defaultAttributes: (attrs) ->
     attrs.answers = [
+      uuid: uuid.v4()
       label: "",
       checked: false,
       score: false
     ,
+      uuid: uuid.v4()
       label: "",
       checked: false,
       score: false

src/scripts/fields/datasource.coffee

@@ -0,0 +1,74 @@
+Formbuilder.registerField 'datasource',
+
+  name: 'List'
+
+  order: 70
+
+  view: """
+    <select>
+      <option>
+         <%= rf.source().title %>
+         (<%= rf.sourceProperty(rf.get(Formbuilder.options.mappings.DATA_SOURCE.VALUE_TEMPLATE)) %>)
+      </option>
+    </select>
+  """
+
+  edit: """
+    <%= Formbuilder.templates['edit/data_source_options']({ rf: rf }) %>
+  """
+
+  addButton: """
+    <span class="fb-icon-data-source"></span> Data Source
+  """
+
+  defaultAttributes: (attrs, formbuilder) ->
+    attrs.initialize = () ->
+
+      @on "change", (model) ->
+        if _.nested(model, 'changed.options.data_source') != undefined
+          sourceProperties = _.keys(model.sourceProperties())
+          model.set('options.required_properties', sourceProperties)
+          valueTemplate = _.first(sourceProperties)
+          model.set('options.value_template', valueTemplate)
+
+      @on "destroy", (model) ->
+        @collection.each (collectionModel) ->
+          if collectionModel.get('options.populate_uuid') is model.get('uuid')
+            collectionModel.set('options.populate_uuid', null)
+            collectionModel.set('options.populate_from', null)
+
+
+
+    attrs.source = () ->
+      source = if @options then @options.data_source else @get(Formbuilder.options.mappings.DATA_SOURCE.DATA_SOURCE)
+      sources = formbuilder.attr('sources')
+      _.nested(sources, source) || null
+
+    attrs.sourceProperties = () ->
+      source = @source()
+      _.nested(source, 'properties') || []
+
+    attrs.filters = () ->
+      source = @source()
+      _.nested(source, 'filters') || null
+
+    attrs.currentFilter = () ->
+      source = @source()
+      _.nested(source, 'filters.' + @get('options.filter')) || {}
+
+    attrs.filterValues = () ->
+      @currentFilter().values || {}
+
+
+
+    attrs.sourceProperty = (property) ->
+      @sourceProperties()[property] || null
+
+    attrs.options.multiple_selections = false
+    attrs.options.is_filtered = false
+    attrs.options.data_source = attrs.source() || _.keys(formbuilder.attr('sources') || {})[0];
+    attrs.options.required_properties = _.keys(attrs.sourceProperties(attrs.options.data_source))
+    attrs.options.filter = attrs.filters()
+    attrs.options.filter_values = []
+    attrs.options.value_template = _.first(attrs.options.required_properties)
+    attrs

src/scripts/fields/dropdown.coffee

@@ -28,10 +28,12 @@ Formbuilder.registerField 'dropdown',
 
   defaultAttributes: (attrs) ->
     attrs.answers = [
+      uuid: uuid.v4()
       label: "",
       checked: false,
       score: ""
     ,
+      uuid: uuid.v4()
       label: "",
       checked: false,
       score: ""

src/scripts/fields/number.coffee

@@ -5,7 +5,7 @@ Formbuilder.registerField 'number',
   order: 30
 
   view: """
-    <input type='text' class="calculated" value="<%= rf.get(Formbuilder.options.mappings.NUMERIC.CALCULATION_DISPLAY) %>" />
+    <input type='text' class="calculated" value="<%= rf.get(Formbuilder.options.mappings.NUMERIC.CALCULATION_DISPLAY) %>" <%= rf.get(Formbuilder.options.mappings.NUMERIC.CALCULATION_DISPLAY) ? 'readonly="readonly"' : ''  %> />
     <% if (units = rf.get(Formbuilder.options.mappings.UNITS)) { %>
       <%= units %>
     <% } %>
@@ -27,8 +27,9 @@ Formbuilder.registerField 'number',
     attrs.options.total_sequence = false
 
     attrs.insertion = () ->
-      if @parentModel()
-        totalColumn = @parentModel().totalColumn @get('uuid')
+      parentModel = @parentModel()
+      if parentModel and parentModel.get('type') == 'table'
+        totalColumn = parentModel.totalColumn @get('uuid')
         @attributes.options.total_sequence = totalColumn
 
     attrs.initialize = () ->
@@ -40,6 +41,7 @@ Formbuilder.registerField 'number',
         if _.nested(model, 'changed.options.total_sequence') != undefined
           totalSequence = _.nested model, 'changed.options.total_sequence'
           @parentModel().totalColumn model.get('uuid'), totalSequence
+        model
 
     attrs.numericSiblings = () ->
       parentModel = @parentModel()
@@ -55,7 +57,8 @@ Formbuilder.registerField 'number',
       if calculation_type != ''
         operator = if calculation_type is 'SUM' then '+' else '*'
         numericSiblings = @numericSiblings()
-        @set('options.calculation_expression', _.map(numericSiblings, (model) -> model.get('uuid')).join(operator))
+        #Prefix with uuid_ and underscore '-' to prevent illegal identifiers
+        @set('options.calculation_expression', _.map(numericSiblings, (model) -> 'uuid_' + model.get('uuid').replace(/-/g, '_')).join(operator))
         @set('options.calculation_display', '= ' + _.map(numericSiblings, (model) -> model.get('label')).join(operator))
         console.log(@get('options.calculation_expression'))
       else

src/scripts/fields/radio.coffee

@@ -42,10 +42,12 @@ Formbuilder.registerField 'radio',
   defaultAttributes: (attrs) ->
     # @todo
     attrs.answers = [
+      uuid: uuid.v4()
       label: "",
       checked: false,
       score: ""
     ,
+      uuid: uuid.v4()
       label: "",
       checked: false,
       score: ""

src/scripts/fields/table.coffee

@@ -20,6 +20,9 @@ Formbuilder.registerField 'table',
       </div>
       <div class='fb-clear'></div>
     </div>
+    <label class="checkbox">
+      <input type='checkbox' data-rv-checked='model.<%= Formbuilder.options.mappings.GRID.FULL_WIDTH %>' /> Display full width ?
+    </label>
   """
 
   addButton: """
@@ -28,6 +31,15 @@ Formbuilder.registerField 'table',
 
   defaultAttributes: (attrs) ->
     attrs.options.full_width = false
+    attrs.initialize = () ->
+      parent = @
+      _.each @childModels, (childModel) ->
+        childModel.on "change", (model) ->
+          if _.nested(model, 'changed.options.column_width') != undefined
+            parent.columnWidth(model.get('uuid'), model.get('options.column_width'))
+          model
+
+
     attrs.childModels = () ->
       elementsUuids = _.pluck @get('options.elements'), 'uuid'
       @collection.filter (model) ->
@@ -37,14 +49,39 @@ Formbuilder.registerField 'table',
     attrs.elementOptions = (elementUuid) ->
       _.findWhere @get('options.elements'), {uuid:elementUuid}
 
+
+    attrs.createTotalColumnModel = (parentUuid) ->
+      totalColumnModel = new FormbuilderModel(Formbuilder.helpers.defaultFieldAttrs('number'))
+      totalColumnModel.set('options.calculation_expression', 'sum(column_uuid_' + parentUuid.replace(/-/g, '_') + ')')
+      totalColumnModel.set('model_only', true)
+      totalColumnModel.set('parent_uuid', parentUuid)
+      @collection.add totalColumnModel
+      totalColumnModel
+
+    attrs.columnWidth = (elementUuid, width) ->
+      elements = @get('options.elements')
+      _.each elements, (element, index) ->
+        if element.uuid is elementUuid
+          elements[index].columnWidth = width
+      ,@
+
     attrs.totalColumn = (elementUuid, value) ->
       elements = @get('options.elements')
       if value != undefined
         _.each elements, (element, index) ->
           if element.uuid is elementUuid
+            if element.totalColumnUuid is undefined
+              totalColumnModel = @createTotalColumnModel(element.uuid)
+              elements[index].totalColumnUuid = totalColumnModel.get('uuid')
             elements[index].totalColumn = value
+        , @
+
         @set 'options.elements', elements
       else
-        @elementOptions(elementUuid).totalColumn || false
+        if @elementOptions(elementUuid)
+          @elementOptions(elementUuid).totalColumn || false
+        else
+          false
+
 
     attrs

src/scripts/fields/text.coffee

@@ -8,7 +8,9 @@ Formbuilder.registerField 'text',
     <input type='text' class='rf-size-<%= rf.get(Formbuilder.options.mappings.SIZE) %>' />
   """
 
-  edit: ""
+  edit: """
+  <%= Formbuilder.templates['edit/populate_from']({ rf: rf }) %>
+  """
 
   addButton: """
     <span class="fb-icon-text"></span> Text

src/scripts/fields/textarea.coffee

@@ -8,7 +8,9 @@ Formbuilder.registerField 'textarea',
     <textarea class='rf-size-<%= rf.get(Formbuilder.options.mappings.SIZE) %>'></textarea>
   """
 
-  edit: ""
+  edit: """
+  <%= Formbuilder.templates['edit/populate_from']({ rf: rf }) %>
+  """
 
   addButton: """
     <span class="fb-icon-textarea"></span> Paragraph

src/scripts/rivets-config.coffee

@@ -1,3 +1,25 @@
+rivets.binders.append =
+  routine: (el, value) ->
+    el.checked =  _.find(value, (item) -> String(item) == String(el.value)) != undefined
+  bind: (el) ->
+
+    @callback = () =>
+      currentValue = _.clone(@model.get(@keypath)) || []
+      if el.value and _.contains(currentValue, el.value)
+        newValue = _.without(currentValue, el.value)
+        @model.set(@keypath, currentValue)
+      else
+        currentValue.push(el.value)
+        @model.set(@keypath, currentValue)
+    $(el).on('change', @callback)
+  unbind: (el) ->
+    $(el).off('change', @callback)
+
+
+rivets.formatters.length = (value) ->
+  if value then value.length else 0
+
+
 rivets.binders.input =
   publishes: true
   routine: rivets.binders.value.routine

src/styles/formbuilder.styl

@@ -36,7 +36,7 @@ $editing-border = darken($editing-bg, 7%)
 .fb-icon-date:before { content: '\e800'; } /* '' */
 .fb-icon-radio:before { content: '\e801'; } /* '' */
 .fb-icon-checkbox:before { content: '\e802'; } /* '' */
-.fb-icon-list:before { content: '\e803'; } /* '' */
+.fb-icon-data-source:before { content: '\e803'; } /* '' */
 .fb-icon-dropdown:before { content: '\e804'; } /* '' */
 .fb-icon-signature:before { content: '\e805'; } /* '' */
 .fb-icon-info:before { content: '\e806'; } /* '' */
@@ -229,6 +229,11 @@ $editing-border = darken($editing-bg, 7%)
   }
 }
 
+input[readonly] {
+  cursor: not-allowed;
+  background-color: #eeeeee;
+}
+
 
 .fb-field-wrapper .subtemplate-wrapper {
   border: 1px dashed transparent;
@@ -287,13 +292,6 @@ $editing-border = darken($editing-bg, 7%)
   margin-top: 5px;
 }
 
-.fb-edit-field-grid {
-    .fb-label-description
-    {
-        display: none;
-    }
-}
-
 .fb-edit-field-wrapper {
   font-size: 13px;
 }
@@ -447,6 +445,10 @@ $editing-border = darken($editing-bg, 7%)
     top: 5px;
   }
 
+  tr {
+    vertical-align: top;
+  }
+
 
 
   table {
@@ -481,7 +483,6 @@ for row in (1..15)
     clear both
     .fb-option-wrapper
       width (100% / row)
-      float left
 
 
 

src/templates/edit/base.html

@@ -1,3 +1,4 @@
 <%= Formbuilder.templates['edit/base_header']({rf: rf}) %>
 <%= Formbuilder.templates['edit/common']({rf: rf}) %>
 <%= Formbuilder.fields[rf.get(Formbuilder.options.mappings.TYPE)].edit({rf: rf}) %>
+<%= Formbuilder.templates['edit/columnwidth']({rf: rf}) %>

src/templates/edit/columnwidth.html

@@ -0,0 +1,6 @@
+<!-- <div class='fb-edit-section-header'>Column width</div>
+
+Width in px
+<input class="form-control" type="number" data-rv-input="model.<%= Formbuilder.options.mappings.COLUMN_WIDTH %>" style="width: 50px" />
+
+ -->

src/templates/edit/common.html

@@ -8,4 +8,4 @@
     <%= Formbuilder.templates['edit/checkboxes']() %>
   </div>
   <div class='fb-clear'></div>
-</div>
+</div>

src/templates/edit/data_source_options.html

@@ -0,0 +1,47 @@
+<label class="checkbox">
+  <input type='checkbox' data-rv-checked='model.<%= Formbuilder.options.mappings.DATA_SOURCE.MULTIPLE %>' />
+  Multiple selections
+</label>
+
+<div class='fb-edit-section-header'>Data Source</div>
+<select data-rv-value="model.<%= Formbuilder.options.mappings.DATA_SOURCE.DATA_SOURCE %>">
+<% for (i in (Formbuilder.attr('sources') || [])) { %>
+    <option value="<%= i %>">
+    <%= Formbuilder.attr('sources')[i].title %>
+    </option>
+<% } %>
+</select>
+<div class='fb-edit-section-header'>Display</div>
+<select data-rv-value="model.<%= Formbuilder.options.mappings.DATA_SOURCE.VALUE_TEMPLATE %>">
+<%
+    for (i in (rf.sourceProperties() || [])) { %>
+    <option value="<%= i %>">
+    <%= rf.sourceProperties()[i] %>
+    </option>
+<% } %>
+</select>
+<% if (rf.filters()) { %>
+    <div class='fb-edit-section-header'> Filter </div>
+    <label class="checkbox">
+      <input type='checkbox' class="js-scoring"  data-rv-checked='model.<%= Formbuilder.options.mappings.DATA_SOURCE.IS_FILTERED %>' />
+      Apply a filter?
+    </label>
+    <% if (rf.get(Formbuilder.options.mappings.DATA_SOURCE.IS_FILTERED)) { %>
+    <select data-rv-value="model.<%= Formbuilder.options.mappings.DATA_SOURCE.FILTER %>">
+        <option value="null">[ No Filter ]</option>
+    <%
+        for (i in (rf.filters() || [])) { %>
+        <option value="<%= i %>">
+        <%= rf.filters()[i].name %>
+        </option>
+    <% } %>
+    </select>
+    <%
+    for (i in rf.filterValues()) { %>
+        <label class="checkbox">
+          <input type='checkbox' data-rv-append='model.<%= Formbuilder.options.mappings.DATA_SOURCE.FILTER_VALUES %>' value="<%= i %>" />
+            <%= rf.filterValues()[i] %>
+        </label>
+    <% } %>
+<% } %>
+<% } %>

src/templates/edit/options.html

@@ -8,7 +8,7 @@
 <% } %>
 
 <div class='option' data-rv-each-option='model.<%= Formbuilder.options.mappings.OPTIONS %>'>
-  <input type="checkbox" class='js-default-updated' data-rv-checked="option:checked" />
+<!--   <input type="checkbox" class='js-default-updated' data-rv-checked="option:checked" /> -->
   <input type="text" data-rv-input="option:label" placeholder="Label" class='option-label-input' />
   <% if (rf.get(Formbuilder.options.mappings.INCLUDE_SCORING)) { %>
   <input type="text" data-rv-input="option:score" placeholder="Score" class='option-score-input' />

src/templates/edit/populate_from.html

@@ -0,0 +1,28 @@
+<%  var list = rf.collection.findDataSourceFields();
+if (list.length) { %>
+    <div class='fb-edit-section-header'>Populate From</div>
+    <select data-rv-value="model.<%= Formbuilder.options.mappings.POPULATE_UUID %>">
+    <option>
+    <%
+        for (i in (list || [])) { %>
+        <option value="<%= list[i].get('uuid') %>">
+        <%= list[i].get('label') %>
+        </option>
+    <% } %>
+    </select>
+    <select data-rv-value="model.<%= Formbuilder.options.mappings.POPULATE_FROM %>">
+    <option>
+    <%
+        var populationUuid = rf.get('options.populate_uuid');
+        var populationModel = rf.collection.findWhereUuid(populationUuid) || {};
+        if (populationUuid && populationModel) {
+            var dataSource = populationModel.get('options.data_source');
+            var listProperties = Formbuilder.attr('sources')[dataSource].properties;
+            for (i in listProperties) { %>
+            <option value="<%= i %>">
+            <%= listProperties[i] %>
+            </option>
+    <%  }
+    } %>
+    </select>
+<% } %>

src/templates/view/table_element.html

@@ -1,3 +1,2 @@
 <%= Formbuilder.fields[rf.get(Formbuilder.options.mappings.TYPE)].view({rf: rf}) %>
-<%= Formbuilder.templates['view/description']({rf: rf}) %>
 <%= Formbuilder.templates['view/remove']({rf: rf}) %>

src/templates/view/table_field.html

@@ -1,24 +1,24 @@
-<span class="drop-area" rowspan="2">
+<span class="drop-area">
 <%= Formbuilder.templates['view/element_selector']() %>
 </span>
 <table class="response-field-table">
 
      <tbody>
         <tr>
             <% for (i in (rf.get('options.elements') || [])) { %>
-            <td data-uuid="<%= rf.get('options.elements')[i].uuid %>" class="fb-field-wrapper subtemplate-wrapper header header-<%= rf.get('options.elements')[i].uuid %>"></td>
+            <td width="<%= rf.get('options.elements')[i].width %>" data-uuid="<%= rf.get('options.elements')[i].uuid %>" class="fb-field-wrapper subtemplate-wrapper header header-<%= rf.get('options.elements')[i].uuid %>"></td>
             <% } %>
         </tr>
         <tr>
             <% for (i in (rf.get('options.elements') || [])) { %>
-            <td data-uuid="<%= rf.get('options.elements')[i].uuid %>" class="fb-field-wrapper subtemplate-wrapper element element-<%= rf.get('options.elements')[i].uuid %>"></td>
+            <td width="<%= rf.get('options.elements')[i].width %>" data-uuid="<%= rf.get('options.elements')[i].uuid %>" class="fb-field-wrapper subtemplate-wrapper element element-<%= rf.get('options.elements')[i].uuid %>"></td>
             <% } %>
         </tr>
     </tbody>
     <tfoot>
         <tr>
             <% for (i in (rf.get('options.elements') || [])) { %>
-            <td data-uuid="<%= rf.get('options.elements')[i].uuid %>" class="fb-field-wrapper subtemplate-wrapper total total-<%= rf.get('options.elements')[i].uuid %>"></td>
+            <td width="<%= rf.get('options.elements')[i].width %>" data-uuid="<%= rf.get('options.elements')[i].uuid %>" class="fb-field-wrapper subtemplate-wrapper total total-<%= rf.get('options.elements')[i].uuid %>"></td>
             <% } %>
         </tr>
     </tfoot>

src/templates/view/table_header.html

@@ -1 +1,2 @@
-<%= Formbuilder.templates['view/label']({rf: rf}) %>
+<%= Formbuilder.templates['view/label']({rf: rf}) %>
+<%= Formbuilder.templates['view/description']({rf: rf}) %>