API Reference

This guide demonstrates real-world usage patterns of InfinityUI through common use cases and best practices.

🏗️ Basic Structure

Recommended Architecture

For a complete system, organize your menus this way:

-- 1. Global variables
local data = {}
local mainMenu
local subMenu1
local subMenu2

-- 2. Network events (if needed)
RegisterNetEvent("myEvent", function(callback)
    -- Handle data
end)

-- 3. Utility functions
local function myFunction()
    -- Logic
end

-- 4. Main command
RegisterCommand("mymenu", function()
    -- Create menus
    mainMenu = InfinityUI.CreateMenu("Title", "Subtitle")
    subMenu1 = InfinityUI.CreateSubMenu(mainMenu, "Sub Menu 1", "Description")
    
    -- Open menu
    InfinityUI.Visible(mainMenu, true)
    
    -- Render loop
    while InfinityUI.Visible(mainMenu) or InfinityUI.Visible(subMenu1) do
        Citizen.Wait(0)
        
        InfinityUI.IsVisible(mainMenu, function()
            -- Main menu content
        end)
        
        InfinityUI.IsVisible(subMenu1, function()
            -- Sub menu content
        end)
    end
end)

Key Pattern: Use a single while loop to handle all your menus with or between conditions.

Pattern: Main Menu with Multiple Sub-Menus

RegisterCommand("system", function()
    local mainMenu = InfinityUI.CreateMenu("System", "Main Menu")
    local createMenu = InfinityUI.CreateSubMenu(mainMenu, "Create", "Create new item")
    local listMenu = InfinityUI.CreateSubMenu(mainMenu, "List", "View all items")
    local manageMenu = InfinityUI.CreateSubMenu(mainMenu, "Manage", "Edit item")
    
    InfinityUI.Visible(mainMenu, true)
    
    while InfinityUI.Visible(mainMenu) or InfinityUI.Visible(createMenu) 
       or InfinityUI.Visible(listMenu) or InfinityUI.Visible(manageMenu) do
        Citizen.Wait(0)
        
        InfinityUI.IsVisible(mainMenu, function()
            -- Navigation buttons
            InfinityUI.Button("View List", nil, {RightLabel = ">>>"}, true, {}, listMenu)
            InfinityUI.Button("Create New", nil, {RightLabel = ">>>"}, true, {}, createMenu)
        end)
        
        -- Other menu contents...
    end
end)

Key Points:

✅ Create all menus before opening
✅ Use one while loop with or conditions
✅ Use RightLabel = ">>>" for navigation buttons (Optional)
✅ Pass the target menu as the last parameter

Pattern: Load Data Before Navigation

InfinityUI.Button("View List", nil, {RightLabel = ">>>"}, true, {
    onSelected = function()
        -- Load data from server before opening submenu
        TriggerServerEvent("request_data_list")
    end
}, listMenu)

When to use:

Loading data from database
Fetching fresh information
Validating permissions before access

📝 Input Forms

Text Input with ox_lib

Pattern: Simple Text Input

InfinityUI.Button("Set Name", nil, {RightLabel = ">>>"}, true, {
    onSelected = function()
        local input = lib.inputDialog("Enter Name", {
            {
                type = 'input',
                label = 'Item Name',
                required = true,
                placeholder = 'Enter name here'
            }
        })
        
        if input and input[1] then
            data.name = input[1]
        end
    end
})

Key Points:

✅ Always check if input exists
✅ Access value with input[1]
✅ Set required = true for mandatory fields
✅ Use placeholder for hints

Dynamic Button Labels

Pattern: Show Current Value in Button

InfinityUI.Button(
    data.name and "Name (Current: " .. data.name .. ")" or "Name (Not Set)",
    nil,
    {RightLabel = ">>>"},
    true,
    {
        onSelected = function()
            -- Input logic
        end
    }
)

Benefits:

Shows current state
Clear visual feedback
Better UX

Formula:

data.field and "Label (Current: " .. data.field .. ")" or "Label (Default)"

Multi-Field Form

