menu - VORP Core

GetMenuData

on top of your client scripts add this to get the menu data setters and getters

table

The menu data

local Menu = exports.vorp_menu:GetMenuData()

CloseAll

Close all menus

-- these params are optional
-- to not fire event close pass false if nil or true will fire the event close
MenuData.CloseAll(showRadar, soundClose, fireEventClose)

RegisterControls

Register custom keyboard, mouse, or wheel controls handled by vorp_menu’s NUI layer.This is useful when you want menu-like input handling outside of an opened menu.

table

required

Array of controls to listen for.Supported values:

Any browser keyboard key string from KeyboardEvent.key, for example e, ArrowUp, Enter, or Backspace
scrollup
scrolldown
mousepress

function

required

Callback fired with the triggered control name.

Notes:

Keyboard keys and mousepress repeat every frame while held until release.
scrollup and scrolldown fire once per wheel event.
mousepress ignores middle click and returns mousepress_left or mousepress_right in the callback.
If a menu is open, these menu keys are reserved and will not trigger custom callbacks: ArrowUp, ArrowDown, ArrowLeft, ArrowRight, Enter, Escape, Backspace.
Calling RegisterControls again replaces previously registered controls in the UI layer.
Call Menu.UnregisterControls() when you no longer need the listeners.

local Menu = exports.vorp_menu:GetMenuData()

Menu.RegisterControls({ "e", "scrollup", "scrolldown", "mousepress" }, function(control)
    if control == "e" then
        print("E is being held")
    elseif control == "scrollup" then
        print("Scrolled up once")
    elseif control == "scrolldown" then
        print("Scrolled down once")
    elseif control == "mousepress_left" then
        print("Left mouse button pressed")
    elseif control == "mousepress_right" then
        print("Right mouse button pressed")
    end
end)

UnregisterControls

Remove all controls previously registered with RegisterControls.

local Menu = exports.vorp_menu:GetMenuData()

Menu.UnregisterControls()

Menu elements are the elements that will be displayed in the menu

Elements
Sliders
Tick Box
Desc Price
Menu Params

Menu Elements

for each element you can use the following params

string

required

The value of the tab element

string

required

The label of the tab element

string

required

The description of the tab element

string

The height of the tab element example 4vh

string

The position of the label left or center

string

The text of the footer

boolean

If true the element will not be selectable, meaning the red square will not be shown

boolean

If true the element will not be clickable and will be grayed out

string

The image name from vorp_inventory items folder, for grid menu only

 local menuElements = {
    {
        label = "name",
        value = "value",
        desc = "description",
        itemHeight = "4vh", -- optional
        labelPos = "left", -- optional
        footerText = "any text here", -- optional
        isNotSelectable = true, -- optional
        image = "image", -- optional
        skipeOpenEvent = false, -- if true will not fire open event -- optional
    }
 }

Slider Number

allows to use a slider type of element to select a number , can be floats or integers this is defined by the hop value

string

required

The value of the tab element

string

required

The label of the tab element

string

required

The description of the tab element

string

required

The type of the tab element must be slider

number

The minimum value , if not defined will default to 0

number

required

The maximum value , if not defined will default to 100

number

required

The hop value , can hop by 1 2 etc, to use floats set the hop to 0.1 etc.

local menuElements = {
    {
        label = "name",
        value = 0, 
        desc = "description",
        type = "slider", -- required
        min = 0,
        max = 10,
        hop = 1
    }
}

Slider Text

allows to use a slider type of element to select a string , from a list of strings

string

required

The value of the tab element

string

required

The label of the tab element

string

required

The description of the tab element

string

required

The type of the tab element must be text-slider

table

required

The list of strings to select from

local menuElements = {
    {
        label = "name",
        value = "value",
        desc = "description",
        type = "text-slider", -- required
        textList = {
            {
                label = "skinny",
                value = "anything you want",
            },
            {
                label = "fatter",
                value = "anything you want",
            }
        }
    }
}

data.current.textIndex will return the index of the selected string

-- example
if data.current.value == "value" and data.current.textIndex then
  local currentValue = data.current.textList[data.current.textIndex].value
