# Adding a grid to a Webcentric layout

When you have defined a grid, you can use _[Webcentric](../webcentric/index.md)_ to add it into a layout.

## Defining a grid

All grids must be defined in a file named _gridDefinitions.xml_. This file should be created and placed inside your application here: <bladeset>\<blade>\resources\xml\gridDefinitions.xml.

Each grid is identified by the `id` attribute in its `[<grid>](https://docs.caplin.com/developer/xml/grid/latest/grid.html)` tag. The namespace of a grid `id` must conform to the application directory in use, for e.g. _&lt;top-level-namespace>.&lt;bladeset>.&lt;blade>.GridName,_ where **top-level-namespace** is representative of the application name, and **GridName** is the name of a defined grid.

The [Grid XML configuration reference](https://docs.caplin.com/developer/xml/grid/latest/) page provides further information on defining grids and grid elements.

### Preparation

Let’s start on the basis that we already have an existing Webcentric layout with three panels displayed side-by-side in a `[<Terrace>](https://docs.caplin.com/developer/xml/webcentric/latest/Terrace.html)` element, and that the terrace itself is displayed above another panel, as part of a `[<Tower>](https://docs.caplin.com/developer/xml/webcentric/latest/Tower.html)`, as shown here:

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

The layout is illustrated conceptually below:

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

What we are going to do is add a new panel to the terrace, so that we will end up with four panels side-by-side, with our new one on the right.

### Adding a grid into a layout

To start with, we are going to insert a new **Webcentric Panel** into our current layout to contain our grid by including a panel with our grid component. Layouts are defined inside the _&lt;appname>_layout.xml_ file inside \_webcentric\layout\layouts_. Note, we will also be using a <q>``basicDecorator``</q> for this implementation, see [here](grid-available-decorators.md) for more information on available decorators and their uses.

For the purpose of this example, let’s assume that we have an "FX Minors" grid defined in our _gridDefinitions.xml_ file, with an `id` of "novox.fxtrader.grid.fxMinor". So the first thing we do, is to create a new panel for it:

```xml
<caplin:Panel caption="Fx Minors" decorators="basicDecorator">
  <state>
    <caplin.grid-component baseGrid="novox.fxtrader.grid.fxMinor" />
  </state>
</caplin:Panel>
```

You can change the grid `id` namespace within this configuration to any `id` of a defined grid you want to use, so long as the namespace of the `id` matches the format: **&lt;top-level-namespace>.&lt;bladeset>.&lt;blade>.GridName**

e.g. "caplinx.fxtrader.grid.blotterGrid"

Now, we will include the panel inside a terrace:

```xml
<Tower splitters="true">
  <FrameItems>

  <!-- The Terrace is nested in the Tower element, with its own panels inside it --> 

    <Terrace splitters="true">
      <FrameItems>
        <caplin:Panel caption="Trade Tiles" decorators="basicDecorator">
          <state>
            <compositeComponent refId="emptyTileLayout"/>
          </state>
        </caplin:Panel>
        <caplin:Panel caption="Fx Majors" decorators="basicDecorator">
          <state>
            <caplin.grid-component baseGrid="novox.fxtrader.grid.fxMajor"/>
          </state>
        </caplin:Panel>
        <caplin:Panel caption="Watch List" decorators="basicDecorator">  
          <state>
            <caplin.grid-component baseGrid="novox.fxtrader.grid.fxWatchlist" />
          </state>
        </caplin:Panel>

    <!-- We insert our new panel with Fx Minors grid inside our terrace element -->

        <caplin:Panel caption="Fx Minors" decorators="basicDecorator">
          <state>
            <caplin.grid-component baseGrid="novox.fxtrader.grid.fxMinor"/>
          </state>
        </caplin:Panel>

      </FrameItems>
    </Terrace>

    <caplin:Panel caption="Blotter" decorators="basicDecorator" height="200">  
      <state>
        <caplin.grid-component baseGrid="novox.fxtrader.blotter.blotterGrid" />
      </state>
    </caplin:Panel>

    </FrameItems>
</Tower>
```

Our new panel will be added to the layout, like so:

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

## Resetting Webcentric Database

The new layout is ready to go now, but it won’t be displayed until Webcentric’s database has been reset, so that’s the next thing we have to do. To do this, open a command line window, and run: `brjs reset-db <appname>`

This will automatically recreate all the required database files.

### Start Application

Finally, we will restart _BladeRunnerJS_. As _BladeRunnerJS_ doesn’t run in the background, what this actually means is that you go to the command line window that you used to start _BladeRunnerJS_, kill the process, and then start it up again. If we then restart our application, we’ll see our panel containing our new grid inside the terrace:

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