How does one code an API do_query_count from a webpage?

  • 0
  • 1
  • Question
  • Updated 6 years ago
  • Answered
I'm looking for what seems (to me) to be a missing link.

This article tells how to format an API call: http://quickbase.intuit.com/developer/articles/how-understand-xml-samples

It lays out how to structure the call, and it makes some assumptions that I'm not finding answers to.

1) I'm guessing that the examples given should be inside <script> code </script> tags.

2) I don't see how to get and use the information returned by the call.

I'm looking for help with the end to end process: On an HTML page, how do I invoke an API call, and then display the results on my HTML page?

Any help is greatly appreciated (and apparently will fill a gap here.)

Here is some information about the environment I'm working in.

I have a pre-defined summary report.

Using the article referenced above and the API reference for API_DoQueryCount: http://www.quickbase.com/api-guide/index.html#do_query_count.html


I'm using a QuickBase page, so I don't have access to the <header> section.
I'd like the result of the query to be displayed in a table. Ultimately, I plan to consolidate several queries on a single page as a status report dashboard.


I came up with this (and it does not appear to do anything yet):

<P> Test to see how to call a report with XML / HTTP.</p>

<script>

POST https://intuitcorp.quickbase.com/db/bicwj9x9e
Content-Type: application/xml
Content-Length:
QUICKBASE-ACTION:API_DoQueryCount

<qdbapi>
<qid>7</qid>
<udata>pass-data</udata> <!--optional pass-thru data -->
</qdbapi>

document.write(numMatches);

</script>

Thank you for your assistance!

- David In Tucson


Photo of David_In_Tucson

David_In_Tucson

  • 216 Points 100 badge 2x thumb

Posted 6 years ago

  • 0
  • 1
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,074 Points 20k badge 2x thumb
The QuickBase HTTP API documents the format of the HTTP methods QuickBase has published and is programming language agnostic. In other words, any programming or scripting language that can make network HTTP requests can use the methods documented and most such languages supply native or library methods to make HTTP requests.

What you have pasted into your <script> tag is largely the raw text that would be sent at the application level (of the OSI seven layer model) over the wire to QuickBase. What you should place within the <script> tag is JavaScript which is a scripting language and operates as an abstraction above even the application layer. Moreover, the jQuery library is a popular JavaScript library which acts as a abstraction on top of JavaScript and the DOM. Today almost all custom JavaScript used with QuickBase uses jQuery.

You should be using code such as the following:

<script>
var dbid = "your table dbid";var qid = "your query id";
var promise = $.get(dbid,{ act: "API_DoQueryCount", qid: qid });

$.when(promise).then(function(xml){ var numMatches = $("numMatches",xml).text(); alert(numMatches);});
</script>
Photo of David_In_Tucson

David_In_Tucson

  • 216 Points 100 badge 2x thumb
Thank you Dan.  I think I need a more basic start.   I tried the example you shared and got an error about "$ not defined".   Can you recommend an online resource that will help me on this from the beginning?
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,074 Points 20k badge 2x thumb
Just addd jQuery to the user defined page:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script&gt;

You don't have to add it to QuickBase authored pages because QuickBase includes it already.
Photo of David_In_Tucson

David_In_Tucson

  • 216 Points 100 badge 2x thumb
Thank you Dan!

I made the assumption that QuickBase had already included this.
This is working now.

Thank you for your assistance!
Photo of David_In_Tucson

David_In_Tucson

  • 216 Points 100 badge 2x thumb
Here is what I ended up with (for anyone looking at this later):


<!-- Test to see how to call a report with XML / HTTP.  -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script&gt;;

<script>
var dbid = "https://intuitcorp.quickbase.com/db/bicwj9x9e&quot;;
var qid = "7";
var numMatches = ""

var promise = jQuery.get(dbid,{
  act: "API_DoQueryCount",
  qid: qid
});


jQuery.when(promise).then(function(xml){
  var numMatches = $("numMatches",xml).text();

//  alert(numMatches);

document.write("<p> Number of Matches: " + numMatches + " </p>");

});

</script>
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,074 Points 20k badge 2x thumb
Instead of using document.write() use a jQuery construct such as:

