Custom apps

Tablet Custom App Template

Template for creating external apps for the tablet system (mad-tablet).

📋 Prerequisites

• Node.js installed

• npm or yarn

• The mad-tablet resource must be installed and working

🚀 How to use

1. Install dependencies

cd web-source
npm install

2. Build the web application

npm run build

This will create the web folder with the compiled files.

3. Configure the resource

The resource is already configured to automatically register on the tablet when it starts.

⚠️ IMPORTANT: If you change the resource name, you must update the name in the file web-source/src/utils/fetchNui.ts:

// Use the resource name directly for external apps
const resourceName = 'tablet_custom_app_template'; // Change to your resource name

4. Add to server.cfg

ensure mad-tablet
ensure tablet_custom_app_template

5. Test

1. Start the server

2. Enter the game

3. Open the tablet (F5 or /tablet command)

4. You should see the "Custom App" in the apps list

5. Click on the app to open it

🎨 Customize the App

Change name, icon and color

Edit the file client/main.lua:

    local success = exports['mad-tablet']:RegisterApp({
        id = 'custom-app-template',              -- Unique app ID
        name = 'Custom App',                      -- Name that appears on the tablet
        icon = 'apps',                            -- Material Icons icon
        color = '#6366f1',                        -- Icon color (default blue)
        resourceName = GetCurrentResourceName(),              -- Resource name
        isVisible = function()                    -- Function to check visibility
            return true -- Always visible (you can add logic here, e.g.: check job)
        end,
    })

Change the UI

Edit the files in web-source/src/components/App.tsx and then build again.

Add visibility logic

In client/main.lua, you can add conditions to show/hide the app:

isVisible = function(playerData)
    -- Example: only show for police
    return playerData.job == 'police'
end,

📁 Structure

tablet_custom_app_template/
├── client/
│   └── main.lua          # Client logic and app registration
├── server/
│   └── main.lua          # Server logic (if needed)
├── web-source/           # React/TypeScript source code
│   └── src/
│       └── components/
│           └── App.tsx   # Main UI component
├── web/                  # Application build (generated)
├── config.lua
└── fxmanifest.lua

🔧 Available exports

The template already implements the necessary exports:

• onAppOpen() - Called when the app is opened

• onAppClose() - Called when the app is closed

📨 Send messages from Lua to React

To send messages from Lua to React in your external app, use the sendReactMessage export from the tablet:

exports['mad-tablet']:sendReactMessage({
    action = "TEST_STRING",  -- Action name (will be received via useNuiEvent)
    data = {
        message = 'This is a test string sent via sendReactMessage!'
    },
    iframeId = 'custom-app-template'  -- Must match the app.id you registered
})

⚠️ IMPORTANT: The iframeId must be exactly the same as the id you used in RegisterApp. For example, if you registered with id = 'custom-app-template', you must use iframeId = 'custom-app-template'.

In React, receive the message like this:

useNuiEvent("TEST_STRING", (data) => {
    console.log('Message received:', data);
    // data.message contains 'This is a test string sent via sendReactMessage!'
});

Reference Script

https://github.com/fmsfdd/tablet_custom_app_template

📝 Notes

• The app registers automatically when the resource starts

• The web build must be done whenever you change code in web-source

• For development, you can use npm run start:game for watch mode