OrbitoViewEngine (OVE)

Czym jest OVE?

OVE to deklaratywny silnik renderujący widoki na podstawie opisu w formacie JSON. Moduł zwraca strukturę danych – platforma Orbito przekształca ją w spójny interfejs zgodny z aktualnym szablonem wizualnym (Tabler UI / Bootstrap).

Dzięki temu moduł nie musi wiedzieć nic o HTML, CSS ani strukturze strony. Wystarczy opisać co ma się pojawić – silnik zadba o jak.

Struktura odpowiedzi strony

Handler strony musi zwrócić obiekt z type: 'ove' i polem template zawierającym opis widoku:

module.exports = async function(companyId, instanceId, body, params) {
    return {
        type: 'ove',
        template: {
            type: 'card',
            title: 'Moja strona',
            content: [
                { type: 'text', content: 'Witaj!' }
            ]
        }
    };
};

Pole template to obiekt widoku OVE – dowolny komponent z pełnej listy komponentów.

Teksty w schemacie widoku – na razie tylko string

W przeciwieństwie do Pages.registerSettingsSections, Config.registerConfigBlocks, Problems.report i History.add, pola tekstowe w schemacie widoku OVE (title, content itp.) przyjmują wyłącznie zwykły string – panel nie rozwiązuje tu mapy językowej { pl, en }. Jeśli strona ma być dwujęzyczna, zbuduj string po stronie modułu (np. na podstawie języka z ctx/nagłówka żądania).

Dostępne komponenty

Pełna dokumentacja wszystkich komponentów (parametry, przykłady, zdarzenia) dostępna jest tutaj:

➜ Dokumentacja komponentów OVE

Dostępne typy: badge, button, card, datatable, list, input, modal, row, select, text.

Przykłady

Prosta strona z kartą i tekstem

return {
    type: 'ove',
    template: {
        type: 'card',
        title: 'Informacje',
        content: [
            { type: 'text', content: 'Moduł działa poprawnie.' }
        ]
    }
};

Formularz konfiguracyjny z przyciskiem zapisu

return {
    type: 'ove',
    template: {
        type: 'card',
        title: 'Ustawienia',
        content: [
            {
                type: 'row',
                cols: [
                    {
                        size: 6,
                        childs: [
                            {
                                type: 'input',
                                name: 'apiKey',
                                label: 'Klucz API',
                                value: config?.apiKey || '',
                                groups: ['form']
                            }
                        ]
                    }
                ]
            }
        ],
        footer: {
            type: 'button',
            label: 'Zapisz',
            variant: 'primary',
            onClick: {
                action: 'callMethod',
                module: 'my/module',
                method: 'saveConfig',
                withData: ['#form']
            }
        }
    }
};

Tabela danych z akcjami wierszy

return {
    type: 'ove',
    template: {
        type: 'datatable',
        id: 'itemsTable',
        columns: [
            { header: 'Nazwa', field: 'name' },
            {
                header: 'Akcje',
                width: '120px',
                template: {
                    type: 'button',
                    label: 'Edytuj',
                    size: 'sm',
                    outline: true,
                    onClick: {
                        action: 'emit',
                        event: 'generatePage',
                        data: { module: 'my-module', page: 'edit/{{ _id }}' }
                    }
                }
            }
        ],
        dataSource: {
            module: 'my-module',
            method: 'listItems'
        }
    }
};