Pattern: Multiple Inputs in One Dialog

InfinityUI.Button("Configure Item", nil, {RightLabel = ">>>"}, true, {
    onSelected = function()
        local input = lib.inputDialog("Item Configuration", {
            {
                type = 'input',
                label = 'Name',
                required = true,
                placeholder = 'Item name'
            },
            {
                type = 'number',
                label = 'Price',
                required = true,
                min = 0,
                max = 999999
            },
            {
                type = 'textarea',
                label = 'Description',
                required = false,
                placeholder = 'Optional description'
            }
        })
        
        if input then
            data.name = input[1]
            data.price = input[2]
            data.description = input[3]
        end
    end
})

Checkbox for Boolean Values

Pattern: Toggle with Checkbox

InfinityUI.Checkbox(
    "Enable Feature",
    "Description of the feature",
    data.enabled or false,
    {},
    {
        onChecked = function()
            data.enabled = not data.enabled
        end,
        onUnChecked = function()
            data.enabled = not data.enabled
        end
    }
)

Tip: Both onChecked and onUnChecked should toggle the value to ensure proper synchronization.

🗂️ Dynamic Lists

Rendering Items from Table

Pattern: Loop Through Data

local items = {}
local itemList = {}

-- Populate list (from server event)
RegisterNetEvent("receive_items", function(data)
    items = {}
    itemList = {}
    
    for id, item in pairs(data) do
        item.id = id
        items[id] = item
        table.insert(itemList, item)
    end
end)

-- Render in menu
InfinityUI.IsVisible(listMenu, function()
    if not itemList or #itemList == 0 then
        InfinityUI.Button("No items available", nil, {TextColor = {255, 0, 0}}, false, {})
    else
        for i, item in ipairs(itemList) do
            InfinityUI.Button(
                "[" .. item.id .. "] " .. item.name,
                item.description,
                {RightLabel = ">>>"},
                true,
                {
                    onSelected = function()
                        selectedItem = item.id
                    end
                },
                detailsMenu
            )
        end
    end
end)

Key Points:

✅ Separate items (key-value) and itemList (array) for different access patterns
✅ Show "No items" message when list is empty
✅ Disable empty state button (false parameter)
✅ Store selection in variable for next menu

Empty State Handling

Pattern: Graceful Empty State

if not itemList or #itemList == 0 or not items then
    InfinityUI.Button(
        "No items loaded",
        "Click 'Refresh' to load",
        {TextColor = {255, 165, 0}}, -- Orange
        false,
        {}
    )
else
    -- Render items
end

Item Selection Flow

Pattern: List → Select → Details

local selectedItem = nil

-- List Menu
InfinityUI.IsVisible(listMenu, function()
    for i, item in ipairs(itemList) do
        InfinityUI.Button(
            item.name,
            nil,
            {RightLabel = ">>>"},
            true,
            {
                onSelected = function()
                    selectedItem = item.id
                end
            },
            detailsMenu
        )
    end
end)

-- Details Menu
InfinityUI.IsVisible(detailsMenu, function()
    if not selectedItem or not items[selectedItem] then
        InfinityUI.Button("No item selected", nil, {}, false, {})
        return
    end
    
    local item = items[selectedItem]
    
    InfinityUI.Button("Name: " .. item.name, nil, {}, true, {})
    InfinityUI.Button("Price: $" .. item.price, nil, {}, true, {})
    
    InfinityUI.Button("Delete", nil, {TextColor = {255, 0, 0}}, true, {
        onSelected = function()
            TriggerServerEvent("delete_item", selectedItem)
        end
    }, listMenu)
end)

💾 Data Management

Using a Data Object

Pattern: Centralized Data Storage

local data = {}

-- Setting values
data.name = "Item Name"
data.price = 100
data.enabled = true

-- Using in buttons
InfinityUI.Button(
    data.name and "Name: " .. data.name or "Name (Not Set)",
    nil,
    {},
    true,
    {}
)