$("#matches).html(numMatches);

and add the markup:

<p> Number of Matches: <span id="matches"></span></p>

to the <body>
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,074 Points 20k badge 2x thumb
Or use Mustache:

<script src="https://quickbase.intuitcdn.net/res/56989-45/js/mustache-0.5.0.js"></script&gt;

and this JavaScript code:

var numMatches = $("numMatches",xml).text();
var data = {numMatches: numMatches};
var template = "<p> Number of Matches: {{numMatches}}</p>";
var markup = Mustache.render(template, data);
$("#matches").html(markup);

I am in a M$ meeting at moment but I just noticed that QuickBase is now using a module loader of some sort. So in your user defined pages you might as use the same *set* of libraries that QuickBase is using.  From QuickBases's own code:

<script>
    var require = {
        baseUrl: "https://quickbase.intuitcdn.net/res/56989-45/js&quot;,
        paths: {
            "highcharts": "https://quickbase.intuitcdn.net/res/56989-45/js/highcharts/highcharts&quot;,
            "highchartsExporting": "https://quickbase.intuitcdn.net/res/56989-45/js/highcharts/modules/exporting&quot;,
            "marionette": "https://quickbase.intuitcdn.net/res/56989-45/js/backbone.marionette-1.0.4.min&quot;,
            "ckeditor": "https://quickbase.intuitcdn.net/res/56989-45/js/ckeditor-dev-4.2.1/ckeditor&quot;,
            "one-color": "https://quickbase.intuitcdn.net/res/56989-45/js/one-color&quot;,
            "mustache": "https://quickbase.intuitcdn.net/res/56989-45/js/mustache-0.5.0&quot;,
            "jqueryFormat": "https://quickbase.intuitcdn.net/res/56989-45/js/jquery.format-1.2/jquery.format.min&quot;
        },
        shim: {
            "highcharts": {
                "exports": "Highcharts"
            },
            "highchartsExporting": ["highcharts"],
            "ckeditor": {
                "exports": "ckeditor"
            }
        }
    };
    

</script>
Photo of David_In_Tucson

David_In_Tucson

  • 216 Points 100 badge 2x thumb
This is a test of concept for my application:  Insert results of several pre-made summary reports on a HTML web page with the result from each summary report displayed in a single cell of a table.

An updated version of the code:

<P> Test to see how to call a report with XML / HTTP.</p>

<table border = 1>
<tr>
<td>Field #1  </td>
<td id="field1"> variable 1 prints here </td>
</tr>
<tr>
<td>Field #2  </td>
<td id="field2"> variable 2 prints here </td>
</tr>
</table>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script&gt;;

<script>

// set up call to first summary report
// https://intuitcorp.quickbase.com/db/bicwj9x9e?act=API_DoQueryCount&qid=7    '  URL for human readable version of the summary report

var dbid1 = "https://intuitcorp.quickbase.com/db/bicwj9x9e&quot;;
var qid1 = "7";
var numMatches1 = ""

var promise1 = jQuery.get(dbid1,{
  act: "API_DoQueryCount",
  qid: qid1
});

// receive the result of the first summary report

jQuery.when(promise1).then(function(xml){
  var numMatches1 = $("numMatches",xml).text();

document.getElementById("field1").innerHTML=numMatches1;
});




// set up call to second summary report
// https://intuitcorp.quickbase.com/db/bgb2xx63f?a=q&qid=13    '  URL for human readable version of the summary report

var dbid2 = "https://intuitcorp.quickbase.com/db/bgb2xx63f&quot;;
var qid2 = "13";
var numMatches2 = ""

var promise2 = jQuery.get(dbid2,{
  act: "API_DoQueryCount",
  qid: qid2
});


// receive the result of the second summary report

jQuery.when(promise2).then(function(xml){
  var numMatches2 = $("numMatches",xml).text();

document.getElementById("field2").innerHTML=numMatches2;
});

</script>


The output looks like this:  

Test to see how to call a report with XML / HTTP.

{visualize this as an HTML table}
Field #1    5
Field #2   35
Photo of David_In_Tucson

David_In_Tucson

  • 216 Points 100 badge 2x thumb
Hello Dan,

The two other output modes you suggest look interesting and I look forward to learning about them.  Thank you.

To populate a table with results of my summary report values the method I pasted above looks like it works just right.

I appreciate your support!

May this thread be useful to others as well.

- David
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,074 Points 20k badge 2x thumb
See this complete example application which has two tables for the Greek and Hebrew alphabets and displays a custom summary table using jQuery, Promises and Mustache:

Alphabets
https://haversineconsulting.quickbase.com/db/bihe3sssq

Test Page With Summary Report Using Promises and Mustache Templating
https://haversineconsulting.quickbase.com/db/bihe3sssq?a=dbpage&pagename=test.html

Pastie Database
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=227
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,074 Points 20k badge 2x thumb
I forgot to permit the application. Fixed