Creating a Menu
ESX Menu Default is a great way to create easy to use Menus for players. However, it is not always clear how to use it, this tutorial will show you exactly how to!
Structure​
ESX.UI.Menu.Open(type, namespace, name, data, OnSelect, cancel)
There are a couple key parts to creating a menu:
Part | Data Type | Explanation |
---|---|---|
type | string | The Type of menu to display, in this case, defualt |
namespace | string | Where to store the menu, normally GetCurrentResourceName() is used |
name | string | Unique Name For the menu |
data | table | The Elements to show in the menu |
OnSelect | function | Triggers when an element is chosen |
cancel | function | Triggers when they attempt to close a menu |
Elements​
Elements are the data that the client sees in the menu, they typically consist of 2 key parts, name
and label
,
the Label, is what is shown to the user, and the name is what is used to identify the element later on.
-- @Label - String - name to show to user
-- @name - String - element identifier
local Elements = {
{label = "I`m An Element", name = "element1"}
}
-- @Label - String - name to show to user
-- @name - String - element identifier
-- @value - Number - Default value for slider
-- @type - string - define the element Type
-- @min - Number - Minimum Slider Value
-- @max - Number - Maximum Slider Value
local Elements = {
{label = "Bread - £200", name = "bread", value = 1, type = 'slider', min = 1,max = 100}
}
-- @Label - String - name to show to user
-- @name - String - element identifier
-- Element Labels also have HTML support!
local Elements = {
{label = '<span style="color:green;">HEY! IM GREEN!/span>', name = "geen_element"}
}
On Select​
This function is triggered when an element is selected and returns arguments data
and menu
. We use
data.current
is used to grab the selected element and its atributes.
funcion(data, menu)
--- for a simple element
if data.current.name == "element1" then
print("Element 1 Selected")
menu.close()
end
-- for slider elements
if data.current.name == "bread" then
print(data.current.value)
end
end
Cancel​
This function is triggered when the user tries to close the menu and returns arguments data
and menu
.
funcion(data, menu)
print("Closing Menu - " .. menu.title)
menu.close() -- close menu
end
End Result​
Once you combine all these parts, you get a Menu Interface in which you can interact with :)
local Elements = {
{label = "I`m An Element", name = "element1"},
{label = "Bread - £200", name = "bread", value = 1, type = 'slider', min = 1,max = 100},
{label = '<span style="color:green;">HEY! IM GREEN!/span>', name = "geen_element"}
}
ESX.UI.Menu.Open("default", GetCurrentResourceName(), "Example_Menu", {
title = "Example Menu", -- The Name of Menu to show to users,
align = 'top-left', -- top-left | top-right | bottom-left | bottom-right | center |
elements = Elements -- define elements as the pre-created table
}, function(data,menu) -- OnSelect Function
--- for a simple element
if data.current.name == "element1" then
print("Element 1 Selected")
menu.close()
end
-- for slider elements
if data.current.name == "bread" then
print(data.current.value)
if data.current.value == 69 then
print("Nice!")
menu.close()
end
end
end, function(data, menu) -- Cancel Function
print("Closing Menu")
menu.close() -- close menu
end)