-- Sending to server
InfinityUI.Button("Save", nil, {}, true, {
    onSelected = function()
        TriggerServerEvent("save_data", data)
    end
})

Benefits:

Single source of truth
Easy to reset: data = {}
Simple server communication

Resetting Form Data

Pattern: Clear After Submit

RegisterNetEvent("item_created", function(success)
    if success then
        data = {} -- Reset form
        InfinityUI.Visible(createMenu, false) -- Close menu
        exports.core:SendNotification("Success", "Item created!", 3000)
    end
end)

Separating Data Structures

Pattern: Dictionary + Array

local items = {}      -- Key-value for quick access
local itemList = {}   -- Array for iteration

RegisterNetEvent("receive_data", function(callback)
    items = {}
    itemList = {}
    
    for id, item in pairs(callback) do
        item.id = id
        items[id] = item          -- Direct access: items[5]
        table.insert(itemList, item)  -- Loop: for i, item in ipairs
    end
end)

-- Access by ID
local item = items[selectedId]

-- Iterate in order
for i, item in ipairs(itemList) do
    -- ...
end

✅ Validation & Parsing

Position Formatting

Pattern: Get and Format Coordinates

local function getFormattedLocation()
    local ped = GetPlayerPed(PlayerId())
    local location = GetEntityCoords(ped)
    
    if not location or not (location.x and location.y and location.z) then
        return nil
    end
    
    return {
        x = location.x,
        y = location.y,
        z = location.z
    }
end

local function formatPos(pos)
    if not pos then return "Not Set" end
    return string.format("X: %.2f Y: %.2f Z: %.2f", pos.x, pos.y, pos.z)
end

-- Usage
InfinityUI.Button(
    data.position and formatPos(data.position) or "Set Position (Current)",
    nil,
    {},
    true,
    {
        onSelected = function()
            data.position = getFormattedLocation()
        end
    }
)

Color Input Validation

Pattern: Parse and Validate RGBA

local function parseRGBA(input)
    if type(input) ~= "string" then return nil end
    
    -- Extract numbers: "255, 128, 0, 255"
    local r, g, b, a = input:match("^%s*(%d+)%s*,%s*(%d+)%s*,%s*(%d+)%s*,%s*(%d+)%s*$")
    
    if not r then return nil end
    
    r, g, b, a = tonumber(r), tonumber(g), tonumber(b), tonumber(a)
    
    -- Validate
    if not r or not g or not b or not a then return nil end
    if r > 255 or g > 255 or b > 255 or a > 255 then return nil end
    
    return { r = r, g = g, b = b, a = a }
end

local function formatRGBA(color)
    if not color then return "Not Set" end
    return string.format("R:%d G:%d B:%d A:%d", color.r, color.g, color.b, color.a or 255)
end

-- Usage
InfinityUI.Button(
    data.color and "Color (" .. formatRGBA(data.color) .. ")" or "Set Color",
    nil,
    {RightLabel = ">>>"},
    true,
    {
        onSelected = function()
            local input = lib.inputDialog("Color", {
                {
                    type = 'input',
                    label = 'Enter RGBA (R, G, B, A)',
                    required = true,
                    placeholder = '255, 255, 255, 255'
                }
            })
            
            if not input or not input[1] then return end
            
            local color = parseRGBA(input[1])
            
            if not color then
                exports.core:SendNotification("Error", "Invalid format. Use: R, G, B, A (0-255)", 4000)
                return
            end
            
            data.color = color
        end
    }
)

Validation Checklist:

✅ Check type before parsing
✅ Validate format with regex
✅ Convert to numbers
✅ Range check (0-255)
✅ Show error message if invalid

Number Validation

Pattern: Validate Numeric Input

local function validateNumber(input, min, max)
    local num = tonumber(input)
    if not num then return nil, "Not a valid number" end
    if min and num < min then return nil, "Value too low (min: " .. min .. ")" end
    if max and num > max then return nil, "Value too high (max: " .. max .. ")" end
    return num
end

