Add tables

The article details instructions on adding table structures to a legacy Manual Task design implemented via Code Editor.

Prepare Manual Task

Insert the below code into Manual Task Code Editor section:

Manual Task > Code Editor

Example

<#include "extras.ftl" parse=true/>
<#include "html.ftl" parse=true/>
<#include "answers.ftl" parse=true/>
<#assign FEEDBACK_ENABLED = true>

<@hit contentCss="https://s3.amazonaws.com/workfusion-resources/saas/ms/ms.bootstrap.min.css">
<@script src="https://s3.amazonaws.com/workfusion-resources/bootstrap/js/bootstrap-tab.js"/>  
  
<@instructions title="<h2>Tabula usage instruction</h2>">
  <!--- editable content -->
  <@editable id="__INSTRUCTIONS__"><br><br></@editable>
</@instructions>
  
<style type="text/css">
    body {
        padding-left: 20px;
        padding-right: 20px;
    }
  
    .center-box,
    .feedback_panel {
        max-width: 100% !important;
    }
    
    .thumbnail {
        border: 0;
        padding: 0;
    }
    
    .place {
        padding: 0;
        border-radius: 3px;
        margin-bottom: 10px;
    }
    
    .table-upload {
      width: 100%;
      border-collapse: collapse;
    }
    
    .table-upload td {
      vertical-align: top;
      padding: 0;
    }
    
    .table-upload .answers-column {
      width: 310px;
      padding: 10px;
      border-right: 1px solid #d8d8d8;
      background: #fff;
    }
</style>
  
<@form>
<#if questions??>
    <div class="thumbnail">
    <#list questions as question>
      <@report question=question includeAll=true/>
      
      <@input question=question type="hidden" name="pdf_selections_json" id="pdf_selections_json" answer=true/>
      <@input question=question type="hidden" name="pdf_selections_json_new" id="pdf_selections_json_new" answer=true/>
      <@input question=question type="hidden" name="document_link" id="document_link" value="${question.data['document_link_pdf']}"/>
      
      <div style="position:relative;margin:2px 0px" class="block question">
          <div style="position:absolute;top:0px;right:0px;background-color:#e0e0e0;padding:1px 4px;border: 1px solid #C0C0C0;border-radius: 0px" class="number">
              <b>${question_index + 1}</b>
          </div>
          <div>
              <div class="place bg-dark">
                  <@editable id="__DATA__">${question.data.blank} <br><br></@editable>
              </div>
              <div class="place">
                  <table class="table-upload">
                      <tr>
                          <td class="answers-column">
                              <@answers question=question/>
                          </td>
                          <td>
                              <iframe src="https://your-instance-tabula.crowdcomputingsystems.com/" frameborder="0" style="width:100%;height:800px" id="previewFrame"></iframe>
                          </td>
                      </tr>
                  </table>
              </div>
          </div>
      </div>
      <script type="text/javascript">
      $(document).ready(function () {
        $('#previewFrame').load(function() {
          loadFile();
          $('#previewFrame').unbind("load");
        });

        window.addEventListener("message", function (event) {
          if(event.data.coordinates) {
            $('#pdf_selections_json_new').val(event.data.coordinates);
            var url = $('#previewFrame').attr('src');
            var file_id = url.slice(url.lastIndexOf('/') + 1);
            $.ajax({
              url: "https://your-instance-tabula.crowdcomputingsystems.com/pdfs/" + file_id + "/tables-user.json",
              type: "GET",
              async: false,
              success: function(msg) 
              {
                var res = {"pages": []}
                var i = 0;
                msg.forEach(function(page) {
                   res["pages"].push({"page":[]})
                   console.log(page);
                   page.forEach(function(table) {
                      console.log(i);
                      console.log(res["pages"][i]);
                      res["pages"][i]["page"].push({"table":table});
                   });
                   i++;
                });
                $('#pdf_selections_json').val(JSON.stringify(res));
              }
            });
          }
          if(event.data.coordinates && JSON.parse(event.data.coordinates).length) {
               $('.submit-btn').click();
          } else if (!event.data.fileUrl){
              alert('Please select at least one page in the document by clicking and dragging over the relevant area (usually table)');
          }
        }, false);

        var $submitBtn = $('.submit-btn').hide();
        var $pseudoSubmit = $('<a href="#" id="pseudoA" type="button" class="button btn btn-primary">Submit</a>');

        $submitBtn.after($pseudoSubmit);
        $pseudoSubmit.on('click',pseudoSubmitClick);
      });
      function pseudoSubmitClick() {
        document.getElementById('previewFrame').contentWindow.postMessage("getCoordinates", 'https://your-instance-tabula.crowdcomputingsystems.com/');
      }
   
      function loadFile() {
        $.ajax({
          url: "https://your-instance-tabula.crowdcomputingsystems.com/upload.json",
          type: "POST",
          async: false,
          data: {
            file_url: decodeURIComponent($('#document_link').val())
          },
          success: function(msg) {
            var file_id = JSON.parse(msg)[0].file_id;
            var frame_current_url = $("#previewFrame").attr("src");
            $("#previewFrame").attr("src", frame_current_url + "pdf/" + file_id);
          }
        });
      }
      </script>
    </#list>
    </div>
</#if>
<@submit text="Submit" />
</@form>
</@hit>

Replace <your-instance> with the current instance name.

${question.data['document_link_pdf']} id the document_link_pdf column name in the input file.

Work with table

Controls

• Auto-detect Tables: table areas are automatically recognized and selected in a document.
• Clear All Selections: delete all selected areas.
• Reupload File: upload another PDF file.

Additional controls

• Manual selection of an area: click and hold the left mouse button, drag it over the area to be selected, and release the button when finished.
• Click cross in the red area to delete a single area.
• For a multi-page PDF document, the Repeat Selection control is displayed near the selected area highlighted in red. Click the control to select the same area on each page.