Guided Tour: QBO3 and jQuery

Configuring CORS Headers

Configuring CORS requires custom headers for each call, and results in a great deal of code duplication.
This can be avoided by building a custom wrapper for the jQuery ajax() function.

Here we declare a function called qbo() which holds our CORS headers:

function qbo(url, success, data) {
    $.ajax({
        type: 'POST',
        dataType: 'json',
        url: url,
        data: data,
        crossDomain: false,
        username: "ChangeToYourEmail@company.com",
        password: "ChangeToYourPassword",
        headers: {
            'qboAutomation': true
        },
        xhrFields: {
            withCredentials: true
        }
    }).success(success);
}
The headers above are required for each CORS request made to QBO, and so we isolate them in order that any future changes can be made in one place.

We also pass in a success() function, as different calls to the QBO REST API will need to perform different actions on success.

This function will be used in each of the examples below.

Logging In

Given our HTTP Request module defined above, we can define a simple function for logging in:
function login(){
    var url = "http://demo.quandis.net/Security/Person.ashx/Select?ID=1&Output=Json";
    var success = function (json) {
        console.log(json);
        $('#testing').text("Login Status: true");
    };
    qbo(url, success, null);
}


Editing and Saving a Form

Form data can be retrieved with the following function.
  • We need to pass three parameters to our qbo Http Request function:
    • url: our base URL for the request
    • data: our parameters for the method called in the URL
    • success: our custom success method for this function
function retrieveForm() {
    var url = "http://demo.quandis.net/Decision/ImportForm.ashx/Select?Output=Json";
    var data = {ImportFormID: 41};
    var success = function (json) {
        formData = transformResponse(json);
        populateForm(formData);
    };
    qbo(url, success, data);
}

Form data can be saved with a similar function.
function saveForm() {
    var data = getFormData(formData);
    var url = "http://demo.quandis.net/Decision/ImportForm.ashx/Save?Output=Json";
    var success = function (json) {
        formData = transformResponse(json);
        populateForm(formData);
    };
    qbo(url, success, data);
}

In both of the methods above, there are some helper functions being used.
  • populateForm() is a placeholder for the purposes of this demo. It simply places values retrieved from QBO into form fields:
    function populateForm(data) {
        $('#form').html(JSON.stringify(data, undefined, 2));
        $('#field').val(data.Available);
        $('#testCheck').attr('checked', data.TestCheck);
        $('#testDate').val(data.TestDate);
    }
  • getFormData() is also a placeholder for the purposes of this demo. It simply pulls the values from form fields.
    function getFormData(data) {
        data.Available = $('#field').val();
        data.TestCheck = $('#testCheck').prop('checked');
        return data;
    }
  • transformResponse() is a helper method that normalizes the JSON data received from QBO, so that all data can be used easily. 
    • QBO JSON responses include a XmlData.ImportFormXml array.
    • transformResponse() moves items in XmlData.ImportFormXml to the root of the JSON object
    • transformResponse() also performs some type conversion, converting String of value "true" and "false" to Boolean values
function transformResponse(data) {
    $.each(data.XmlData.ImportFormXml, function (index, value) {
        if (value === "true") {
            value = true
        };
        if (value === "false") {
            value = false
        };
        data[index] = value;
        console.log(value);
    });
    delete data.XmlData;
    return data;
}


Matrix Lookups

Comments