How to create tiles menu

Support
#1

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…

#3

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/
sampler/modules/web/src/com/haulmont/sampler/web/app/mainwindowdashboard at master · cuba-platform/sampler · GitHub

Attached project: demo.zip (79.0 KB)

3 Likes
#4

Trying this out and I will give feedback.

Thanks a lot.