widget_list 1.2.0 → 1.2.1

data/README.md

@@ -125,9 +125,9 @@ widget_list features and configurations primarily work by a single large hash pa
 
 `data` - A "sequel" formatted resultset like would be returned from _select() method.  Instead of running a SQL query, you can pass an array to populate the list `default={}`
 
-`collClass` - Your custom <td> class for all <td>'s `default=''`
+`collClass` - Your custom td class for all td's `default=''`
 
-`align` - <td> align attribute for all <td>'s `default=''`
+`align` - td align attribute for all td's `default=''`
 
 `fields` - The visible fields shown in the current list.  KEY=column name VALUE= displayed column header `default={}`
 
@@ -221,10 +221,34 @@ widget_list features and configurations primarily work by a single large hash pa
 
 `borderedColumns` - Add a right border to each column. `default=false`
 
+`borderedRows` - Style the border of each row. `default=false`
+
+`borderRowStyle` - Border style of each row. `default='1px solid #CCCCCC'`
+
+`borderHeadFoot` - Style the border of header (bottom) and footer (top). `default=false`
+
+`headFootBorderStyle` - Border style of header (bottom) and footer (top). `default='1px solid #CCCCCC'`
+
 `borderColumnStyle` - Style of row if you use this above feature. `default='1px solid #CCCCCC'`
+
+`bordersEverywhere?` - If true, use borderEverywhere for all four borders you can pass separately `default=false`
+
+`borderEverywhere` - The catch all style of borders for headers, rows, outer table border and columns. `default='1px solid #CCCCCC'`
  
+`defaultButtonClass`  - As you have seen in many screenshots, there are several buttons.  This controls the innerClass of those drawn from the list.  See lib/widget_list/widgets.rb `default='info'`
+
+`useBoxShadow`  - Show shadow or not on list `default=true`
+
+`shadowInset`  - Number or string with '11Px' for an 11PX Inset `default=10`
+
+`shadowSpread` - Number or string with '11Px' for an 11PX spread `default=20`
+
+`shadowColor` - Color of bottom right shadow `default='shadowColor'`
+
 `rowClass` - Class added to all rows `default=''`
 
