Highlighting The Selected Area With Thymeleaf

Now that I have pulled the side navigation menu out in to its own reusable code fragment I can now make a small adjustment to it to highlight the currently selected option in the navigator. In the Domino/XPage world this would be the script that you write to add a css class to a menu item using the selected property.

For the bootstrap based side navigator that I am using in this application you can add a background color to the side navigator by adding a css class of ‘active’ to the list item tag. Currently our side navigator fragment looks as follows.

The list item tags for both the home link and the location links do not have any class associated with them at this stage.

Using Thymeleaf you can use a conditional expression to set the class. A conditional expression if pretty much like a simple If/Then/Else statement like th:class=”${row.even}? ‘even’ : ‘odd'”, You can also use nest conditional expressions using parenthesis like th:class=”${row.even}? (${row.first}? ‘first’ : ‘even’) : ‘odd'”. You can also leave out the else part if you want which is what I have done in my code.

To get this working correctly I had to add a new attribute to the model in both my home controller and my location controller called selectedLocation. It is manually set to ‘Home’ in the home controller and it is programmatically set to the location name in the location controller.

Now my phonebook correctly shows the currently selected area as highlighted in the side navigator.