# 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,opts="nofollow"](https://docs.caplin.com/developer/api/caplin_trader/3/caplin.grid.webservicegriddataprovider)`, and provide the URL from which it will request the data. This is done inside the `[<gridRowModel>](https://docs.caplin.com/developer/xml/grid/latest/gridRowModel.html)` element, where the `alias` of the data provider is used as an XML element, with the `url` attribute specifying the URL:

```xml
<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>](https://docs.caplin.com/developer/xml/grid/latest/column.html)` 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:

![grids_webservice_example](../../../images/grids_webservice_example.png)