Introduction

This is a step-by-step tutorial to implement a simple linkki application with Spring Boot.

The goal of this tutorial is to create a simple web application that manages information about business partners. A business partner in this context is a person interacting in some way with a company.

After finishing the tutorial, your application will be able to search for, update and add partners in a repository. In addition, the application can display and edit detail and address information about a business partner.

The application

The sample application opens with a main view that allows searching for business partners. The user can type in search text and find matching partners by clicking the search button. The partners found by the search will be listed in a "Search Results" table. Each row shows the name of a partner, their first address, and a button labeled "Show Details".

mainview
Figure 1. Main view with search result table

Clicking on "Show Details" opens that partners' detail view, presenting detail information about them.

detail
Figure 2. Partner detail view

On the left border, a sidebar allows switching between different information categories.

The first page (in linkki these are called sidebar sheets) shown above displays the "Partner Details" section, containing general information such as name and date of birth. A pencil button next to the section’s headline allows the user to edit this data in a modal dialog.

detaildialog
Figure 3. Editing partner details

The second sidebar sheet lists the partner’s addresses in a table. Users can add new addresses by using the plus button in the table header, as well as delete them by using the trash can button displayed in their respective rows.

address
Figure 4. Detail view with address sheet selected

The application’s menu bar allows the user to navigate from the partner detail view back to the search view using a button labeled "Start". Another button allows creating a new business partner, reusing the modal dialog to capture the basic data of the new partner.

createpartnerdialog
Figure 5. Creating a new partner