Creating an Array from a Laserfiche Forms table dynamically

asked on October 28, 2020 • Show version history

Hello

I am trying to create an array instead of a string from a table.

Array syntax is like this:

var tabledata = [{Column1:}];

Normal string is like this:

var myArray = null;

The library I am using is expecting an array instead of a string:

I am trying to pass it data like this:

And receiving the error seen above.

Their example is a bit more static (I am basically trying to achieve this but using a Laserfiche Forms table that has looked up data inside):

My question is basically how do I build an array from this table:

Everything works so far, except for being able to create an array.

Code:

$(document).ready(function () {
  $('.table').on('blur', 'input', appendArray);
  var column1 = new Array();
  function appendArray () {
    $('.table tbody tr').each(function () {
      column1 = $(this).find('.c1 input').val();
      console.log(column1);
    })
    $('head').append('<link href="https://unpkg.com/tabulator-tables@4.5.3/dist/css/tabulator.min.css" rel="stylesheet">');
    $.getScript('https://unpkg.com/tabulator-tables@4.5.3/dist/js/tabulator.min.js', function() {
    var table = new Tabulator('.tablea', {
      layout:"fitColumns",
      columns:[
        {title:"Column1", field:column1, editor:"input"},
        ],
    });
  })
  }
});

0 0

SELECTED ANSWER

replied on October 28, 2020 • Show version history

Try the following code below, you should be able to straight copy/paste: Hope it helps!

Edit: Assuming you only have a single table in your form.

$(document).on('lookupcomplete', function(event) {
  fillTableArray(); // will populate table array once lookup data is populated.
});

var table = [];

function fillTableArray() {
  $('.cf-table-block tbody tr').each(function() {
    var labels = $(this).find('');
    var row = $(this).find('.cf-field > input');
    var object = new Object();
    row.each(function() {
      var key = $(this).parents('td[data-title]').attr('data-title');
      var value = $(this).val()
      object[key]=value;
    });
    table.push(object);
  });
  
  // fillTableArray() // you'll need to manually call it if your data is not populated from a lookup.
  console.log('table',table);
}

1 0

replied on November 8, 2020

I haven't had time to look back into this.

Will get back to you when I get to test this.

Thank you!

0 0

replied on November 11, 2020

After many struggles to figure out proper syntax and understanding different ways of using this, I've come to a solution.

Which is basically what you provided at the top, creating the key and all.

I just did it in a a bit more of a readable way.

I couldn't get your code to run by simply copy pasting, so obviously did some modifications and when I finally started understanding what you provided, I tweaked.

// TODO: Change to lookupcomplete
$(document).ready(function () {
  var data = new Array();

  function appendArray() {
    var obj = new Object();
    var id = $(this).find(".c1 input").val();
    var name = $(this).find(".c2 input").val();
    var email = $(this).find(".c3 input").val();
    var cell = $(this).find(".c4 input").val();
    // Set the object keys
    obj["idcol"] = id;
    obj["name"] = name;
    obj["email"] = email;
    obj["cell"] = cell;
    data.push(obj); // Push into array
  }

  function changeTable() {
    $(".table tbody tr").each(appendArray);
    var table = new Tabulator(".table", {
      layout: "fitColumns",
      data: data, // Pass an array with objects. Field corresponds with object key
      columns: [
        { title: "id", field: "idcol", formatter: "progress" },
        { title: "name", field: "name" },
        { title: "email", field: "email" },
        { title: "cell", field: "cell" },
      ],
    });
  }

  // Append to the Head element
  $("head").append(
    '<link href="https://unpkg.com/tabulator-tables@4.5.3/dist/css/tabulator.min.css" rel="stylesheet">'
  );
  $.getScript(
    "https://unpkg.com/tabulator-tables@4.5.3/dist/js/tabulator.min.js",
    function () {
      $(".table").on("blur", ".c1 input", changeTable);
    }
  );
});

Cheers.

0 0

replied on November 12, 2020

Its odd that what I provided didn't work. I just now tested it again to be sure I accidentally leave any errors in and it still work copy/pasted from the forum answer. The only thing that I can see being an issue is if you have more than one table in your form. I wrote this under the assumption the form only contains a single table.

Anyways, I'm glad you have something that works and suits your needs!

1 0

Question

Question

Creating an Array from a Laserfiche Forms table dynamically

Answer

Replies

Sign in to reply to this post.