end

Linear Label Slider

allows to use a slider type in the label of the element to select a number , can be floats or integers this is defined by the hop value works with press key or drag when cursorEnabled is true

number

required

The value

string

required

The label

string

required

The description

string

required

The type must be label-slider

number

The minimum value , if not defined will default to 0

number

required

The maximum value , if not defined will default to 100

number

required

The hop value , can hop by 1 2 etc, to use floats set the hop to 0.1 etc.

table

The attributes of the slider , can be used to style the slider trackColor is the color of the track accepts names or hex codes rgba fillColor is the color of the fill, only accepts linear-gradient you can choose one color or multiple colors and the direction thumbColor is the color of the thumb accepts names or hex codes rgba

local menuElements = {
    {
        label = "name",
        value = 0,
        desc = "description",
        type = "label-slider", -- required
        min = 0,
        max = 10,
        hop = 1,
        attributes = { -- optional
            trackColor = "grey",
            fillColor = "linear-gradient(90deg, #000, #fff)",
            thumbColor = "white"
        }
    }
}

Linear Desc Slider

allows to create multiple sliders in the description of the element, can use integers or floats

string

required

The value of the tab element

string

required

The label of the tab element

string

required

The description of the tab element

string

required

The type of the tab element must be desc-slider

number

The minimum value , if not defined will default to 0

number

required

The maximum value , if not defined will default to 100

number

required

The hop value , can hop by 1 2 etc, to use floats set the hop to 0.1 etc.

table

required

The list of sliders

local menuElements = {
    {
        label = "name",
        value = "any",
        desc = "description",
        type = "desc-slider", -- required
        sliders = {
            {
                label = "Slider one",
                value = 0,
                min = 0,
                max = 1,
                hop = 1,
                color = true, -- custom keys if needed
                attributes = {
                    trackColor = "red",                                                             -- red or #ffff or a multicolor
                    fillColor = "linear-gradient(90deg, red, orange, yellow, green, blue, purple)", -- green or #ffff or a multicolor
                    thumbColor = "grey",                                                          -- yellow or #ffff or a multicolor
                }
            },
            {
                label = "Slider two",
                value = 0.0,
                min = -10.0,
                max = 10.0,
                hop = 0.1,
                comp = true, -- custom keys if needed
            },
        }
    }
}

data.current.sliderIndex will return the index of the selected slider

-- example
if data.current.value == "any" and data.current.sliders then
    local currentValue = data.current.sliders[data.current.sliderIndex].value
end

Label Tick Box

allows to create a tick box in the element

string

required

only accept unticked or ticked

string

required

The label of the tab element

string

required

The description of the tab element

boolean

required

to enable it set to true

local menuElements = {
    {
        label = "name",
        value = "unticked", -- start unticked or ticked
        desc = "description",
        tickBox = true
    }
}

data.current.value will return the value of the tick box

-- example
if data.current.tickBox then
    print(data.current.value)
end

Desc Tick Box

allows to create multiple tick boxes in the description of the element

string

required

The value of the tab element

string

required

The label of the tab element

string

required

The description of the tab element

string

required

The type of the element must be tick-box

table

required

The list of tick boxes

local menuElements = {
    {
        label = "label",
        desc = "description",
        value = "value",
        type = "tick-box", -- required
        tickBoxes = {  
            {
                label = "box one",
                value = "ticked", -- value will change to ticket or unticked
            },
            {
                label = "box two",
                value = "unticked", -- value will change to ticket or unticked
            },
        }
    }
}

data.current.tickBoxIndex will return the index of the tick box we ticked or unticked

-- example
if data.current.value == "value" and data.current.tickBoxes then
    local currentValue = data.current.tickBoxes[data.current.tickBoxIndex].value
end

Desc Price

allows to create a price in the description of the element like RDO

string

required

The value of the tab element

string

required

The label of the tab element

string

required

The description of the tab element

table

required

The price of the tab element

amount is the amount of the price
icon is gold or money only
text the label

