Go back to the main page

Connect to QuickBooks Angular directive

This article is over 2 years old. Proceed with caution.

Regards ♨ – Minimul

 

 


Simple Connect button rendering

I was attempting to answer this SO question which referenced this angular directive for rendering a "Connect to QuickBooks" button. I fired up the gulp-angular generator but couldn't get that directive to work and in the process was was able to come up with a simpler approach.

  1. Install the gulp-angular Yeoman generator, make a new dir, and run the generator.
  2.   $ npm install -g generator-gulp-angular
      $ cd ~/github/labs
      $ mkdir connect-intuit-angular && cd $_
      $ yo gulp-angular
      
  3. Install no additional items when prompted by the Yeoman wizard.
  4. Barebones setup
  5. Oops. The bower install failed.
  6. Bower install crashes with EMALFORMED in bower.json
    Take out the comma to fix.
  7. Re-run bower install.
  8. Test the generator doing a gulp serve.
  9. Ok, the generator scaffolding is working.
  10. Let's clean up some of the scaffolding stuff. Remove the awesomeThings array in src/app/main/main.controller.js
  11. Remove awesomeThings array in controller.
  12. Then remove the corresponding ng-repeat in src/index.html.
  13. Clean up the view as well.
  14. Make a new file src/app/main/directives.js and add the following.
  15. /* src/app/main/directives.js */
    angular.module('connectIntuitAngular')
    .directive('connectToQuickbooks', function($window){
      return {
        restrict: 'E',    template: "<ipp:connectToIntuit></ipp:connectToIntuit>",
        link: function(scope) {
            var script = $window.document.createElement("script");
            script.type = "text/javascript";
            script.src = "//js.appcenter.intuit.com/Content/IA/intuit.ipp.anywhere.js";
            script.onload = function () {
               scope.$emit('intuitjs:loaded');
            };
            $window.document.body.appendChild(script);
            scope.$on('intuitjs:loaded', function (evt) {
              $window.intuit.ipp.anywhere.setup({ grantUrl: '/' });
              scope.connected = true;
              scope.$apply();
            });
        }
      }
    });
    
  16. Then in src/index.html do:
  17. <!-- index.html -->
    <div class="jumbotron" ng-init="connected = false">
      <div class="control-group">
        <div class="controls" ng-show="!connected">
          Loading QuickBooks Connect button
        </div>
        <div class="controls" ng-show="connected">
          <connect-to-quickbooks />
        </div>
    
      </div>
    </div>
    
  18. Let's check it out.
  19. Connect to QuickBooks button is ready to go.

Handling external Javascript

There a few other ways to handle external Javascript dependencies in Angular but I like using the onload attribute in combination with Angular events as it is simple and easy to follow. In this refactoring I was able to save quite a few lines of code while improving read-ability.

Comment on this article?

Get Ruby flavored QuickBooks related articles delivered to your Mailbox.

Your email is safe with me and you can unsubscribe at any time.

 

Do you have an idea for a QuickBooks integrated app? Wanna put it on the Intuit App Store, which receives hundreds of thousands of daily visitors? I can get your idea on the App store for a fixed price that I will stand behind and not go over budget by a single penny.