-- Usage
InfinityUI.Button("Set Price", nil, {RightLabel = ">>>"}, true, {
    onSelected = function()
        local input = lib.inputDialog("Price", {
            {
                type = 'input',
                label = 'Enter price',
                required = true,
                placeholder = '100'
            }
        })
        
        if not input or not input[1] then return end
        
        local price, error = validateNumber(input[1], 0, 999999)
        
        if not price then
            exports.core:SendNotification("Error", error, 3000)
            return
        end
        
        data.price = price
    end
})

🌐 Server Integration

Request-Response Pattern

Client Side:

-- Request data
InfinityUI.Button("Load Items", nil, {RightLabel = ">>>"}, true, {
    onSelected = function()
        TriggerServerEvent("request_items")
    end
}, itemListMenu)

-- Receive response
RegisterNetEvent("receive_items", function(items)
    -- Process items
    itemList = {}
    for id, item in pairs(items) do
        item.id = id
        table.insert(itemList, item)
    end
end)

Server Side:

RegisterNetEvent("request_items", function()
    local source = source
    local items = GetItemsFromDatabase()
    TriggerClientEvent("receive_items", source, items)
end)

Create/Update/Delete Operations

Client: Create

InfinityUI.Button("Create", nil, {RightLabel = ">>>"}, true, {
    onSelected = function()
        TriggerServerEvent("create_item", data)
    end
}, mainMenu)

RegisterNetEvent("item_created", function(success)
    if success then
        data = {}
        exports.core:SendNotification("Success", "Item created!", 3000)
    end
end)

Client: Delete

InfinityUI.Button("Delete", nil, {TextColor = {255, 0, 0}}, true, {
    onSelected = function()
        TriggerServerEvent("delete_item", selectedItem)
    end
}, listMenu)

RegisterNetEvent("item_deleted", function(success)
    if success then
        selectedItem = nil
        TriggerServerEvent("request_items") -- Refresh list
    end
end)

Error Handling

Pattern: Handle Server Errors

RegisterNetEvent("operation_result", function(success, error)
    if success then
        exports.core:SendNotification("Success", "Operation completed", 3000)
        InfinityUI.CloseAll()
    else
        exports.core:SendNotification("Error", error or "An error occurred", 5000)
    end
end)

🎨 Advanced Patterns

Conditional Button Styling

Pattern: Visual Feedback Based on State

-- Error state (red text)
InfinityUI.Button(
    "Delete Item",
    "This action cannot be undone",
    {TextColor = {255, 0, 0}}, -- Red
    true,
    {}
)

-- Success state (green background)
InfinityUI.Button(
    "Confirm",
    nil,
    {Color = { BackgroundColor = {0, 255, 0, 190} }}, -- Green
    true,
    {}
)

-- Info state (blue background)
InfinityUI.Button(
    "Save",
    nil,
    {Color = { BackgroundColor = {66, 133, 244, 190} }}, -- Blue
    true,
    {}
)

-- Disabled state
InfinityUI.Button(
    "Locked Feature",
    "Requires premium",
    {TextColor = {128, 128, 128}}, -- Gray
    false, -- Disabled
    {}
)

Color Guide:

-- Reds (Danger/Delete)
{255, 0, 0}     -- Bright red
{185, 0, 0}     -- Dark red

-- Greens (Success/Confirm)
{0, 255, 0}     -- Bright green
{0, 153, 0}     -- Dark green

-- Blues (Info/Primary)
{66, 133, 244}  -- Material blue
{0, 153, 204}   -- Cyan blue

-- Grays (Disabled/Neutral)
{128, 128, 128} -- Gray
{200, 200, 200} -- Light gray

-- Orange (Warning)
{255, 165, 0}   -- Orange

Pattern: Open/Close with Same Command

RegisterCommand("mymenu", function()
    mainMenu = InfinityUI.CreateMenu("Title", "Subtitle")
    
    -- Toggle: if open, close; if closed, open
    InfinityUI.Visible(mainMenu, not InfinityUI.Visible(mainMenu))
    
    while InfinityUI.Visible(mainMenu) do
        Citizen.Wait(0)
        InfinityUI.IsVisible(mainMenu, function()
            -- Content
        end)
    end
end)

