Tablet
Script integration
Custom apps

Custom Apps

See the custom apps exports for adding the app to the tablet. We recommend using our custom app template (opens in a new tab) to get started with creating custom apps.

Imported data

When the app gets loaded on the tablet, a few functions and data are imported into the globalThis object.

resourceName

The resource name of the app

appName

The name of the app

settings

The tablet settings

useNuiEvent

A function to listen for NUI events sent via SendCustomAppMessage

globalThis.useNuiEvent(event: string, callback: (data: any) => void): void

onSettingsChange

Listen for settings changes

globalThis.onSettingsChange(callback: (settings: any) => void): void

fetchNui

Fetch data from the script

globalThis.fetchNui(event: string, data?: any, scriptName?: string): Promise<any>

setApp

Open another app

globalThis.setApp(app: string): void

closeApp

Close the app

globalThis.closeApp(): void

setPopUp

Show a popup

type PopUp = {
    id?: number;
 
    title: string;
    description: string;
    vertical?: boolean;
 
    inputs?: PopUpInput[];
    input?: PopUpInput;
    textareas?: PopUpTextarea[];
    textarea?: PopUpTextarea;
 
    attachment?: {
        src: string;
    };
    buttons: {
        title: string;
        cb?: () => void;
        disabled?: boolean;
        bold?: boolean;
 
        color?: 'red' | 'blue';
    }[];
};
 
globalThis.setPopUp(data: PopUp): void

setFullScreenImage

Show a full screen image

globalThis.setFullScreenImage(src: string): void

setContextMenu

Show a context menu

type Contextmenu = {
    id?: number;
 
    title?: string;
    buttons: {
        title: string;
        color?: 'red' | 'blue';
        disabled?: boolean;
        cb?: () => void;
    }[];
};
 
globalThis.setContextMenu(data: Contextmenu): void

setControlCentreVisible

Show or hide the control centre

globalThis.setControlCentreVisible(visible: boolean): void

setGallery

Select an image or video from the gallery

type GalleryData = {
    id?: number;
 
    includeVideos?: boolean;
    includeImages?: boolean;
    allowExternal?: boolean;
    multiSelect?: boolean;
 
    onSelect: (data: PhotoData) => void;
};
 
type PhotoData = {
    id: number;
    src: string;
    timestamp?: number;
    type?: 'string';
    favourite?: boolean;
    isVideo?: boolean;
    size?: number;
    duration?: number;
};
 
globalThis.setGallery(data: GalleryData): void

setColorPicker

Select a color

type ColorPickerData = {
    id?: number;
 
    defaultColor?: string;
    onSelect: (color: string) => void;
    onClose?: (color: string) => void;
};
 
globalThis.setColorPicker(data: ColorPickerData): void

setIndicatorVisible

Show or hide the indicator

globalThis.setIndicatorVisible(visible: boolean): void
Server exportsState bags