Guided Tour: QBO3 and EmberJS

Configuring CORS Headers

function qbo(url, success, data) {
    return $.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);
}

Logging In

A complete example for logging in can be found here: QBO Login with EmberJS
function login() {
    var result = null;
    var url = "http://demo.quandis.net/Security/Person.ashx/Select?ID=1&Output=Json";
    var success = function (json) {
        console.log(json);
        return json;
    };
    return qbo(url, success, null);
}

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return login();
  }
});

<body>
  <script type="text/x-handlebars">
    <h2>Welcome to Ember.js</h2>
    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="index">
    <ul>
    <li>
     First Name: {{model.FirstName}}
     </li>
     <li>
     Last Name: {{model.LastName}}
     </li>
     <li>
     Email: {{model.Person}}
     </li>
    </ul>
  </script>
</body>

Performing a Matrix Lookup

A complete example for Matrix Lookup can be found here: QBO Matrix Lookup with EmberJS
App.Router.map(function() {
  this.route('matrix');
});

App.MatrixRoute = Ember.Route.extend({
  model: function(){
    return matrixLookup();
  }
});

function matrixLookup() {
    var url = "http://demo.quandis.net/Application/Matrix.ashx/Lookup?Output=Json";
    var data = {
        Client: "Acme Tools",
        MatrixID: 7,
        Measure: "Amount"
    };
    var success = function(json){
        console.log(json);
        return json;
    };
    return qbo(url, success, data);
}

<body>

  <script type="text/x-handlebars">
    <h2>Welcome to Ember.js</h2>
    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="index">
    <ul>
     {{model.Person}}
    </ul>
    {{#link-to 'matrix' tagName='button'}}
      Get Matrix
    {{/link-to}}
  </script>

  <script type="text/x-handlebars" data-template-name="matrix">
  Test Matrix:
  {{model}}
  </script>

</body>

Comments