UI Components

Nested Components

Methods annotated with @UINestedComponent can return a PMO, which is then included in the page. The nested component is displayed as if it is a component. If the nested component is a section, the nested component looks like it is further indented.

An example for this feature is pictured below, including relevant code snippets of the two classes.

Nested PMO
Outer PMO
@UISection(caption = "@UINestedComponent")
public class NestedComponentPmo {

    private String title;
    private final AddressPmo firstAddress = new AddressPmo("First Address",
            new AddressPmo.CityPmo("12345", "First city"),
            "First street");
    private final AddressPmo secondAddress = new AddressPmo("Second Address",
            new AddressPmo.CityPmo("67890", "Second city"),
            "Second street");
    private final List<AddressPmo> addresses = List.of(firstAddress, secondAddress);

    @UITextField(position = 0, label = "Non nested component")
    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    @UINestedComponent(position = 10, label = "Nested horizontal layout", width = "")
    public NamePmo getNameLayout() {
        return new NamePmo();
    }

    @UICheckBox(position = 20,
            label = "Toggle visibility of nested PMO with collection", caption = "Has second address")
    public boolean isSecondNestedComponentVisible() {
        return addresses.get(1).isVisible();
    }

    public void setSecondNestedComponentVisible(boolean visible) {
        addresses.get(1).visible = visible;
    }

}
Inner PMO (NamePmo) annotated with @UIHorizontalLayout
    @UIHorizontalLayout(alignment = VerticalAlignment.MIDDLE)
    public static class NamePmo {

        private String name;
        private String vorname;

        @UITextField(position = 10, label = "")
        public String getName() {
            return name;
        }

        public void setName(String name) {
            this.name = name;
        }

        @UILabel(position = 20)
        public String getDivider() {
            return "/";
        }

        @UITextField(position = 30, label = "")
        public String getVorname() {
            return vorname;
        }

        public void setVorname(String vorname) {
            this.vorname = vorname;
        }
    }

Returning multiple nested PMOs

Instead of returning a single PMO, a method annotated with @UINestedComponent can also return a SequencedCollection<Object>. Each element of the collection is treated as an individual nested component and displayed in the same order as in the collection.

This allows you to provide multiple nested components that should appear in sequence within the same parent component.

Multiple Nested PMOs
    @BindStyleNames({ LumoUtility.Display.FLEX, LumoUtility.FlexDirection.COLUMN, LumoUtility.Gap.LARGE })
    @UINestedComponent(position = 80, label = "Nested PMO with Collection")
    public List<AddressPmo> getNestedPmos() {
        return addresses;
    }
The list of PMOs is not dynamically updated. If certain nested components should only be displayed under specific conditions, they must be configured using @BindVisible.