local menuElements = {
    {
        label = "label",
        desc = "description",
        value = "value",
        descPrice = {
            amount = 100.00,
            icon = "money",
            text = "Price",
        }
    }
}

   -- example
   if data.current.value == "value" and data.current.descPrice then
      local currentValue = data.current.descPrice.amount
   end

Menu Params

string

required

The title of the menu

string

required

The subtext of the menu

string

required

The align of the menu , top-right , top-center , top-left

table

required

The elements for the menu

string

The last menu function name if you wish to go back to the previous menu this will enable the following code and call a global function

if (data.current == "backup") then
    return _G[data.trigger](parameters,parameters)
end

string

sets to all elements to this height 4vh etc

string

sets the position of the label to all elements

left
center

boolean

adds a divider to the footer of the menu to all elements

boolean

sets the fixed height of the menu, so it doesnt resize depending on elements and description

boolean

enables the cursor for the menu, key inputs will still work, including for sliders and tick boxes

hover over the element and left click to select element then again left click to act as ENTER, or simply press ENTER
right click to close the menu, or simply press Backspace
scroll wheel to scroll up and down the menu

number

sets the max visible items in the menu

boolean

hides the radar when the menu opens. to display it again simple pass these params again in these functions

 function(data, menu)
    -- to hide the radar and to play the final sound of the menu closing
    menu.close(hideRadar, soundClose, fireEventClose)
    -- also available here 
    Menu.CloseAll(hideRadar, soundClose, fireEventClose)
 end

boolean

plays the first opening sound of the menu

table

creates a button in the description , useful when you dont have to create a new element for a button

table

creates a button in the description , useful when you dont have to create a new element for a button

boolean

sets the menu to a grid layout, instead of a list layoutuse in the menuelements the value image to display item imagesuseful for creating shops

boolean

if true will skip the open event by default it will fire the open event, usefull when you open one menu after the other without firing the open event

    local MenuInfo = {
        title = "menu title",
        subtext = "menu sub text",
        align = "top-right", 
        elements = menuElements, 
        lastmenu = "functionName",
        itemHeight = "4vh",
        labelPos = "left",
        divider = true,
        fixedHeight = true,
        enableCursor = true,
        maxVisibleItems = 6,
        hideRadar = true,                          
        soundOpen = true,                                      
        confirmButton = { label = "Confirm", value = "confirm" }, 
        cancelButton = { label = "Cancel", value = "cancel" },
        isGrid = false,     
        skipOpenEvent = false,
        
    }

Functions

update elements ,add ,remove ,get elements runtime

addNewElement

this function will add a new element to the current menu elements by order

string

required

The label of the element

string

required

The value of the element

string

required

The description of the element

menu.addNewElement({
    label = "label",
    value = "open",
    desc = "description"
})

refresh menu to show new element

menu.refresh()

getElementBy[Value/Index]

find an element by value or index

data.current.value is available to use in the menu elements
data.current.index is available to use in the menu elements

local element = menu.getElementByValue(value) 
local element = menu.getElementByIndex(index)

setElement

this function will update a specific element variable

number

required

The index of the menu element to updatedata.current.index is available to use in the menu elements

string

required

The variable of the menu element to update , label,value,desc, any

any

required

The new value of the menu element to update

menu.setElement(index, variable, newValue)

refresh menu to show changes

menu.refresh()

removeElementBy[Value/Index]

this function will remove a specific element by value or index

string

required

The value of the element to removedata.current.value is available to use in the menu elements

number

required

The index of the element to updatedata.current.index is available to use in the menu elements

boolean

stop looking at the first element found can be used when you loop through several elements and remove all indexes

menu.removeElementByIndex(index,loop) 
menu.removeElementByValue(value,loop)

refresh menu to show changes

menu.refresh()

CloseMenu

this function will close the current menu

boolean

show the radar when the menu closes

boolean

plays the final sound when the menu closes

boolean

if true will fire the close event, this is usefull when you want to final close a menu by default the events are only fire when using the backspace or if you dont pass the parameter nil , to not fire the event pass false

menu.close(showRadar, soundClose, fireEventClose)

setTitle

