Custom Apps

Here you will find information about how to integrate custom apps inside the laptop by using your own app templates.

Here’s a GitBook page template you can use for documenting your Banking Kartik-Laptop Custom App. It’s structured and styled the same way GitBook pages are usually written, so you can just copy-paste it into your docs and edit where necessary.

---

📂 App Configuration

To register your custom app in the laptop, add the following config inside your resource:

Config.AppSettings = {
    id = "custom-app", -- Unique App ID (must match iframeId later)
    name = "Custom App", -- Display name
    url = 'https://cfx-nui-' .. GetCurrentResourceName() .. '/web/index.html',
    color = "from-blue-500 to-indigo-600", -- Gradient color for laptop UI
    icon = "Laptop", -- HeroIcons name for the app
    isVisible = function ()
        return true -- Logic for app visibility (job checks, permissions, etc.)
    end,
    onAppOpen = function()
        TriggerEvent("custom-app:client:openApp")
    end,
    onAppClose = function()
        TriggerEvent("custom-app:client:closeApp")
    end,
}

---

🔗 Registering NUI Callbacks

Inside your server or client script, you can register callbacks that the React app can call via fetchNui.

RegisterNUICallback('GET_DEMO_VALUE', function(_, cb)
    local data = {
        some_index = 'Hello World!'
    }
    cb(data)
end)

---

🔄 Sending Data to the App

You can also send data from Lua → React using the built-in sendReactMessage.

RegisterCommand("setdata", function ()
    exports['kartik-laptop']:sendReactMessage({
        action = "SET_DATA",
        data = {
            some_index = 'Hello!'
        },
        iframeId = Config.AppSettings.id -- Must match app ID
    })
end)

---

⚛️ React Setup

Inside your custom app (React project), make sure to set the resource name in fetchNui.ts.

// web-source/src/utils/fetchNui.ts
const resourceName = 'laptop_custom_app_template'; 
// Change this to the folder/resource name you are using

This ensures NUI events are correctly mapped between your React app and FiveM resource.

---

📌 Reference

For a ready-to-use template, check the official GitHub repo: 👉 laptop_custom_app_template

---

✅ Pro Tip:

• Keep your id and iframeId consistent.

• Use isVisible to restrict apps by job/permissions.

• Always rename the React resource folder to avoid conflicts.

---