Widgets of Main Page

The “Main” section is a list of widgets that can be customized (Figure 1). Widget size and location can be configured in the user interface.

Figure 1. Widgets of the “Main” section

All widgets are User Exits of the UEDataPageWidget type.

UEDataPageWidget type

import {UeModuleBase} from '@unidata/core-app';
import {ComponentType} from 'react';

export type UEDataPageWidget = UeModuleBase & {
    default: {
        component: ComponentType<{}>;
        meta: {
            order: number; // 0 - 100
            getDisplayName: () => string;
            isDeletable: boolean;

           // see the documentation for https://github.com/STRML/react-grid-layout
            dataGrid: () => {
                i: string; // unique identifier of the widget
                x: number; // position on the grill on the x axis
                y: number; // position on the grill on the y axis
                w: number; // width (in grid columns-by default 12)
                h: number; // height (in grid lines)
                minW?: number; // Minimum width in grid units.
                maxW?: number; // Maximum width in grid units.
                minH?: number; // Minimum height in grid units.
                maxH?: number; // Maximum height in grid units.
                moved?: boolean; // set by DragEvents (onDragStart, onDrag, onDragStop) and ResizeEvents (onResizeStart, onResize, onResizeStop)
                static?: boolean; // If true, equal to `isDraggable: false` and `isResizable: false`.
                isDraggable?: boolean; // If false, will not be draggable. Overrides `static`.
                isResizable?: boolean; // If false, will not be resizable. Overrides `static`.
            };
        };
    };
}

Implementation example: “Favorite records” widget

class FavoriteWidget extends React.Component<{}, {}> {
    static dataGrid = () => {
        return {
            i: 'favorites',
            x: 2,
            y: 0,
            w: 2,
            h: 2
        };
    };

    override render () {
        return (
            <CardPanel
                title={i18n.t('module.data-ee>ue>widgets>favorite>cardTitle')}
                noBodyPadding={true}
                leftExtraItems={<Icon name={'star-folder'}/>}
                isWide={true}
            >
                <div className={styles.container}>
                    <FavoriteList/>
                </div>
            </CardPanel>
        );
    }
}

export const favoriteWidgetUE: UEDataPageWidget = {
    'default': {
        type: UEList.DataPageWizard,
        moduleId: 'favoriteWidget',
        active: true,
        system: false,
        component: FavoriteWidget,
        resolver: () => {
            return UserManager.getUserLogin() !== UserStore.GUEST_LOGIN;
        },
        meta: {
            order: 20,
            getDisplayName: () => i18n.t('module.data-ee>ue>widgets>favorite>cardTitle'),
            dataGrid: FavoriteWidget.dataGrid,
            isDeletable: true
        }
    }
};

Implementation example: “Tasks” widget

class LastTaskWidget extends React.PureComponent<{}> {
    override render () {
        const containerClassName = joinClassNames(
            styles.container,
            'scrollable'
        );

        return (
            <CardPanel
                leftExtraItems={<Icon name={'tasks'}/>}
                title={i18n.t('module.workflow>menuItems>workflow')}
                isWide={true}
                noBodyPadding={true}
                hideOverflow={true}>
                <div className={containerClassName}>
                    <EmbeddedTasksList isOpen={true} pageSize={10} isOnlyMyTasks={true}/>
                </div>
            </CardPanel>
        );
    }
}

export const lastTaskWidgetUE: UEDataPageWidget = {
    'default': {
        type: UEList.DataPageWizard,
        moduleId: 'lastTaskWidget',
        active: true,
        system: false,
        component: LastTaskWidget,
        resolver: () => {
            return UserManager.getUserLogin() !== UserStore.GUEST_LOGIN;
        },
        meta: {
            order: 80,
            getDisplayName: () => i18n.t('module.workflow>menuItems>workflow'),
            dataGrid: () => {
                return {
                    i: 'lastTask',
                    x: 7,
                    y: 0,
                    w: 2,
                    h: 2
                };
            },
            isDeletable: true
        }
    }
};