# Modules
### Guide to Creating an External Module in Origen Inventory
This guide explains how to create your own module for **origen\_inventory** from another resource.
It’s written so that anyone can understand it, even if it’s your first time.
#### What Is a Module?
A module is an extra **“tab” or “section”** that you can add to the main inventory.\
For example: a **stats module**, a **settings module**, **crafting**, or anything you want.
Each module:
* Has its own icon and name.
* Displays a custom interface (HTML/JS).
* Opens inside the inventory.
* Is completely independent — you control what happens inside the module.
#### Important Before You Start
Your module must be in a **separate resource**.\
Example:
```
resources/
├── origen_inventory/
└── my_test_module/
```
`origen_inventory` must be started before, or restarted properly.\
If it restarts, your module will be automatically re-registered.
🧩 **Note:**\
Origen Inventory support **does NOT cover your own logic.**\
Help is only provided for integration issues (e.g. connection errors or broken exports).\
If your module doesn’t do what you want — that’s your job 😎
#### Basic Module Structure
Your resource should include at least:
```
my_test_module/
├── client.lua
└── ui/
└── index.html
```
#### Base Code (client.lua)
Copy and paste this into your module’s `client.lua`:
```lua
local function OpenTab()
exports.origen_inventory:sendModuleMessage('test_tab', {
action = 'open',
})
end
local function addModule()
exports.origen_inventory:createModule({
id = 'test_tab', -- Unique module ID (use distinct names)
icon = 'lucide:at-sign', -- Icon displayed in the inventory
ui = ("https://cfx-nui-%s/ui/index.html"):format(GetCurrentResourceName()), -- UI URL
useDefaultBackground = true, -- Use the inventory’s default background
canShow = function()
return true -- Condition to display the module (you can customize it)
end,
onOpen = function() OpenTab() end, -- What happens when it opens
onClose = function() end -- What happens when it closes
})
end
CreateThread(addModule)
-- Remove the module if your resource stops
AddEventHandler('onResourceStop', function(resourceName)
if resourceName == GetCurrentResourceName() then
exports.origen_inventory:removeModule('test_tab')
end
end)
-- Re-register the module if origen_inventory restarts
AddEventHandler('onResourceStart', function(resourceName)
if resourceName == 'origen_inventory' then
addModule()
end
end)
```
#### UI Structure
Your `ui/index.html` file can be any web interface.\
Example:
```html
My Module
Hello, this is my module 😎
```
#### Module Parameters
| Parameter | Description |
| ------------------------ | ------------------------------------------------------------ |
| **id** | Unique module identifier (required). Do not repeat IDs. |
| **icon** | Module icon (use Lucide icons: ). |
| **ui** | NUI URL displayed inside the inventory. |
| **useDefaultBackground** | If `true`, uses the default inventory background. |
| **canShow** | Function that defines if the module can be displayed. |
| **onOpen** | Function executed when the player opens the tab. |
| **onClose** | Function executed when the player closes the tab. |
#### Communication with the Inventory
Your module can send messages to the inventory using:
```lua
exports.origen_inventory:sendModuleMessage('MODULE_ID', {
action = 'whatever_you_want',
data = 'you_can_send_data_here'
})
```
And from your UI, you can receive or send messages using `postMessage` if needed.
#### Visual Example (Quick Summary)
| Action | Description |
| ----------------------------- | -------------------------------------------- |
| **Create module** | Runs when your resource starts |
| **Open module** | Calls `onOpen()` and sends an “open” message |
| **Close module** | Calls `onClose()` |
| **Stop resource** | Removes the module |
| **Restart origen\_inventory** | Automatically re-registers the module |
#### Final Recommendations
* Use **unique IDs** (e.g. `id = 'my_shop_module'`).
* **Do not modify anything** inside `origen_inventory`.
* Support only covers integration issues (exports, events, etc.) — not your logic or design.
* Keep your code **clean** and in **separate resources**.
#### Example Script
If you need a functional example, you can use the following script to test it.
{% file src="" %}