Discussions

Help with using the Javascript IOL technique

  • 1.  Help with using the Javascript IOL technique

    Posted 11-30-2018 21:29
    I followed the help from this tutorial to try to replicate the IOL technique:

    https://community.quickbase.com/quickbase/topics/how-to-use-javascript-to-concat-child-records-into-...

    I used the formula found here:

    https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=464&_ga=2.97266711.966581701...

    my end goal is to add the child records to display like in Dan Diebolt'z example:


    My components:

    iol:  <img qbu='module' src='/i/clear2x2.gif' onload="javascript:if(typeof QBU=='undefined'){QBU={};$.getScript(gReqAppDBID+'?a=dbpage&pagename=

    /iol:    &rand='+new Date().getTime())};">

    Child formula field: 

    [iol] & "Childs.js" & [/iol]
    &
    "<div class=QBU_Childs data-rid=" & [Record ID#] & "></div>"

    Javascript variable page titled "Childs.js". The parameters are deleted in this but are in our code and match up:



    (function(){


      $("img[qbu=module]").remove();


    //parameters:
      var dbid = "";
      var dbidParents = "";
      var dbidChilds = "";
      var apptoken = "";
      var n = 100;
      var relatedParentFid = "8";
      var relatedParentLabel = "Related Parent";
      var clist = "";
      var qbuClass = "QBU_Childs";
      var template = "<ul>{{#.}}<li>{{comment}}</li>{{/.}}</ul>";   

      $.ajaxSetup({data: {apptoken: apptoken}});


      var rids = $("div.QBU_Childs").map(function() {
        return this.dataset.rid;
      }).get();


      _.chain(rids).groupBy(function(element, index){
        return Math.floor(index/n);
      }).toArray().each(function(rids, index) {


        $.ajax({
          url: dbidChilds,
          data: {
            act: "API_DoQuery",
            clist: clist,
            query: ridsToQuery(rids, relatedParentFid)
          },
          dataFilter: XMLFlatToObj 
        }).then(function(resp) {
          _.chain(resp.records).groupBy(function(items) {
            return items[relatedParentLabel];
          }).each(function(item, rid) {
            var markup = Mustache.render(template, item);
            $("div." + qbuClass + "[data-rid=" + rid + "]").html(markup);
          });        
        });


      });  


      function XMLFlatToObj(xml, type) {
        var data = [];
        var record = {};
        $("record", xml).each(function() {
          record = {};
          $(this).children().each(function () {
            record[$(this).prop("tagName")] = $(this).text();
          });
          data.push(record);
        });
        return {records: data};
      }


      function ridsToQuery(rids, fid) {
        fid = fid || "3";
        return "{" + fid + ".EX." + rids.join("}OR{" + fid + ".EX.") + "}";
      }


    })();


    Here is my final result:

    _">https://d2r1vs3d9006ap.cloudfront.net/s3_images/1764911/RackMultipart20181130-103997-c72guz-Capture2_inline.JPG?1543613311">

    when in theory it would have both of those records located there. Any help or input would be greatly appreciated!