UI

CLIENT & SERVER SIDE

Client Functions

build_ui

Use the following export function to build a UI through the cores UI builder.

exports.boii_core.build_ui(data)

Below is an example of how UI data should be formatted. For more information on how the builder works refer to the guide here: PLACEHOLDER

Example UI Data

const data = {
    resource: GetCurrentResourceName(),
    header: {
        header_left: {
            image: 'https://placehold.co/64x64',
            info_1: 'Placeholder Name',
            info_2: 'ID_123456',
        },
        header_right: {
            flex_direction: 'row',
            options: [
                { icon: 'fa-solid fa-wallet', value: '$0' },
                { icon: 'fa-solid fa-coins', value: '100' },
            ],
        },
    },
    footer: {
        actions: [
            { id: 'close_ui', key: 'ESCAPE', label: 'Close' },
            { id: 'open_help', key: 'H', label: 'Help' },
        ],
    },
    content: {
        cards: {
            type: 'cards',
            title: 'Example Cards',
            layout: 'row',
            search: {
                placeholder: 'Search items...',
            },
            cards: [
                {
                    image: {
                        src: 'https://placehold.co/64x64',
                        size: { width: '64px', height: 'auto', border: '2px solid rgba(0, 0, 0, 0.5);' },
                        is_profile_picture: true,
                    },
                    title: 'Card Title',
                    description: 'Placeholder description.',
                    layout: 'row',
                    on_hover: {
                        title: 'Hovered Card',
                        description: ['Detailed description for the card.'],
                        values: [{ key: 'Detail', value: 'Example Value' }],
                        actions: [{ id: 'interact_item', key: 'E', label: 'Interact' }],
                    },
                },
            ],
        },
        inventory: {
            type: 'slot_inventory',
            player: {
                slots: 42,
                weight: 0,
                max_weight: 50000,
                items: [
                    {
                        slot: 1,
                        id: 'item_1',
                        rarity: 'common',
                        weight: 100,
                        quantity: 3,
                        stackable: true,
                        quality: 80,
                        image: {
                            src: 'https://placehold.co/48x48',
                            size: { width: '48px', height: 'auto', border: 'transparent' },
                        },
                        on_hover: {
                            title: 'Example Item',
                            description: [
                                'A sample item for inventory display.',
                            ],
                            values: [
                                { key: 'Quantity', value: 3 },
                                { key: 'Weight', value: '300g' },
                            ],
                            actions: [
                                { id: 'use_item', key: 'F', label: 'Use' },
                                { id: 'inspect_item', key: 'I', label: 'Inspect' },
                            ],
                        },
                    },
                ],
            },
            other: {
                slots: 10,
                weight: 0,
                max_weight: 20000,
                items: [
                    {
                        slot: 1,
                        id: 'item_2',
                        rarity: 'epic',
                        weight: 100,
                        quantity: 3,
                        stackable: 10,
                        image: {
                            src: 'https://placehold.co/48x48',
                            size: { width: '48px', height: 'auto', border: 'transparent' },
                        },
                        on_hover: {
                            title: 'Example Item',
                            description: [
                                'A sample item for inventory display.',
                            ],
                            values: [
                                { key: 'Quantity', value: 3 },
                                { key: 'Weight', value: '300g' },
                            ],
                            actions: [
                                { id: 'use_item', key: 'F', label: 'Use' },
                                { id: 'inspect_item', key: 'I', label: 'Inspect' },
                            ],
                        },
                    },
                ],
            },
        },
        table: {
            type: 'table',
            title: 'Example Table',
            columns: ['Header 1', 'Header 2', 'Header 3'],
            rows: [
                ['Data 1', 'Data 2', 'Data 3'],
                ['Data A', 'Data B', 'Data C'],
                ['Example X', 'Example Y', 'Example Z'],
            ],
        },
        list: {
            type: 'list',
            title: 'Example List',
            items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'],
        },
        inputs: {
            id: 'inputs',
            type: 'input_groups',
            title: 'Example Inputs',
            groups: [
                {
                    header: 'Example Inputs',
                    expandable: true,
                    inputs: [
                        { category: 'category1', id: 'value1', label: 'Example 1', type: 'number' },
                        { category: 'category2', id: 'value2', label: 'Example 2', type: 'number' }
                    ],
                }
            ],
        }
    },
};

notify

Use the following to send notifications. This function uses the notifications bridge in boii_utils. Make sure you have set your desired notifications in utils correctly, for more information on this refer to boii_utils documentation.

exports.boii_core.notify({
    type = 'info',
    header = 'Information Notification',
    message = 'Some information..',
    duration = 3500
})

Client Events

boii:cl:build_ui

Use the following event to build a UI from the server. For example UI data refer here.

emitNet('boii:cl:build_ui', data)

Server Functions

notify

Use the following to send notifications . This function uses the notifications bridge in boii_utils. Make sure you have set your desired notifications in utils correctly, for more information on this refer to boii_utils documentation.

exports.boii_core.notify(source, {
    type = 'info',
    header = 'Information Notification',
    message = 'Some information..',
    duration = 3500
})