Overview goForm

Tables (or list) are used in many cases. Especially in all forms of ERP. I found that Go is good at rending small tables, but when bigger lists behaves not well. So I searched for several solutions to handle looong list tables. There are tons of "libraries" out there and I have tested only a few of them. I have decided to test agGrid further.

Forms are often used in conjuction with tables. Forms can be vanilla HTML or created by Javascript. In my case I am investigating to use the vanilla in order to make it more "generic". Here is the code that fetches ONE row from the database (via API) and creates a form "on-the-fly".

 function getcard(id, width) {

  if (width < 1750) {
    const table = document.getElementById("boxtable")
    const card = document.getElementById("boxcard")
    table.classList.add("hide")
    card.classList.add("show")
  }

  form = document.getElementById("form")
  form.innerHTML = "";
  var url = "https://api.go4webdev.org/c_que?id=" + id;
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url);
  xhr.setRequestHeader("Accept", "application/json");

  xhr.onload = function() {
    if (xhr.readyState === 4) {
      get(JSON.parse(this.responseText))
    }
  };

  xhr.send();


  function get(data) {
    const tmpl = [{
        tag: "input",
        label: "ID",
        type: "text",
        id: "id",
        value: data.que_id
      },
      {
        tag: "input",
        label: "Subject",
        type: "text",
        id: "name",
        value: data.que_subject
      },
      {
        tag: "textarea",
        label: "Desc",
        id: "desc",
        value: data.que_desc
      }
    ]

    form = document.getElementById("form")

    for (var row in tmpl) {
      switch (tmpl[row].tag) {
        case "input":
          div = document.createElement('div');
          div.setAttribute("class", "inputbox");
          form.appendChild(div)
          input = document.createElement("input");
          for (var key in tmpl[row]) {
            switch (key) {
              case "label":
                label = document.createElement("label");
                label.innerHTML = tmpl[row][key];
                div.appendChild(label);
                break;
              default:
                input.setAttribute(key, tmpl[row][key]);
            }
            div.appendChild(input);
          }
          break
        case "textarea":
          div = document.createElement('div');
          div.setAttribute("class", "areabox");
          form.appendChild(div)
          textarea = document.createElement("textarea");
          for (var key in tmpl[row]) {
            switch (key) {
              case "label":
                label = document.createElement("label");
                label.innerHTML = tmpl[row][key];
                div.appendChild(label);
                break;
              default:
                textarea.setAttribute(key, tmpl[row][key]);
                textarea.innerHTML = data.que_desc
            }
            div.appendChild(textarea);
          }
          break
        default:
          alert("missing tag")
      }
    }
  }
}