Pattern: Show Different Content Based on State

InfinityUI.IsVisible(mainMenu, function()
    if playerHasPermission then
        InfinityUI.Button("Admin Panel", nil, {RightLabel = ">>>"}, true, {}, adminMenu)
    end
    
    if playerLevel >= 10 then
        InfinityUI.Button("Premium Shop", nil, {RightLabel = ">>>"}, true, {}, shopMenu)
    else
        InfinityUI.Button("Premium Shop (Locked)", "Reach level 10", {}, false, {})
    end
end)

Confirmation Dialog

Pattern: Two-Step Confirmation

local confirmDelete = false

InfinityUI.IsVisible(deleteMenu, function()
    if not confirmDelete then
        InfinityUI.Button("Delete Item", "Click again to confirm", {TextColor = {255, 165, 0}}, true, {
            onSelected = function()
                confirmDelete = true
            end
        })
    else
        InfinityUI.Button("⚠️ CONFIRM DELETE", "This cannot be undone!", {TextColor = {255, 0, 0}}, true, {
            onSelected = function()
                TriggerServerEvent("delete_item", selectedItem)
                confirmDelete = false
            end
        })
        
        InfinityUI.Button("Cancel", nil, {}, true, {
            onSelected = function()
                confirmDelete = false
            end
        }, listMenu)
    end
end)

Progressive Form

Step 1: Basic Info

Pattern: Multi-Step Form first step

local formStep = 1
local formData = {}

InfinityUI.IsVisible(createMenu, function()
    if formStep == 1 then
        InfinityUI.Button("Step 1: Basic Info", nil, {}, true, {})
        -- Basic info inputs
        InfinityUI.Button("Next", nil, {RightLabel = ">>>"}, true, {
            onSelected = function()
                formStep = 2
            end
        })
    end
end)

Step 2: Details

Pattern: Multi-Step Form second step

InfinityUI.IsVisible(createMenu, function()
    if formStep == 2 then
        InfinityUI.Button("Step 2: Details", nil, {}, true, {})
        -- Detail inputs
        InfinityUI.Button("Back", nil, {}, true, {
            onSelected = function()
                formStep = 1
            end
        })
        InfinityUI.Button("Next", nil, {RightLabel = ">>>"}, true, {
            onSelected = function()
                formStep = 3
            end
        })
    end
end)

Step 3: Review

Pattern: Multi-Step Form third step

InfinityUI.IsVisible(createMenu, function()
    if formStep == 3 then
        InfinityUI.Button("Step 3: Review", nil, {}, true, {})
        -- Show summary
        InfinityUI.Button("Back", nil, {}, true, {
            onSelected = function()
                formStep = 2
            end
        })
        InfinityUI.Button("Submit", nil, {Color = {BackgroundColor = {0, 255, 0, 190}}}, true, {
            onSelected = function()
                TriggerServerEvent("submit_form", formData)
                formStep = 1
                formData = {}
            end
        })
    end
end)

📊 Best Practices Summary

✅ DO

-- ✅ Create menus outside the loop
local menu = InfinityUI.CreateMenu("Title", "Subtitle")
while InfinityUI.Visible(menu) do
    -- ...
end

-- ✅ Check data before using
if data and data.field then
    -- Use data.field
end

-- ✅ Validate user input
local value = validateInput(input[1])
if not value then return end

-- ✅ Show current state in labels
data.name and "Name: " .. data.name or "Name (Not Set)"

-- ✅ Use proper error handling
if not success then
    exports.core:SendNotification("Error", errorMsg, 3000)
    return
end

-- ✅ Reset data after operations
RegisterNetEvent("success", function()
    data = {}
end)

❌ DON'T

-- ❌ Create menus inside the loop
while true do
    local menu = InfinityUI.CreateMenu(...) -- NO!
end

-- ❌ Access data without checking
local value = data.field -- Could be nil!

