Sterling Managed File Transfer

Sterling Managed File Transfer

Come for answers, stay for best practices. All we're missing is you.


#Sterling
 View Only

Working with B2B APIs using a Custom, Graphical Front End

By Tanvi Kakodkar posted Wed February 05, 2020 10:40 AM

  
Originally updated on April 26, 2016 by MelindaRose


Introduction

APIs are a powerful tool for exposing key functionality of a product for use in external applications. But testing input and output in a REST client can be a less engaging experience than interacting with a UI - and getting immediate feedback. Clients have told us that the APIs should plug nicely into an Angular-based UI that uses a multipart/form content type.

To address this request, we used some popular libraries, like AngularJS and Dropzone (which use multipart/form-data), to replicate both the type and formatting of the custom tools our clients are using. The tree structure in the UI was created using the library Treeview. Other UI changes rely on Bootstrap. We kept the UI relatively simple. However, custom CSS can be added as needed.

 

Sample UI

The landing page of the UI presents a simple, two-column layout showing the file upload panel on the left and the directory structure of the mailboxes on the right. The user can click on a folder to select it as the destination for the upload.

 

A screenshot of the landing page's UI

 

When a user drops a file onto the panel, or clicks the panel to browse for a file and select it, the upload process begins. The payload of the request is shown below.


When the upload is complete, the UI updates to reflect this, and a response comes back from the server with the new, remote location for the files.

 

Sample Code

index.html:

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script type="text/javascript" src="treeview/angular.treeview.js"></script>
        <script type="text/javascript" src="app.js"></script>
        <script type="text/javascript" src="dropzone/dist/dropzone.js"></script>
        <link rel="stylesheet" type="text/css" href="dropzone/dist/dropzone.css"/>
        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"/>
        <link rel="stylesheet" type="text/css" href="treeview/css/angular.treeview.css"/>    
    </head>
    <body>
    <script>
        Dropzone.autoDiscover=false;
    </script>
        <div ng-app="mailboxBrowser" class="col-md-12">
            
            <div ng-controller="treeCtrl">
                <div class="col-md-5">
                    <form action=""
                          class="dropzone uploadpanel"
                          id="upload-panel"
                          enctype="multipart/form-data">
                          Destination: <input ng-model="remotedata.currentNode.path" readonly

                                        type="text" name="mailboxName"/>

                          <p style="color:red;" ng-show="remotedata.currentNode.type=='message'">

                              Error! The selected node is a message, so it's not a valid

                              destination for file transfer. Please select a valid mailbox.

                          </p>
                      </form>
                  </div>
                <div class="col-md-5"
                    data-angular-treeview="true"
                    data-tree-id="remotedata"
                    data-tree-model="treedata"
                    data-node-id="id"
                    data-node-label="label"
                    data-node-children="children"
                    data-type="type"
                    data-path="path"
                >
                </div>
            </div>
            
        </div>
    </body>
</html>

 

app.js:

var app = angular.module('mailboxBrowser', ['angularTreeview']);

// --- connection variables ---

var host = '<your_host_here>';
var port = '<your_port_here>';

// ----------------------------


// this controller kicks off the chain of 'GET' API calls to get the data from the server
app.controller('treeCtrl', function($scope, $http) {

    var waitCount = 1;
    var mailboxId = '1';
    $http.defaults.useXDomain = true;
    $scope.nodeValidityMessage = "abc";

    $scope.treedata = [{ // initialize the first node with the root mailbox
        'label' : '/',
        'id' : '1',
        'children' : [],
        'type': 'mailbox',
        'path' : '/'
    }];

    $scope.evaluateType = function() {
        console.log('entered');
        if ($scope.currentNode.type === 'mailbox') {
            $scope.nodeValidityMessage = '';
        } else {
            $scope.nodeValidityMessage = 'The selected node is not a valid destination, ' +

                                             'since it's a file.";
        }
    }

    getContents($http, $scope.treedata[0]);
    initializeDropzone();

});

// lists the contents of a node
function getContents(http, node) {

    var parentMailboxId = node.id.toString();

    http({
        url: 'http://' + host + ':' + port + '/mailbox/svc/mailboxcontents/?parentMailboxId='                                  + 
parentMailboxId,

        method: 'GET',
        headers: {
            'Accept':'application/json',
            'Content-Type':'application/json',
            'Authorization':'Basic YWRtaW46cGFzc3dvcmQ='
        }
    }).success(function(data, status, headers, config) {
        node.children = new Array(data.length); // create empty slots for the children        
        for (var i=0; i < data.length; i++) {
            var item = data[i];
            node.children[i] = new Node(item);
            if (item.type === 'mailbox'){
                getContents(http, node.children[i]);
            }
            if (node.label === '/') {

                // the root level already has a slash, so there's no need to add it
                node.children[i].path = node.path + node.children[i].label; 
            } else {

                // prepend a slash to this node's label
                node.children[i].path = node.path + '/' + node.children[i].label; 
            }
        }
    }).error(function(data, status, headers, config) {
        console.log('error retrieving messages for mailbox with id ' + parentMailboxId);
    });
}

// creates a new node from a back-end item
var Node = function(item) {
    this.label = item.name;
    this.id = item.id.toString();
    this.type = item.type;
    this.children = [];
}

// sets the parameters needed to perform file upload
var initializeDropzone = function() {
    var myDropzone = new Dropzone(".uploadpanel", {

        // "batchs" is misspelled on purpose due to framework limitations - do not correct
        url: 'http://' + host + ':' + port + '/mailbox/svc/messagebatchs/', 
        method: 'POST',
        headers: {
            'Authorization':'Basic YWRtaW46cGFzc3dvcmQ=',
            'Cache-Control': ''
        },
        uploadMultiple: true,
        parallelUploads: 1000
    });
}

 

 


#IBMSterlingB2BIntegratorandIBMSterlingFileGatewayDevelopers
#DataExchange
0 comments
28 views

Permalink