this function will set the title of the current menu

string

required

The title of the menu

menu.setTitle("title")

refresh menu to show changes

menu.refresh()

setSubtext

this function will set the subtext of the current menu

string

required

The subtext of the menu

menu.setSubtext("subtext")

refresh menu to show changes

menu.refresh()

Inputs

creates an input box to collect text or numbers etc.

string

required

The type of input, text, number, password, dateyesno is a special type of input that will just create a yes or no button, no input needed

string

required

The header of the input

string

required

The placeholder of the input

table

required

The buttons of the input

number

The max length of the input

string

The pattern of the input

letters all Unicode letters and spaces
numbers numbers only
alphanumeric all Unicode letters and numbers
no-symbols letters, numbers, spaces (all languages)
username username with international letters
phone phone numbers with + for country codes
email email with international letters
money money format (supports both . and , decimals)
no-special no special symbols but allow apostrophes and hyphens

-- async function
menu.displayInput(
    {
        inputType = 'text',
        header = 'Enter your name',
        placeholder = 'Type here...', -- not for input type yesno
        description = 'Are you sure you want to archive this bill?', -- for input type yesno only
        buttons = { confirm = "Confirm", cancel = "Cancel" },
        maxLength = 50,
        pattern = 'letters',
        patternMessage = "only letters alowed"
    }, 
    function(inputValue)
        -- On submit
        print("User entered: " .. inputValue)
    end, 
    function()
        -- On cancel
         print("User cancelled pressed ESC")
    end
)

Events

close menu event

AddEventHandler("vorp:menu:closemenu", function(data)

end)

open menu event

AddEventHandler("vorp:menu:openmenu", function(data)

end)

Menu Example

function OpenMenu()
    -- close any menu before opening
    Menu.CloseAll()

    local menuElements = {

        { 
            label = "name",
            value = "value",
            desc = "description"
        },
        {
            label = "name",
            value = 0, 
            desc = "description",
            type = "slider",
            min = 0,
            max = 10,
            hop = 1
        },
        { 
            label = "name",
            value = "value",
            desc = "description",
            itemHeight = "4vh" 
        }
    }
    

    Menu.Open("default", GetCurrentResourceName() , "OpenMenu", -- unique namespace will allow the menu to open where you left off
        {
            title = "title",
            subtext = "subtext",
            align = "top-left", -- top-right , top-center , top-left
            elements = menuElements, -- elements needed
            lastmenu = "functionName", -- if you wish to go back to the previous menu , or remove (optional)
            maxVisibleItems = 6,                                      -- max visible items in the menu
            hideRadar = true,                                         -- hides the radar
            soundOpen = true,                                         -- plays the open sound of the menu
            skipOpenEvent = false,                                     

        },
        function(data, menu) -- submit callback
          -- triggers when pressing/clicking enter 
    
          print("current key of MenuElements is " .. data.current.index)
          print("current value of MenuElements is " .. data.current.value)
            -- to go back to lastmenu if any
    
            if (data.current == "backup") then --(optional)  if lastmenu is defined
                return  _G[data.trigger](any,any) -- or the function of the last menu
            end
            
        end,

        function(data,menu) -- cancel callback THIS IS OPTIONAL
            -- when menu closes if lastmenu isn't defined
            menu.close(true, true, true) 
        end,
        -- do not use the below unless you really need, it causes the menu to spike when you press up and down because the submit callback is doing the same thing.
        function(data, menu) -- change callback THIS IS OPTIONAL 
            -- if theres no previous menu close menu on backspace press
           -- is called when scrolling through the elements, also when the type = "slider" is changed i dont know why.
        end,

        function(data,menu) -- close callback THIS IS OPTIONAL
            -- when menu closes if lastmenu isnt defined
           -- menu.close(showRadar, soundClose, fireEventClose) 
        end)
end

​GetMenuData

​CloseAll

​RegisterControls

​UnregisterControls

​Menu Elements

​Functions

​Events

​Menu Example

GetMenuData

CloseAll

RegisterControls

UnregisterControls

Menu Elements

Functions

Events

Menu Example