CQRS With Axon Tutorial: Part 7 – Display Data in the Grid

In this part, we are going to implement and Grid and populate the grid with data. We would consider the following sub-headings

  1. How we would Achieved This
  2. Creating the Grid
  3. Refresh Grid After Changes
  4. Add Grid to Layout
  5. Next Steps


1. How we would Achieve This

We would first create method that returns a grid. Inside this method, we would create a new grid.Then add three columns to the grid. Finally, we set the grid’s data provider property to our data provider.

After this, we would go to the init method and create a vertical layout. In this vertical layout, we first add the original command bar(with Command and Issue Panel). The we also add the grid we created.


2. Creating the Grid

Follow the steps below:

Step 1: Create a method named summaryGrid that returns a Grid<CardSummary>

Step 2: Inside this method, create a new Grid<CardSummary> grid.

Step 3: Add three columns to the grid. The column captions are: Id, Initial Balance and Remaining Balance. The syntax for adding  columns is given below



Step 4: Set the dataProvider property of the grid to the dataProvider

Step 5: Return the grid

The complete code for the summaryGrid method is given below:

public Grid<CardSummary> summaryGrid(){
    Grid<CardSummary> grid = new Grid<CardSummary>();
    grid.addColumn(CardSummary::getInitialBalance).setCaption("Initial Balance");
    grid.addColumn(CardSummary::getRemainingBalance).setCaption("Remaining Balance");

    return grid;


3. Refresh Grid After Changes

Anytime a change is made, whether a GiftCard is issued or redeemed, we need to refresh the grid view. One way to do that is to add a closeListener to the Notification message. So anytime the notification message closes, the grid refreshed

To achieve that, follow the steps below:
Step 1: Append the code below to the end of the Notification.show() message

.addCloseListener(x -> dataProvider.refreshAll());


Step 2: Do the same for the second Notification.show() message.


4. Add the Grid to the Layout

Take the steps below to add the grid to the  layout.

Step 1: In the init() method, just before the setContent() line, create a new vertical layout

Step 2: Set the size to Full

Step 3: Add commands and summaryGrid to the layout using layout.setContent() and passing two arguments

Remember commands is a horizontal layout that contains the two panels while summaryGrid is the grid.

The complete init method is given below:

protected void init(VaadinRequest vaadinRequest) {
    HorizontalLayout commands = new HorizontalLayout();
    commands.addComponents(issuePanel(), redeemPanel());

    VerticalLayout layout = new VerticalLayout();
    layout.addComponents(commands, summaryGrid());


    //Error Handler
    setErrorHandler(new DefaultErrorHandler(){
        public void error(com.vaadin.server.ErrorEvent event) {
            Throwable cause = event.getThrowable();
            while (cause.getCause() != null) cause = cause.getCause();
            Notification.show(cause.getMessage(), Notification.Type.ERROR_MESSAGE)
            .addCloseListener(x -> dataProvider.refreshAll());


Step 4: Run the application and test it by issuing and redeeming some cards. Then check that the history appears in the grid below. The output is shown below:

GiftCard GUI final Output

GiftCard GUI final Output


5. Next Steps

Now we have out application running on our local machine. Of course, it’s still a monolithic application.

So next we would split this application into microservices using spring profiles

Then we use AxonHub to connect the various microservices. Finally, we deploy to kubernetes cluster in Google cloud. So we have more interesting things to to. However if you have gotten to this point successfully, big thumbs up to you!