Hooking into the Quandis REST API with AngularJS

HTML

Below we have a form nested within a <div> element. 

The parent <div> is bound to a controller called TaskController, aliased as "task".

We utilize the ng-submit directive on the form to call task.save() on submit.

Each of the form elements models a form data parameter in our TaskController.

<div ng-controller="TaskController as task">
    <form ng-submit="task.save()">
        <div>
            <div>Available:<input type="text" ng-model="task.formData.Available" required /></div>
            <div>BreachLetterDueDate:<input type="date" ng-model="task.formData.BreachLetterDueDate" /></div>
            <div>BreachLetterExpiration:<input type="date" ng-model="task.formData.BreachLetterExpiration" /></div>
            <div>TestCheck<input type="checkbox" ng-model="task.formData.TestCheck"/></div>
            <button>Save</button>
        </div>
    </form>
</div>

Javascript

The controller below is responsible for the loading and saving of forms.

We inject the $http service into this controller in order to use the Quandis REST API.
For the purposes of this demo, the controller loads previously saved data into the form on initialization.

If the .success method of the $http service is fired, we first transform the response data so that all form information is within the root of the JSON object.
Because the form data has already been bound to task.formData via ng-model in the HTML, the appropriate values are now modeled on the page.

Two things to note:
  • When the form is initialized, we append Select?Output=Json to task.url
    • Select allows us to search for a specific form based on the form ID
  • When the form is saved, we append Save?Output=Json to task.url
    • Save directs the server to write changes to the form, and return the updated data in Json format
    • For more information on Save, please see the AbstractObject section titled 'Saving Data'

angular.module('app').controller('TaskController', function ($http) {
    var task = this;
    task.url = "http://localhost/Decision/ImportForm.ashx/";

    //initialization of form

    $http({
        method: 'POST',
        url: task.url+"Select?Output=Json",
        params: { ID: 213715 },
        responseType:'json'
    })
    .success(function (data) {
        task.formData = task.transformResponse(data);
    });
    

    //saving the form

    task.save = function () {
        $http({
            method: 'POST',
            url: task.url + "Save?Output=Json",
            params: task.formData,
            responseType:'json'
        })
        .success(function (data) {
            task.formData = task.transformResponse(data);
        })
    };

   //utility method

    task.transformResponse = function (data) {
        angular.forEach(data.XmlData.ImportFormXml, function (value, key) {
            data[key] = value;
        });
        delete data.XmlData;
        return data;
    };
});

Comments