-- ❌ No validation
data.price = input[1] -- What if it's not a number?

-- ❌ Static labels
InfinityUI.Button("Name", ...) -- User doesn't see current value

-- ❌ Ignore errors
TriggerServerEvent("action")
-- No error handling!

-- ❌ Keep old data
-- Data persists between operations - causes issues

🎯 Common Patterns Cheat Sheet

Pattern

Use Case

Code

Navigation

Go to submenu

InfinityUI.Button("Go", nil, {RightLabel = ">>>"}, true, {}, submenu)

Load & Navigate

Fetch before open

{onSelected = function() TriggerServerEvent("load") end}, submenu

Dynamic Label

Show current value

data.field and "Label: " .. data.field or "Label (Default)"

Input

Get user input

lib.inputDialog("Title", {{type='input', label='...'}})

Validation

Check input

if not validate(input) then return end

Empty State

No data

if #list == 0 then Button("No items", nil, {}, false) end

Selection

Pick from list

{onSelected = function() selected = item.id end}, detailsMenu

Confirmation

Two-step delete

local confirm = false + toggle state

Color Coding

Visual feedback

{TextColor = {255, 0, 0}} or {Color = {BackgroundColor = {...}}}

Server Call

Send data

TriggerServerEvent("event", data)

🚀 Complete Example Template

Here's a template you can copy and adapt (Do not forget to implement the server part):

-- ========== VARIABLES ==========
local data = {}
local items = {}
local itemList = {}
local selectedItem = nil

-- ========== UTILITY FUNCTIONS ==========
local function resetData()
    data = {}
end

local function validateInput(input)
    -- Your validation logic
    return input ~= nil and input ~= ""
end

-- ========== NETWORK EVENTS ==========
RegisterNetEvent("receive_items", function(callback)
    items = {}
    itemList = {}
    for id, item in pairs(callback) do
        item.id = id
        items[id] = item
        table.insert(itemList, item)
    end
end)

RegisterNetEvent("operation_success", function()
    resetData()
    exports.core:SendNotification("Success", "Operation completed", 3000)
end)

-- ========== MAIN COMMAND ==========
RegisterCommand("mysystem", function()
    -- Create menus
    local mainMenu = InfinityUI.CreateMenu("My System", "Main Menu")
    local createMenu = InfinityUI.CreateSubMenu(mainMenu, "Create", "Create New Item")
    local listMenu = InfinityUI.CreateSubMenu(mainMenu, "List", "View All Items")
    local detailsMenu = InfinityUI.CreateSubMenu(mainMenu, "Details", "Item Details")
    
    -- Open
    InfinityUI.Visible(mainMenu, true)
    
    -- Render loop
    while InfinityUI.Visible(mainMenu) or InfinityUI.Visible(createMenu) 
       or InfinityUI.Visible(listMenu) or InfinityUI.Visible(detailsMenu) do
        Citizen.Wait(0)
        
        -- MAIN MENU
        InfinityUI.IsVisible(mainMenu, function()
            InfinityUI.Button("View List", nil, {RightLabel = ">>>"}, true, {
                onSelected = function()
                    TriggerServerEvent("request_items")
                end
            }, listMenu)
            
            InfinityUI.Button("Create New", nil, {RightLabel = ">>>"}, true, {}, createMenu)
        end)
        
        -- CREATE MENU
        InfinityUI.IsVisible(createMenu, function()
            InfinityUI.Button(
                data.name and "Name: " .. data.name or "Set Name",
                nil,
                {RightLabel = ">>>"},
                true,
                {
                    onSelected = function()
                        local input = lib.inputDialog("Name", {
                            {type = 'input', label = 'Enter name', required = true}
                        })
                        if input and input[1] then
                            data.name = input[1]
                        end
                    end
                }
            )
            
            InfinityUI.Button("Create", nil, {Color = {BackgroundColor = {0, 255, 0, 190}}}, true, {
                onSelected = function()
                    if not data.name then
                        exports.core:SendNotification("Error", "Name required", 3000)
                        return
                    end
                    TriggerServerEvent("create_item", data)
                end
            }, mainMenu)
        end)
        
        -- LIST MENU
        InfinityUI.IsVisible(listMenu, function()
            if not itemList or #itemList == 0 then
                InfinityUI.Button("No items", nil, {TextColor = {255, 165, 0}}, false, {})
            else
                for i, item in ipairs(itemList) do
                    InfinityUI.Button(
                        item.name,
                        nil,
                        {RightLabel = ">>>"},
                        true,
                        {
                            onSelected = function()
                                selectedItem = item.id
                            end
                        },
                        detailsMenu
                    )
                end
            end
        end)
        
        -- DETAILS MENU
        InfinityUI.IsVisible(detailsMenu, function()
            if not selectedItem or not items[selectedItem] then
                InfinityUI.Button("No item selected", nil, {}, false, {})
                return
            end
            
            local item = items[selectedItem]
            InfinityUI.Button("Name: " .. item.name, nil, {}, true, {})
            
            InfinityUI.Button("Delete", nil, {TextColor = {255, 0, 0}}, true, {
                onSelected = function()
                    TriggerServerEvent("delete_item", selectedItem)
                    selectedItem = nil
                end
            }, listMenu)
        end)
    end
end, false)

