Author: Naveen Suryawanshi(naveen.suryawanshi@in.ibm.com)
Introduction
Testing input and output of Message Batch APIs by interacting with a UI and getting immediate feedback can be a better and more engaging experience than testing in a REST client. Out clients have told us that the APIs should plug nicely into the UI .
To address this request, to download file using Message Batch APIs via a graphical user interface, we used some JavaScript libraries, JQuery, and Ajax call for fetching the APIs. We have kept the UI relatively simple. However, custom CSS can be added as needed.
Sample UI
The landing page of the UI presents a simple layout showing the file download panel to download payload/get payload of file from the mailbox.
Descriptor box is mandatory to get the payload of a file because it points to a specific Message/File ID, which is located in the Mailbox folder.
After entering the descriptor, user must click the Show Files button to select the destination of the file.
When the user clicks the Show Files button, a mailbox location as per the descriptor value will be available and the file will be available for download. Payload of data will start downloading when the user clicks the file link.
Sample payload data after the file is downloaded is given below:
Sample Code
File: download_service.html
|
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript" src="downloadServiceApp.js"></script>
<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>
<div class="col-md-12">
<div class="col-md-5">
<br> <b>Download Payload/Get Payload</b><br>
<br> Descriptor* <input type="text" name="txt1" id="txt1" />(Example: 8_6_9)<br>
<br>
<input type="button" name="sub" id="sub" value="Show Files" onclick="dowloadFile()"/>
<span id="mailboxpath"></span>
<ul id="downloadFile" ></ul>
</div>
</div>
</body>
</html>
|
File: downloadServiceApp.js
|
function dowloadFile(){
$("#sub").click(function() {
var txt = $("#txt1").val();
var apiURL="http://9.55.61.115:52639";
$.ajax({
dataType: 'json',
method:'Get',
url: apiURL+"/B2BAPIs/svc/messagebatchs/"+txt,
headers: {
'Accept':'application/json',
'Content-Type':'application/json',
'Authorization':'Basic YWRtaW46cGFzc3dvcmQ='
},
success: function(data) {
var list="", mailboxpath="";
if(data!=undefined && data!="" && data!=null){
$.each(data.messages,function(i,item){
var itemUrl= item.$ref;
var documentID=item.documentId;
var number = itemUrl.split("/");
var fileNumber = number[number.length - 1];
var finalUrl=apiURL+"/B2BAPIs/svc/documents/"+documentID+"/actions/getpayload";
var name=item.name;
var mailboxpath= item.mailboxPath;
list+='<li><a href="'+finalUrl+'" download>'+name+'</a></li>';
$("#downloadFile").html(list);
$("#mailboxpath").html(mailboxpath);
});
}
}
});
});
}
|
Instructions to Run the Code
Users must perform the following steps to run the code:
Step 1. Update the value of the variable apiURL to the API Location specified in downloadServiceApp.js
Step 2. Run download_service.html using any browser.
Step 3. Provide a valid Descriptor value that matches the message ID.