Custom Templates

The form used for entering data into CloudTables is simple and clean and works well when there aren't many fields. If you have a large number of fields you wish to edit, it may be more convenient if those fields are grouped together by category.

In this example we replace the standard form with a custom form. The custom form is crude, but you can customise this as you please so the styling is in tune with your site.

This example uses the following code:

#customForm {
  display: flex;
  flex-flow: row wrap;
}

#customForm fieldset {
  flex: 1;
  border: 1px solid #aaa;
  margin: 0.5em;
}

#customForm fieldset legend {
  padding: 5px 20px;
  border: 1px solid #aaa;
  font-weight: bold;
}

#customForm fieldset.name {
  flex: 2 100%;
}

#customForm fieldset.name legend {
  background: #bfffbf;
}

#customForm fieldset.office legend {
  background: #ffffbf;
}

#customForm fieldset.hr legend {
  background: #ffbfbf;
}

#customForm div.DTE_Field {
  padding: 5px;
}

<div id="customForm" style="display: none;">
  <fieldset class="name">
    <legend>Name</legend>
    <div data-editor-template="dp-52"></div>
  </fieldset>
  <fieldset class="office">
    <legend>Office</legend>
    <div data-editor-template="dp-54"></div>
  </fieldset>
  <fieldset class="hr">
    <legend>HR info</legend>
    <div data-editor-template="dp-55"></div>
    <div data-editor-template="dp-53"></div>
    <div data-editor-template="dp-57"></div>
    <div data-editor-template="dp-56"></div>
  </fieldset>
</div>

<script>
document.addEventListener('ct-ready', function(e) {
  var editor = e.editor;
  $('#customForm').show();
  editor.template('#customForm');
  $('#customForm').detach();
});
</script>