Populate a grid with my own data
The way we populate grids with real-time information is by using data providers. Data providers come in a few different forms, not least the ones that are built in to Caplin Platform. This tutorial will explain how to use a webservice that supplies data in a specified format, and its corresponding webservice dataprovider, which is a simple alias reference which maps to the data provider’s class name. The referenced webservice dataprovider only needs to be informed about the webservice from which it will retrieve its data.
Web Service Data Provider Configuration
First, you’ll need to configure your XML grid definition to use the WebServiceGridDataProvider, and provide the URL from which it will request the data. This is done inside the <gridRowModel> element, where the alias of the data provider is used as an XML element, with the url attribute specifying the URL:
<grid id="webServiceExampleGrid"
displayName="MyWebserviceGrid"
baseTemplate="novox.fxtrader.grid.fxGrid">
<columnDefinitions>
<column id="description" fields="InstrumentDescription" ... />
<column id="bestbid" fields="BestBid" ... />
<column id="bestask" fields="BestAsk" ... />
</columnDefinitions>
<gridRowModel>
<caplin.webService-grid-data-provider url="/historicalSnapshotJson.jsp"/>
</gridRowModel>
</grid>Data Format
The webservice data provider will expect the data to be provided in JavaScript Object Notation (JSON) format. It will have a "dataset" field, which contains two additional fields, the first of which (slightly annoyingly, for the purposes of this sentence) is called "fields". This contains a comma separated list of names corresponding to the fields attributes of the <column> tags in the grid. The other field is called "data", which contains a list of data, with one element per row, as shown in the following example. Each element contains the data for one row of the grid.
{
"dataSet": [{
"fields" : ["InstrumentDescription","BestBid","BestAsk"],
"data" : [
["EURUSD","bid1","ask1"],
["GBPUSD","bid2","ask2"],
["GBPEUR","bid3","ask3"],
["EURCHF","bid4","ask4"],
["EURNOK","bid5","ask5"],
]
}]
}If you were to use the example above, and feed it into a grid, then give or take a bit of CSS to make it look pretty, you would end up with a grid like this:
