Tutorial

Step 2: Displaying the search result in a table

This step teaches you how to implement a table using SimpleTablePmo. Additionally, you will be introduced to the UI elements UILabel and UILink.

To display the search results, matching business partners should be shown in a table below the search bar. The user should only be able to gather brief information about the business partner for now.

search result table
Figure 1. Search result table

To build a table in linkki, you need two PMO classes:

  • A row PMO that defines the structure of one row of the table.

  • A ContainerPmo that builds the table out of the rows.

Implementing the Row PMO

Create a new class SearchResultRowPmo as the row PMO of the table.

Unlike a ContainerPmo, a row PMO is not a section and therefore doesn’t need the @UISection annotation.

Every row consists of three elements:

  • a UILabel that displays the name of a given partner

  • a UILabel that displays the first address of a given partner

  • a UILink that will lead you to another view, which you can implement in the next step.

To implement the SearchResultRowPmo, do the following:

  1. Create a constructor with the signature SearchResultRowPmo(BusinessPartner partner) which assigns the argument to a field partner.

  2. Create and implement the getter method for the property name.

  3. Annotate the getter method with @UILabel. The label attribute will be the column name. It should be set to "Name".

  4. Create and implement the getter method for the property firstAddress.

  5. Annotate this getter method with @UILabel as well. The label should be set to "First Address".

  6. Create the getter method for the property details. This method should return a URL as a String, but let it return an empty String for now.

  7. Annotate the method with @UILink. The attribute caption should be set to "Show Details".

The finished implementation should look like this:

SearchResultRowPmo.java
@UILabel(position = 10, label = "Name")
public String getName() {
    return partner.getName();
}

@UILabel(position = 20, label = "First Address")
public String getFirstAddress() {
    return partner.getFirstAddress();
}

@UILink(position = 30, caption = "Show Details")
public String getDetails() {
    return "";
}

Implementing the Container PMO

Create a new class SearchResultTablePmo, which will be the ContainerPmo of the table and implement it as follows:

  1. Use SimpleTablePmo<BusinessPartner, SearchResultRowPmo> as super class.

  2. Annotate the class with @UISection and set the attribute caption to "Search Results". This is the caption of the section that contains the table.

  3. Implement the constructor with the signature SearchResultTablePmo(Supplier<List<? extends BusinessPartner>> modelObjectsSupplier) by passing the argument to the super class.

  4. Implement the method createRow which returns a new instance of SearchResultRowPmo.

The finished implementation should look like this:

SearchResultTablePmo.java
@UISection(caption = "Search Results")
public class SearchResultTablePmo extends SimpleTablePmo<BusinessPartner, SearchResultRowPmo> {

    public SearchResultTablePmo(Supplier<List<? extends BusinessPartner>> modelObjectsSupplier) {
        super(modelObjectsSupplier);
    }

    @Override
    protected SearchResultRowPmo createRow(BusinessPartner partner) {
        return new SearchResultRowPmo(partner);
    }
}
The SimpleTablePmo deals with the creation of the table and calls the method SearchResultTablePmo.createRow for each partner in the BusinessPartner list.

Adding the table to SearchPage

To display the defined table in the search page, you need to do the following:

  • In the method createContent():

    1. Create a new instance of SearchResultTablePmo and pass the list foundPartners as a lambda expression.

    2. Add a section with the created SearchResultTablePmo the same way as the section SearchSectionPmo.

The finished implementation should look like this:

SearchPage.java
@Override
public void createContent() {
    addSection(new SearchSectionPmo(this::search));
    addSection(new SearchResultTablePmo(() -> foundPartners));
}

If you start the application now, you can search for an arbitrary name and see all the matching business partners in the result table below the search bar. For example, when searching for "doe", you should get a table with four results: John Doe, Jane Doe, Average Doe and OneAddress Doe. Only John Doe and OneAddress Doe have a first address.

search result table
Figure 2. Search result table

For now, the UILink is not clickable. It will be made clickable in the next step, which deals with the navigation between views.