😋Custom Apps

A step-by-step guide on how to create and and custom apps to your laptop!

How can I create a custom app?

If you wish to implement a custom user interface (UI) for your application, you must develop a separate resource using our templates.

How can I add my app after developing it?

There are 2 ways you do that. The first and most straight-forward way is to set this variable in your newly created resource local addWithResourceStart = false to true. That way everytime this resource is ensured/restarted it will delete and re-add the application. The second way is shown below. If you are going with the seconds way make sure the variable above is set to false. After creating your new resource follow the guide below and add the app to your config.apps.lua as shown.

Example Custom App (In laptop's config)

["custom"] = {
    name = "Custom",
    icon = "https://r2.fivemanage.com/pub/fr11gx4axbq6.png",
    ui = "https://cfx-nui-your-resource-name/ui/dist/index.html",
    itemNeeded = false,
    isDisabled = false,
    id = 7,
    canInteract = function()
        -- Anything else besides the things listed above (items)
        return true
    end
},

• name (string): The display name of the application

• icon (string): The id of the used SVG icon. Future custom apps won't support SVG's, but just normal images.

• ui (string): The UI URL that will be rendered from an outside resource when the app is clicked.

• itemNeeded (string/boolean): The item that the player needs to open the app or false if no item is required

• isDisabled (boolean): Whether or not the app is disabled (Will appear as "??????" in apps section with a lock icon)

• id (number): The id that the app is identified and sorted by.

• canInteract (function): Should return true or false whether the player can open the app or not. This can be used for any other restrictions you might need.

---

Exports - Adding an app

To add a custom app, you can use the following export:

exports["bd-laptop"]:AddCustomApp({
    id = exports["bd-laptop"]:GetNextFreeId(),
    key = "your-custom-app-key",
    name = "App Template",
    ui = "https://cfx-nui-" .. GetCurrentResourceName() .. "/ui/dist/index.html", -- built version
    -- ui = "http://localhost:3000", -- dev version
    icon = "https://r2.fivemanage.com/pub/fr11gx4axbq6.png",
    itemNeeded = false,
    isDisabled = false,
    canInteract = function()
        -- Anything else besides the things listed above (items, metadata)
        return true
    end
})

---

Exports - Removing an app

To remove a custom app, you can use the following export:

exports["bd-laptop"]:RemoveCustomApp(key)