+`rowFontColor` - Font color of all data rows that dont have a rowStylesByStatus color: passed to it `default='black'`
+
 `rowColorByStatus` - {'rowColorByStatus' =>
                                 {'active'=>
                                    {'No'  => '#EBEBEB' }

data/app/views/widget_list/administration/_field_row.html.erb

@@ -0,0 +1,11 @@
+<tr>
+  <td>
+    <!--FIELD-->:&#160;<input type="text" style="width:350px" class="<!--SUBJECT-->_keys" onblur="jQuery(this).attr('value',jQuery(this).val().trim());<!--ONBLUR1-->" name="<!--SUBJECT-->[key][]" id="<!--SUBJECT-->[key][]" value="<!--FIELD_VALUE-->"/>
+  </td>
+  <td>
+    <!--DESC-->:&#160;<input <!--DISABLED--> type="text" style="width:350px" class="<!--SUBJECT-->_descriptions"  onblur="jQuery(this).attr('value',jQuery(this).val().trim());<!--ONBLUR2-->" name="<!--SUBJECT-->[description][]" id="<!--SUBJECT-->[description][]" value="<!--FIELD_DESC-->"/>
+  </td>
+  <td>
+    <!--REMOVE_FIELD_BUTTON-->
+  </td>
+</tr>

data/app/views/widget_list/administration/_output.html.erb

@@ -0,0 +1,856 @@
+<style type="text/css">
+  input[type="text"] {
+    font-size:25px;
+    height:33px;
+    left:0;
+    line-height:33px;
+    padding:8px 8px 7px;
+    top:0;
+    width:600px;
+  }
+  select {
+    font-size:25px;
+    height:50px;
+    left:0;
+    line-height:33px;
+    top:0;
+    width:600px;
+  }
+
+  .buttons_drill_down_name_button {
+    margin-right: 70px;
+  }
+
+  .buttons_data_to_pass_from_view_button {
+    margin-right: 120px;
+  }
+</style>
+
+<script type="text/javascript">
+  var all = '.start,.fields,.rows,.search,.footer,.misc_submit';
+  var all_btns = '#start,#fields,#rows,#search,#footer,#misc_submit';
+  jQuery(document).ready(function () {
+    if (jQuery('#view').val() != '') {
+      jQuery(all_btns).removeClass('disabled');
+    }
+    if (jQuery('#preview').attr('src') == '') {
+      jQuery('#preview').hide();
+    } else {
+      jQuery('#preview').show();
+    }
+
+  });
+
+  function VerifyOK(func_name) {
+    var ok = true;
+    if (jQuery('#view').val() == '') {
+      ok = false;
+      alert('Please select a Model to use as your base widget_list');
+    }
+    else if (jQuery('#rowLimit').val() != '10' && jQuery('#rowLimit').val() != '20' && jQuery('#rowLimit').val() != '50' && jQuery('#rowLimit').val() != '100' && jQuery('#rowLimit').val() != '500' && jQuery('#rowLimit').val() != '1000') {
+      ok = false;
+      alert('Invalid Row Limit, please see help button.');
+    }
+    return ok;
+  }
+
+  function ClickTab(which_class,func_name) {
+    if (VerifyOK(func_name)) {
+      jQuery('.search_dependent').hide(0,function() {
+        jQuery(all).hide(0,function() {
+          jQuery(which_class).fadeIn(0,function() {
+            if (func_name == 'ShowSearch') {
+              ShowSearchOptions(function() {
+                ShowGroupingOptions();
+                ShowExportOptions();
+
+              });
+            }
+            if (func_name == 'ShowFields') {
+              ShowHiddenOptions();
+              ShowFunctionOptions();
+            }
+            if (func_name == 'ShowSubmit') {
+              ShowCheckboxOptions();
+            }
+            if (func_name == 'ShowRows') {
+              ShowButtonOptions();
+              ShowDrillDownOptions();
+            }
+            if (func_name == 'ShowFooter') {
+              ShowFooterOptions();
+            }
+          });
+        });
+      });
+      SaveChanges();
+    }
+  }
+
+  function ShowStart() {
+    ClickTab('.start',arguments.callee.name);
+  }
+
+  function ShowFields() {
+    ClickTab('.fields',arguments.callee.name);
+  }
+
+  function ShowRows() {
+    ClickTab('.rows',arguments.callee.name);
+  }
+
+  function ShowSearch() {
+    ClickTab('.search',arguments.callee.name);
+  }
+
+  function ShowFooter() {
+    ClickTab('.footer',arguments.callee.name);
+  }
+
+  function ShowSubmit() {
+    ClickTab('.misc_submit',arguments.callee.name);
+  }
+
+  function ReplaceColumnsToLinked(obj) {
+    found = false;
+    var className = obj.className;
+    jQuery(obj).css('background-color','white');
+    jQuery('.fields_keys, .fields_hidden_keys, .fields_function_keys').each(
+      function(key, value) {
+        if(jQuery(value).val() == jQuery(obj).val().trim() && jQuery(obj).val().search(/_linked/i) == -1) {
+          found = true;
+          var id_original = jQuery(obj).val().trim();
+          jQuery(value).val(jQuery(obj).val().trim() + '_linked');
+          jQuery(obj).val(jQuery(obj).val().trim() + '_linked');
+          jQuery(obj).attr('value',jQuery(this).val().trim());
+          if (className == 'drill_downs_data_to_pass_from_view') {
+            jQuery('.drill_downs_column_to_show[value="col_name"]').each(
+              function(key1, value1) {
+                jQuery(value1).val(jQuery(obj).val().trim());
+                jQuery(value1).attr('value',jQuery(value1).val().trim());
+                return false;
+              }
+            )
+          } else {
+            jQuery('.drill_downs_data_to_pass_from_view[value="col_name"]').each(
+              function(key1, value1) {
+                jQuery(value1).val(jQuery(obj).val().trim());
+                jQuery(value1).attr('value',jQuery(value1).val().trim());
+                return false;
+              }
+            )
+          }
+
+          jQuery('.drill_downs_drill_down_name[value="filter_col_name"]').each(
+              function(key1, value1) {
+                jQuery(value1).val('filter_by_' + id_original);
+                jQuery(value1).attr('value','filter_by_' + id_original);
+                return false;
+              }
+          )
+
+
+          jQuery('#showHidden').attr('checked',true);
+          AddHiddenField();
+          jQuery('.fields_hidden_keys[value=""]').each(
+              function(key1, value1) {
+                jQuery(value1).val(id_original);
+                jQuery(value1).attr('value',id_original);
+                return false;
+              }
+          );
+        }
+      }
+    );
+
+    if (!found && jQuery(obj).val().search(/_linked/i) == -1) {
+      alert('Invalid Field Name defined.  Please change the value');
+      jQuery(obj).css('background-color','red');
+    }
+  }
+
+  function InvalidField(obj) {
+    found = false;
+    jQuery(obj).css('background-color','white');
+    jQuery('.fields_keys, .fields_hidden_keys, .fields_function_keys').each(
+      function(key, value) {
+        if(jQuery(value).val() == jQuery(obj).val().trim()) {
+          found = true;
+        }
+      }
+    );
+
+    if (!found) {
+      alert('Invalid Field Name defined.  Please change the value');
+      jQuery(obj).css('background-color','red');
+    }
+  }
+
+  function GoodClass(obj) {
+    found = false;
+    jQuery(obj).css('background-color','white');
+    if (jQuery(obj).val() == 'primary' || jQuery(obj).val() == 'info' || jQuery(obj).val() == 'success' || jQuery(obj).val() == 'danger' || jQuery(obj).val() == 'disabled' || jQuery(obj).val() == 'default') {
+      found = true;
+    }
+    if (!found) {
+      alert('Invalid Class Name.  Click Help icon for more information.');
+      jQuery(obj).css('background-color','red');
+    }
+  }
+
+
+  function ShowSearchOptions(callback) {
+    if (jQuery('#showSearch').is(':checked')) {
+      jQuery('.search_dependent').show();
+    } else {
+      jQuery('.search_dependent').hide();
+    }
+    if (typeof(callback) == 'function') {
+      (callback)();
+    }
+  }
+
+  function ShowGroupingOptions() {
+    if (jQuery('#useGrouping').is(':checked') && jQuery('#showSearch').is(':checked')) {
+      jQuery('.grouping_dependent').show();
+    } else {
+      jQuery('.grouping_dependent').hide();
+    }
+  }
+
+  function ShowRansackOptions() {
+    if (jQuery('#useRansack').is(':checked') && jQuery('#showSearch').is(':checked')) {
+      jQuery('.ransack_dependent').show();
+    } else {
+      jQuery('.ransack_dependent').hide();
+    }
+  }
+
+  function ShowFooterOptions() {
+    if (jQuery('#footerOn').is(':checked')) {
+      jQuery('.footer_dependent').show();
+    } else {
+      jQuery('.footer_dependent').hide();
+    }
+  }
+
+  function ShowExportOptions() {
+    if (jQuery('#showExport').is(':checked') && jQuery('#showSearch').is(':checked')) {
+      jQuery('.export_dependent').show();
+    } else {
+      jQuery('.export_dependent').hide();
+    }
+  }
+
+  function ShowHiddenOptions() {
+    if (jQuery('#showHidden').is(':checked')) {
+      if (jQuery('.fields_hidden_keys').length == 0) {
+        AddHiddenField();
+      }
+      jQuery('.hidden_fields_dependent').show();
+    } else {
+      jQuery('.hidden_fields_dependent').hide();
+    }
+  }
+
+  function ShowButtonOptions() {
+    if (jQuery('#rowButtonsOn').is(':checked')) {
+      jQuery('.button_dependent').show();
+    } else {
+      jQuery('.button_dependent').hide();
+    }
+  }
+  function ShowDrillDownOptions() {
+    if (jQuery('#drillDownsOn').is(':checked')) {
+      if (jQuery('.drill_downs_data_to_pass_from_view').length == 0) {
+        AddDrillDown();
+      }
+      jQuery('.drill_down_dependent').show();
+    } else {
+      jQuery('.drill_down_dependent').hide();
+    }
+  }
+
+  function ShowFunctionOptions() {
+    if (jQuery('#fieldFunctionOn').is(':checked')) {
+      if (jQuery('.fields_function_keys').length == 0) {
+        AddFieldFunction();
+      }
+      jQuery('.function_dependent').show();
+    } else {
+      jQuery('.function_dependent').hide();
+    }
+  }
+
+  function ShowCheckboxOptions() {
+    if (jQuery('#checkboxEnabled').is(':checked')) {
+      jQuery('.checkbox_dependent').show();
+    } else {
+      jQuery('.checkbox_dependent').hide();
+    }
+  }
+
+  function AddGroupingItem() {
+    jQuery('#grouping_items').html(jQuery('#grouping_items').html() + jQuery('#grouping_items_default').html());
+  }
+
+  function AddField() {
+    jQuery('#field_table').html(jQuery('#field_table').html() + jQuery('#default_field_template').html());
+  }
+
+  function AddGroupBy() {
+    jQuery('#grouping_table').html(jQuery('#grouping_table').html() + jQuery('#default_grouping_template').html());
+  }
+
+  function AddButton() {
+    jQuery('#button_table').html(jQuery('#button_table').html() + jQuery('#default_button_template').html());
+  }
+
+  function AddDrillDown() {
+    jQuery('#drill_down_table').html(jQuery('#drill_down_table').html() + jQuery('#default_drill_down_template').html());
+  }
+
+  function AddFooterButton() {
+    jQuery('#footer_table').html(jQuery('#footer_table').html() + jQuery('#default_footer_template').html());
+  }
+
+  function AddHiddenField() {
+    jQuery('#hidden_field_table').html(jQuery('#hidden_field_table').html() + jQuery('#default_hidden_field_template').html());
+  }
+
+  function AddFieldFunction() {
+    jQuery('#field_function_table').html(jQuery('#field_function_table').html() + jQuery('#default_field_function_template').html());
+  }
+
+  function RemoveField(obj) {
+    jQuery(obj).closest('tr').remove();
+  }
+
+  function ChangeViewModel(obj) {
+    jQuery(all_btns).addClass('disabled');
+    if(jQuery(obj).val() != '') {
+      jQuery.post(jQuery('#widget_list_administration').attr('action'), 'ajax=1&model=' + jQuery(obj).val(), function(response)
+      {
+        jQuery('#field_table').html(response['fields']);
+        jQuery('#hidden_field_table').html(response['fields_hidden']);
+        jQuery('#checkboxField').html(response['checked_fields']);
+        jQuery('#footer_table').html(response['footer_buttons']);
+        jQuery('#grouping_table').html(response['group_by']);
+        SaveChanges();
+        if (jQuery(obj).val() != '') {
+          jQuery(all_btns).removeClass('disabled');
+        }
+
+
+        jQuery(all_btns).removeClass('disabled');
+        jQuery('#title').val(jQuery(obj).val() + 's');
+        jQuery('#listDescription').val('Showing All ' + jQuery(obj).val() + 's');
+
+        if (jQuery(obj).val() != '' && jQuery('#noDataMessage').val() == '') {
+          jQuery('#noDataMessage').val('No ' + jQuery(obj).val() + 's Found Within Your Criteria');
+        }
+
+        if (jQuery(obj).val() != '' && jQuery('#showExport').is(':checked')) {
+          jQuery('#exportButtonTitle').val('Export All ' + jQuery(obj).val() + 's');
+        }
+      }, "json");
+    }
+  }
+
+  function SaveChanges() {
+    jQuery(all_btns).addClass('disabled');
+    jQuery.post(jQuery('#widget_list_administration').attr('action'), 'ajax=1&save=1&' + jQuery('#widget_list_administration').serialize(), function(response)
+    {
+      jQuery(all_btns).removeClass('disabled');
+      jQuery('#preview').show();
+      jQuery('#preview').attr('src',jQuery('#widget_list_administration').attr('action') + '?iframe=1');
+      jQuery('#preview').css('width','100%');
+      jQuery('#preview').css('height','500px');
+    }, "json");
+  }
+
+  function Submit() {
+    if (VerifyOK('')) {
+      jQuery('#widget_list_administration').submit();
+    }
+  }
+</script>
+<form action="<!--POST_URL-->" method="post" id="widget_list_administration">
+  <h1 style="font-size:24;"><!--TITLE--></h1><div class="horizontal_rule"></div>
+  <h3>Get started quickly by selecting the features you need for this list</h3>
+  <table>
+    <!--BUTTON SECTION-->
+      <tr id="sections">
+        <td colspan="3">
+          <h3><!--BUTTONS--></h3>
+        </td>
+      </tr>
+
+    <!--START SECTION-->
+      <tr class="start">
+        <td>
+          <h3>Internal Name:</h3>
+        </td>
+        <td>
+          <input type="text" name="name" value="<!--NAME_VALUE-->"/>
+        </td>
+        <td>
+          &#160;
+        </td>
+      </tr>
+      <tr class="start">
+        <td>
+          <h3>Model:</h3>
+        </td>
+        <td>
+          <select name="view" id="view" onchange="ChangeViewModel(this)">
+            <!--VIEW_OPTIONS-->
+          </select>
+        </td>
+        <td>
+          &#160;
+        </td>
+      </tr>
+      <tr class="start">
+        <td>
+          <h3>Title:</h3>
+        </td>
+        <td>
+          <input type="text" name="title" id="title" value="<!--TITLE_VALUE-->"/>
+        </td>
+        <td>
+          <!--TITLE_HELP_BUTTON-->
+        </td>
+      </tr>
+
+      <tr class="start">
+        <td>
+          <h3>Initial Description:</h3>
+        </td>
+        <td>
+          <input type="text" name="listDescription" id="listDescription" value="<!--DESC_VALUE-->"/>
+        </td>
+        <td>
+          <!--DESC_HELP_BUTTON-->
+        </td>
+      </tr>
+
+    <!--FIELDS SECTION-->
+      <tr class="fields" style="display:none;">
+        <td>
+          <h3>Allow Sorting?:</h3>
+        </td>
+        <td>
+          <input type="checkbox" name="useSort" id="useSort" value="1" <!--SORTING_CHECKED-->/>
+        </td>
+        <td>
+          &#160;
+        </td>
+      </tr>
+
+      <tr class="fields" style="display:none;">
+        <td>
+          <h3>No Data Message:</h3>
+        </td>
+        <td>
+          <input type="text" name="noDataMessage" id="noDataMessage" value="<!--NO_DATA_VALUE-->"/>
+        </td>
+        <td>
+          &#160;
+        </td>
+      </tr>
+
+      <tr class="fields" style="display:none;">
+        <td colspan="3">
+          <h1>Field Selection:</h1>
+          <script type="text/plain" id="default_field_template">
+            <!--FIELD_TEMPLATE-->
+          </script>
+          <table style="margin-left:150px;" id="field_table">
+            <!--ALL_FIELDS-->
+          </table>
+          <table style="margin-left:150px;">
+            <tr>
+              <td colspan="3">
+                 <!--ADD_FIELD_BUTTON-->
+              </td>
+            </tr>
+          </table>
+        </td>
+      </tr>
+
+      <tr class="fields" style="display:none;">
+        <td style="width:300px;">
+          <h3>Hidden Fields?:</h3>
+        </td>
+        <td>
+          <input type="checkbox" name="showHidden" onchange="ShowHiddenOptions();" id="showHidden" value="1" <!--SHOW_HIDDEN_CHECKED-->/>
+        </td>
+        <td>
+          <!--HIDDEN_HELP_BUTTON-->
+        </td>
+      </tr>
+
+      <tr class="fields hidden_fields_dependent" style="display:none;">
+
+        <td colspan="3">
+          <h1 style="margin-left: 75px;">Hidden Field Selection:</h1>
+          <script type="text/plain" id="default_hidden_field_template">
+            <!--HIDDEN_FIELD_TEMPLATE-->
+          </script>
+          <table style="margin-left:150px;" id="hidden_field_table">
+            <!--ALL_HIDDEN_FIELDS-->
+          </table>
+          <table style="margin-left:150px;">
+            <tr>
+              <td colspan="3">
+                <!--ADD_HIDDEN_FIELD_BUTTON-->
+              </td>
+            </tr>
+          </table>
+        </td>
+      </tr>
+
+      <tr class="fields" style="display:none;">
+        <td style="width:300px;">
+          <h3>Field Function?:</h3>
+        </td>
+        <td>
+          <input type="checkbox" name="fieldFunctionOn" onchange="ShowFunctionOptions();" id="fieldFunctionOn" value="1" <!--SHOW_FUNCTION_CHECKED-->/>
+        </td>
+        <td>
+          <!--FUNC_HELP_BUTTON-->
+        </td>
+      </tr>
+
+      <tr class="fields function_dependent" style="display:none;">
+        <td colspan="3">
+          <h1 style="margin-left: 75px;">Field Functions To Wrap Around Fields:</h1>
+          <script type="text/plain" id="default_field_function_template">
+            <!--FIELD_FUNCTION_TEMPLATE-->
+          </script>
+          <table style="margin-left:150px;" id="field_function_table">
+            <!--ALL_FIELD_FUNCTIONS-->
+          </table>
+          <table style="margin-left:150px;">
+            <tr>
+              <td colspan="3">
+                <!--ADD_FIELD_FUNCTION_BUTTON-->
+              </td>
+            </tr>
+          </table>
+        </td>
+      </tr>
+
+      <!--ROWS SECTION-->
+      <tr class="rows" style="display:none;">
+        <td>
+          <h3>Row Limit</h3>
+        </td>
+        <td>
+          <input type="text" name="rowLimit" id="rowLimit" value="<!--ROW_LIMIT_VALUE-->"/>
+        </td>
+        <td>
+          <!--ROW_HELP_BUTTON-->
+        </td>
+      </tr>
+
+
+
+      <tr class="rows" style="display:none;">
+        <td style="width:300px;">
+          <h3>Row Buttons?:</h3>
+        </td>
+        <td>
+          <input type="checkbox" name="rowButtonsOn" onchange="ShowButtonOptions();" id="rowButtonsOn" value="1" <!--BUTTONS_ON_CHECKED-->/>
+        </td>
+        <td>
+          <!--BUTTON_HELP_BUTTON-->
+        </td>
+      </tr>
+
+      <tr class="rows button_dependent" style="display:none;">
+        <td colspan="3">
+          <table style="margin-left:75px;">
+            <tr>
+              <td>
+                <h3>Row Button Column Name</h3>
+              </td>
+              <td>
+                <input type="text" name="rowButtonsName" id="rowButtonsName" value="<!--BUTTON_NAME_VALUE-->"/>
+              </td>
+              <td>
+                &#160;
+              </td>
+            </tr>
+          </table>
+        </td>
+      </tr>
+
+      <tr class="rows button_dependent" style="display:none;">
+        <td colspan="3">
+          <h1  style="margin-left:75px;">Buttons:</h1>
+          <script type="text/plain" id="default_button_template">
+            <!--THE_BUTTON_TEMPLATE-->
+          </script>
+          <table style="margin-left:150px;" id="button_table">
+            <!--ALL_BUTTONS-->
+          </table>
+          <table style="margin-left:150px;">
+            <tr>
+              <td colspan="3">
+                <!--ADD_THE_BUTTON_BUTTON-->
+              </td>
+            </tr>
+          </table>
+        </td>
+      </tr>
+
+
+
+
+    <tr class="rows" style="display:none;">
+      <td style="width:300px;">
+        <h3>Drill Down Columns?:</h3>
+      </td>
+      <td>
+        <input type="checkbox" name="drillDownsOn" onchange="ShowDrillDownOptions();" id="drillDownsOn" value="1" <!--DRILL_DOWN_CHECKED-->/>
+      </td>
+      <td>
+        <!--DRILL_DOWN_HELP_BUTTON-->
+      </td>
+    </tr>
+
+    <tr class="rows drill_down_dependent" style="display:none;">
+      <td colspan="3">
+        <script type="text/plain" id="default_drill_down_template">
+          <!--THE_DRILL_DOWN_TEMPLATE-->
+        </script>
+        <table style="margin-left:150px;" id="drill_down_table">
+          <!--ALL_DRILL_DOWNS-->
+        </table>
+        <table style="margin-left:150px;">
+          <tr>
+            <td colspan="3">
+              <!--ADD_DRILL_DOWN_BUTTON-->
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+
+
+    <!--SEARCH SECTION-->
+      <tr class="search" style="display:none;">
+        <td style="width:300px;">
+          <h3>Show Search?:</h3>
+        </td>
+        <td>
+          <input type="checkbox" name="showSearch" onchange="ShowSearchOptions(function() {ShowGroupingOptions();})" id="showSearch" value="1" <!--SHOW_SEARCH_CHECKED-->/>
+        </td>
+        <td>
+          &#160;
+        </td>
+      </tr>
+
+      <tr class="search search_dependent" style="display:none;">
+        <td style="width:300px;">
+          <h3>Show Export Button?:</h3>
+        </td>
+        <td>
+          <input type="checkbox" name="showExport" onchange="ShowExportOptions();" id="showExport" value="1" <!--SHOW_EXPORT_CHECKED-->/>
+        </td>
+        <td>
+          &#160;
+        </td>
+      </tr>
+
+      <tr class="search search_dependent export_dependent" style="display:none;">
+        <td colspan="3">
+          <table style="margin-left:75px;">
+            <tr>
+              <td>
+                <h3>Export Button Title:</h3>
+              </td>
+              <td>
+                <input type="text" name="exportButtonTitle" id="exportButtonTitle" value="<!--EXPORT_VALUE-->"/>
+              </td>
+              <td>
+                &#160;
+              </td>
+            </tr>
+          </table>
+        </td>
+      </tr>
+
+      <tr class="search search_dependent" style="display:none;">
+        <td>
+          <h3>Search Description/Title:</h3>
+        </td>
+        <td>
+          <input type="text" name="searchTitle" id="searchTitle" value="<!--SEARCH_TITLE-->"/>
+        </td>
+        <td>
+          <!--SEARCH_TITLE_BUTTON-->
+        </td>
+      </tr>
+
+      <tr class="search search_dependent" style="display:none;">
+        <td>
+          <h3>Use Ransack Advanced Search?:</h3>
+        </td>
+        <td>
+          <input type="checkbox" name="useRansack" onchange="ShowRansackOptions()" id="useRansack" value="1" <!--USE_RANSACK-->/>
+        </td>
+        <td>
+          <!--RANSACK_HELP_BUTTON-->
+        </td>
+      </tr>
+
+      <tr class="search search_dependent ransack_dependent" style="display:none;">
+        <td colspan="3">
+          <table style="margin-left:75px;">
+            <tr>
+              <td>
+                <h3>Customized Ransack Form?:</h3>
+              </td>
+              <td>
+                <input type="checkbox" name="ransackAdvancedForm" id="ransackAdvancedForm" value="1" <!--USE_RANSACK_ADV-->/>
+              </td>
+              <td>
+                <!--ADV_RANSACK_HELP_BUTTON-->
+              </td>
+            </tr>
+          </table>
+        </td>
+      </tr>
+
+      <tr class="search search_dependent" style="display:none;">
+        <td>
+          <h3>Use Grouping?:</h3>
+        </td>
+        <td>
+          <input type="checkbox" name="useGrouping" onchange="ShowGroupingOptions()" id="useGrouping" value="1" <!--USE_GROUPING-->/>
+        </td>
+        <td>
+          <!--GROUP_BY_HELP_BUTTON-->
+        </td>
+      </tr>
+
+      <tr class="search search_dependent grouping_dependent" style="display:none;">
+        <td colspan="3">
+          <h1  style="margin-left: 75px;">Custom Items To Group By:</h1>
+          <table>
+            <tr>
+              <td>
+                <script type="text/plain" id="default_grouping_template">
+                   <!--DEFAULT_GROUPING-->
+                </script>
+                <table  style="margin-left:150px;" id="grouping_table">
+                  <!--GROUPING_ITEMS-->
+                </table>
+                <table style="margin-left:150px;">
+                  <tr>
+                    <td colspan="3">
+                      <!--ADD_GROUP_BY_BUTTON-->
+                    </td>
+                  </tr>
+                </table>
+              </td>
+            </tr>
+          </table>
+
+          <table style="margin-left:150px;">
+            <tr>
+              <td colspan="3">
+                <!--ADD_GROUPING_BUTTON-->
+              </td>
+            </tr>
+          </table>
+        </td>
+      </tr>
+
+    <!--FOOTER SECTION-->
+    <tr class="footer" style="display:none;">
+      <td style="width:300px;">
+        <h3>Build Customized Footer?:</h3>
+      </td>
+      <td>
+        <input type="checkbox" name="footerOn" onchange="ShowFooterOptions();" id="footerOn" value="1" <!--FOOTER_CHECKED-->/>
+      </td>
+      <td>
+
+      </td>
+    </tr>
+    <tr class="footer footer_dependent" style="display:none;">
+      <td colspan="3">
+        <h1  style="margin-left:75px;">Footer Buttons:</h1>
+        <script type="text/plain" id="default_footer_template">
+          <!--FOOTER_BUTTON_TEMPLATE-->
+        </script>
+        <table style="margin-left:150px;" id="footer_table">
+          <!--ALL_FOOTER_BUTTONS-->
+        </table>
+        <table style="margin-left:150px;">
+          <tr>
+            <td colspan="3">
+              <!--ADD_THE_FOOTER_BUTTON-->
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+
+    <!--MISC & SUBMIT SECTION-->
+
+      <tr class="misc_submit" style="display:none;">
+        <td style="width:300px;">
+          <h3>Add Row Checkbox?:</h3>
+        </td>
+        <td>
+          <input type="checkbox" name="checkboxEnabled" onchange="ShowCheckboxOptions();" id="checkboxEnabled" value="1" <!--SHOW_CHECKBOX_CHECKED-->/>
+        </td>
+        <td>
+          &#160;
+        </td>
+      </tr>
+
+      <tr class="misc_submit checkbox_dependent" style="display:none;">
+        <td colspan="3">
+          <table style="margin-left:75px;">
+            <tr>
+              <td>
+                <h3>Checkbox Value:</h3>
+              </td>
+              <td>
+                <select name="checkboxField" id="checkboxField">
+                  <!--CHECKBOX_SELECTED_FIELDS-->
+                </select>
+              </td>
+              <td>
+                <!--CHECK_HELP_BUTTON-->
+              </td>
+            </tr>
+          </table>
+        </td>
+      </tr>
+      <tr class="misc_submit"  style="display:none;" >
+        <td>
+          <h3>Submit:</h3>
+        </td>
+        <td>
+          <!--SUBMIT_WIDGET_LIST-->
+        </td>
+        <td>
+          &#160;
+        </td>
+      </tr>
+
+      <tr>
+        <td colspan="3">
+          <iframe src="" id="preview"></iframe>
+        </td>
+      </tr>
+
+  </table>
+</form>