TwinColumn

TwinColumn is a multiple selection component that shows two lists side by side, with the left column containing unselected items and the right column the selected items. Users can select the values by transferring them from the left to the right and backward using a double click or dedicated buttons.

twin column

Component’s XML-name: twinColumn.

Basics

Below is an example of TwinColumn component usage to select entity instances. To specify possible values, use the optionsContainer attribute with the id of the desired collection of entities as a value.

@JmixEntity
@Table(name = "UIEX1_EMPLOYEE")
@Entity(name = "uiex1_Employee")
public class Employee {
    @InstanceName
    @Column(name = "NAME")
    private String name;

    @JmixGeneratedValue
    @Column(name = "ID", nullable = false)
    @Id
    private UUID id;
}
<data>
    <collection id="employeesDc"
                class="ui.ex1.entity.Employee">
        <fetchPlan extends="_local"/>
        <loader id="employeesDl">
            <query>
                <![CDATA[select e from uiex1_Employee e]]>
            </query>
        </loader>
    </collection>
</data>
<layout>
    <twinColumn id="twinColumn"
                addAllBtnEnabled="true"
                optionsContainer="employeesDc"/>
</layout>

In the example above, the component displays the Employee entities' field, which is marked with the @InstanceName annotation. The component value is a list of the selected entities.

For example, let’s define a button displaying a list of the selected entities' names:

<button id="button" caption="Show value"/>
@Autowired
private TwinColumn<Employee> twinColumn;
@Autowired
private Notifications notifications;
@Autowired
private MetadataTools metadataTools;

@Subscribe("button")
protected void onButtonClick(Button.ClickEvent event) {
    StringBuilder sb = new StringBuilder();
    Collection<Employee> employees = twinColumn.getValue();
    if (employees != null) {
        notifications.create()
                .withCaption(
                        employees.stream()
                                .map(employee -> metadataTools.getInstanceName(employee))
                                .collect(Collectors.joining("\n"))
                )
                .show();

    }
}

Options

As a list of the possible values, you can use one of the implementations of the Options interface. Learn more about setting options programmatically on the CheckBoxGroup page.

Attributes

  1. addAllBtnEnabled attribute shows buttons that move all elements from one column to another. There are the following possible values:

    • true

    • false - the default value.

  2. leftColumnCaption and rightColumnCaption attributes allow you to set captions for the columns.

  3. rows attribute allows you to set the number of rows in each list. The value of height has priority over the value of rows.

Events and Handlers

Чтобы сгенерировать заглушку слушателя в Jmix Studio, выберите компонент в XML-дескрипторе экрана или на панели Component Hierarchy и используйте вкладку Handlers панели Component Inspector.

В качестве альтернативы вы можете воспользоваться кнопкой Generate Handler на верхней панели контроллера экрана.

ContextHelpIconClickEvent

ValueChangeEvent

OptionCaptionProvider

OptionStyleProvider

Validator

See Validator.

TwinColumn XML Attributes

Просматривать и редактировать атрибуты, применимые к компоненту, можно с помощью панели Component Inspector конструктора экранов Studio.

TwinColumn XML Element