Clean up the UI

At this point the application successfully loads and display the data from the Relativity Server, but as you can see below the resulting table contains fields that really shouldn't be displayed to the user like the task's ID and the User ID.

The app showing the raw data retrieved from the server

There are a couple of different approaches you could take to handle this. We could selectively retrieve the data from the user using Data Abstract's TableRequestInfoV5 / TableRequestInfoV6 classes, or we could manipulate the JTable itself.

The approach we take here is to manipulate the JTable. We copy the table columns we are interested in, then remove all the columns from the table's column model, and then we add back the columns we want in the order that we want them.

Note in doing this we are NOT deleting any data, the rows and all their columns are still in the table model. This simply changes how the data is presented in the JTable.

Getting the columns

All the changes we need to make are in TodoApp.java, open it if it isn't already open.

To get TableColumn object for each of the columns we are interested in we need to call JTable's getColumn method. To it we pass as an argument the caption name of the column we want.

Note if you change the caption name for a column then you need to change the argument you pass to getColumn. If you don't then the exception java.lang.IllegalArgumentException will be raised indicating that the Identifier not found.

Here we only want the columns representing the DueDate of the task, its completion status Done, the name of the Task, but not its description, and finally the tasks Priority level.

private void tweakTable() {
  // get the columns we are interested in
  TableColumn dueDateColumn = this.table.getColumn("DueDate");
  TableColumn statusColumn = this.table.getColumn("Done");
  TableColumn taskColumn = this.table.getColumn("Task");
  TableColumn priorityLevelColumn = this.table.getColumn("Priority");
}

Deleting the columns

Deleting the existing columns from the TableColumnModel is very simple. We call getColumnCount and if there are more than 0 columns we retrieve the column at position 0 and pass it to removeColumn.

private void tweakTable() {
  //snipped code

  // delete all the columns from the table 
  TableColumnModel tableColumnModel = this.table.getColumnModel();
  
  while (tableColumnModel.getColumnCount() > 0) {
        tableColumnModel.removeColumn(tableColumnModel.getColumn(0));
    }
}

Adding columns back

Finally we add the column objects we stored earlier by simply calling addColumn on the TableColumnModel.

private void tweakTable() {
  // snipped code
  
  // add back the columns we are interested in
  tableColumnModel.addColumn(statusColumn);
  tableColumnModel.addColumn(dueDateColumn);
  tableColumnModel.addColumn(priorityLevelColumn);
  tableColumnModel.addColumn(taskColumn);
}

Calling tweakTable

To use our new method, add a call at the end of the btnLoadData action listener.

this.btnLoadData.addActionListener(actionEvent -> 
{
  //snipped code

  this.dataModule.loadData();
  tweakTable();
});

Now when you run the app again you will see that we are only displaying the columns we want and also that they have been rearranged.

The app showing the only the important columns

We could improve the column headers further by, for instance, centering the header text and locking the width of the columns. However this is left as a task for the reader.

In the next two pages we will continue to refine the UI by tweaking the Done column and Priority columns to show something more user friendly.