How to create tiles menu

Following up on this discussion…

I’ve been tasked to try and redo an Open Source Hospital Management system on Cuba. One of the system’s strongest features is having a Tiled List of Menu Items.

image

clicking on one of them get’s you to another listing:

image

How can I achieve this on Cuba?

Regards…

Hi!

You can try to use GridLayout with generated content that will open screen by click. For instance, it can be part of mainwindow layout with scrollbox.

ext-mainwindow.xml :

<layout>
    <split id="foldersSplit">
        <main:foldersPane id="foldersPane"/>
        <main:workArea id="workArea">
            <main:initialLayout>
                <scrollBox id="scrollBox"
                           height="100%"
                           width="100%">
                </scrollBox>
            </main:initialLayout>
        </main:workArea>
    </split>
</layout>

Controller:

@Inject
private ScrollBoxLayout scrollBox;
@Inject
private ComponentsFactory factory;
@Inject
protected WindowConfig windowConfig;

@Override
public void init(Map<String, Object> params) {
    super.init(params);
    Collection<WindowInfo> windows = windowConfig.getWindows();

    GridLayout gridLayout = factory.createComponent(GridLayout.class);
    gridLayout.setWidthFull();
    gridLayout.setHeightFull();
    gridLayout.setSpacing(true);

    int cols = 3;
    gridLayout.setColumns(cols);

    int rows = windows.size() % cols == 0 ? (windows.size() / cols) : (windows.size() / cols) + 1;
    gridLayout.setRows(rows);

    for (WindowInfo info : windows) {
        gridLayout.add(createButton(info));
    }

    scrollBox.add(gridLayout);
}

private Button createButton(WindowInfo info) {
    Button button = factory.createComponent(Button.class);
    button.setWidthFull();
    button.setHeight("50px");
    button.setAction(new BaseAction("open")
            .withCaption(info.getId())
            .withHandler(event -> openWindow(info.getId(), WindowManager.OpenType.NEW_TAB)));
    return button;
}

Also, we have Sampler project that has dashboard menu: https://demo.cuba-platform.com/sampler/
https://github.com/cuba-platform/sampler/tree/master/modules/web/src/com/haulmont/sampler/web/app/mainwindowdashboard

Attached project: demo.zip (79.0 KB)

3 Likes

Trying this out and I will give feedback.

Thanks a lot.