You're ready to build! Use these patterns as a foundation and adapt them to your specific needs. Check the API Reference for complete function details.

Need more help? (Expand)

Join our Discord: support.md
Check the FAQ: faq.md

PreviousConfiguration NextFAQ

Last updated 32 minutes ago

Good evening

hashtag🏗️ Basic Structure

hashtagRecommended Architecture

hashtag🎯 Menu Navigation

hashtagCreating Menu Hierarchy

hashtagNavigation with Data Loading

hashtag📝 Input Forms

hashtagText Input with ox_lib

hashtagDynamic Button Labels

hashtagMulti-Field Form

hashtagCheckbox for Boolean Values

hashtag🗂️ Dynamic Lists

hashtagRendering Items from Table

hashtagEmpty State Handling

hashtagItem Selection Flow

hashtag💾 Data Management

hashtagUsing a Data Object

hashtagResetting Form Data

hashtagSeparating Data Structures

hashtag✅ Validation & Parsing

hashtagPosition Formatting

hashtagColor Input Validation

hashtagNumber Validation

hashtag🌐 Server Integration

hashtagRequest-Response Pattern

hashtagCreate/Update/Delete Operations

hashtagError Handling

hashtag🎨 Advanced Patterns

hashtagConditional Button Styling

hashtagToggle Menu Visibility

hashtagConditional Menu Content

hashtagConfirmation Dialog

hashtagProgressive Form

hashtagStep 1: Basic Info

hashtagStep 2: Details

hashtagStep 3: Review

hashtag📊 Best Practices Summary

hashtag✅ DO

hashtag❌ DON'T

hashtag🎯 Common Patterns Cheat Sheet

hashtag🚀 Complete Example Template

🏗️ Basic Structure

Recommended Architecture

🎯 Menu Navigation

Creating Menu Hierarchy

Navigation with Data Loading

📝 Input Forms

Text Input with ox_lib

Dynamic Button Labels

Multi-Field Form

Checkbox for Boolean Values

🗂️ Dynamic Lists

Rendering Items from Table

Empty State Handling

Item Selection Flow

💾 Data Management

Using a Data Object

Resetting Form Data

Separating Data Structures

✅ Validation & Parsing

Position Formatting

Color Input Validation

Number Validation

🌐 Server Integration

Request-Response Pattern

Create/Update/Delete Operations

Error Handling

🎨 Advanced Patterns

Conditional Button Styling

Toggle Menu Visibility

Conditional Menu Content

Confirmation Dialog

Progressive Form

Step 1: Basic Info

Step 2: Details

Step 3: Review

📊 Best Practices Summary

✅ DO

❌ DON'T

🎯 Common Patterns Cheat Sheet

🚀 Complete Example Template