Table look set of data entry UI with TextField and TextArea

Hi
I want to create a screen where some set of fields will be displayed like a standard textField and TextArea but will have option to add/modify/delete those set of data as appears in the attached image. Any thought is appreciated.

Dev need 1

Dev need 2

Hi,

in your case you need to generate panels with components dynamically using ComponentsFactory. Also I recommend to extract your List item panel as Frame to be able to build it using XML markup.

First, you can create main screen:


<layout expand="scroll">
    <button caption="Add" invoke="addNewUser"/>

    <scrollBox id="scroll">
        <vbox id="editPane" width="300px" spacing="true">

        </vbox>
    </scrollBox>
</layout>

Here new item Frame will be created and added it to editPane:


public class Screen extends AbstractWindow {
    @Inject
    protected Metadata metadata;
    @Inject
    protected CollectionDatasource<User, UUID> usersDs;
    @Inject
    protected VBoxLayout editPane;

    public void addNewUser() {
        User user = metadata.create(User.class);
        user.setName("<New User name>");

        usersDs.addItem(user);

        Frame editFrame = openFrame(null, "itemFrame", ParamsMap.of("item", user));
        editPane.add(editFrame);
    }
}

Edit frame will have following layout:


<layout>
    <groupBox>
        <hbox margin="false,false,true,false"
              spacing="true"
              width="100%">
            <label stylename="h2"
                   value="Customer"/>
            <button align="MIDDLE_RIGHT"
                    icon="icons/edit.png"
                    invoke="switchMode"/>
        </hbox>
        <label id="valueLabel"/>
        <textField id="valueField"
                   visible="false"/>
    </groupBox>
</layout>

There passed parameter is used to bind UI Components to dynamically generated datasource:


public class ItemFrame extends AbstractFrame {
    @Inject
    protected TextField valueField;
    @Inject
    protected Label valueLabel;
    @WindowParam
    private User item;

    @Override
    public void init(Map<String, Object> params) {
        super.init(params);

        Datasource userDs = new DsBuilder()
                .setJavaClass(User.class)
                .setAllowCommit(false)
                .buildDatasource();

        userDs.invalidate();

        valueField.setDatasource(userDs, "name");
        valueLabel.setDatasource(userDs, "name");

        userDs.refresh();
        userDs.setItem(item);
    }

And finally it will contain simple method to switch edit/view mode:


public void switchMode() {
    valueField.setVisible(!valueField.isVisible());
    valueLabel.setVisible(!valueLabel.isVisible());

    if (valueField.isVisible()) {
        valueField.requestFocus();
    }
}

Also see my sample project to try it in action: GitHub - cuba-labs/custom-list-view: How to create sample list view screen in CUBA