Here is a solution to render the response of an Infor M3 API request into the Dojo DataGrid. This post is a continuation of my previous posts, How to call M3 API using the Dojo Toolkit, how to call M3 API with jQuery DataTables, and How to call an M3 Web Service using jQuery. Also, this is a solution for IBrix no longer supported.
<html>
<head>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css">
<style type="text/css">
@import "//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojox/grid/resources/claroGrid.css";
#gridDiv {
width: 1000px;
height: 35em;
}
</style>
<script>dojoConfig = {parseOnLoad: true}</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js"></script>
<script>
require(['dojo/_base/lang', 'dojox/grid/DataGrid', 'dojo/data/ItemFileWriteStore', 'dojo/dom', 'dojo/domReady!', 'dojo/request/xhr'],
function (lang, DataGrid, ItemFileWriteStore, Button, dom, xhr) {
// make the M3 API request with dojo/request/xhr
xhr('/m3api-rest/execute/CRS610MI/LstByNumber', {
method: 'GET',
withCredentials: true,
user: 'Tschneider',
password: '********',
headers: {'Accept': 'application/json'},
handleAs: 'json',
}).then(render);
// render the M3 API response with Dojo DataGrid
function render(response) {
// set up data store
var data = {
identifier: "id",
items: []
};
var data_list = [];
// loop thru the MIResponse
for (var i in response.MIRecord) {
// transform each MIRecord to an associative array accessible by key
var record = {};
response.MIRecord[i].NameValue.map(function (o) {
record[o.Name] = o.Value;
});
// move each record to the data_list of the DataGrid
data_list[i] = {
col1: record['CONO'],
col2: record['CUNO'],
col3: record['CUNM'],
col4: record['TOWN'],
col5: record['PHNO'],
};
}
for (var i = 0, l = data_list.length; i < data_list.length; i++) {
data.items.push(lang.mixin({id: i + 1}, data_list[i % l]));
}
var store = new ItemFileWriteStore({data: data});
// setup the DataGrid layout
var layout = [[
{'name': 'Company', 'field': 'col1', 'width': '75px'},
{'name': 'Customer', 'field': 'col2', 'width': '150px'},
{'name': 'Name', 'field': 'col3', 'width': '350px'},
{'name': 'City', 'field': 'col4', 'width': '150px'},
{'name': 'Telephone', 'field': 'col5', 'width': '150px'}
]];
// create a new grid
var grid = new DataGrid({
id: 'grid',
store: store,
structure: layout,
rowSelector: '20px'
});
// append the new grid to the div
grid.placeAt("gridDiv");
// call startup() to render the grid
grid.startup();
}
});
</script>
</head>
<body class="claro">
<h1>Customers - CRS610</h1>
<div id="gridDiv"></div>
</body>
</html>
Here is a screenshot of the result:
Note 1: The DataGrid will automatically provide client-side sorting and pagination, which in the case of M3 API is not suitable because we receive 100 records by default. So we have to implement our own server-side sorting and pagination, as well as handle positioning.
Note 2: I don’t like the solution too much as the data is copied seemingly four times in memory: in the response, in the data_grid, in the data, and in the store. There is most probably a solution to improve this memory footprint. I haven’t investigated yet.
Related articles
- How to call M3 API using the Dojo Toolkit
- How to call an M3 Web Service using jQuery
- M3 API with jQuery DataTables
- How to call M3 API from JavaScript
- How to call M3 API with REST & JSON
- How to call M3 API from .NET
- How to call Lawson Web Services from PHP
- How to consume a Lawson Web Service from a Personalized Script in Smart Office
M3 ideas 