Client UI

The client UI functions show feedback to the player: GTA notifications and help text, the ESX notify, TextUI, progress bar and context menu resources, and the classic ESX.UI.Menu system used by older menu resources. All of them run on the client.

OverviewCopy Anchor Link

ESX.ShowNotification, ESX.TextUI, ESX.Progressbar and the context functions call exports of separate resources. If the resource was not present when es_extended started, the call raises Resource [name] is Missing!.

NotificationsCopy Anchor Link

ESX.ShowNotificationCopy Anchor Link

ESX.ShowNotification(message, notifyType, length, title, position)

Shows a notification through esx_notify.

Returns: nothing

ESX.ShowNotification('Vehicle stored in the garage', 'success', 4000, 'Garage')

From the server, use xPlayer.showNotification(...) or trigger esx:showNotification with the same arguments.

ESX.ShowAdvancedNotificationCopy Anchor Link

ESX.ShowAdvancedNotification(sender, subject, msg, textureDict, iconType, flash, saveToBrief, hudColorIndex)

Shows a native GTA feed notification with a picture, like a phone message.

Returns: nothing

ESX.ShowAdvancedNotification('Maze Bank', 'Transfer', 'You received $2,500', 'CHAR_BANK_MAZE', 9, false, true, 140)

ESX.ShowHelpNotificationCopy Anchor Link

ESX.ShowHelpNotification(msg, thisFrame, beep, duration)

Shows the black help box in the top left corner.

Returns: nothing

CreateThread(function()
    while isNearShop do
        ESX.ShowHelpNotification('Press ~INPUT_CONTEXT~ to open the shop', true)
        Wait(0)
    end
end)

ESX.ShowFloatingHelpNotificationCopy Anchor Link

ESX.ShowFloatingHelpNotification(msg, coords)

Shows a help bubble anchored at a world position. Call it every frame.

Returns: nothing

local shop = vector3(25.7, -1347.3, 29.5)

CreateThread(function()
    while true do
        local sleep = 500
        if #(GetEntityCoords(ESX.PlayerData.ped) - shop) < 3.0 then
            sleep = 0
            ESX.ShowFloatingHelpNotification('Shop', shop)
        end
        Wait(sleep)
    end
end)

ESX.DrawMissionTextCopy Anchor Link

ESX.DrawMissionText(msg, time)

Shows subtitle text at the bottom of the screen, like mission instructions.

Returns: nothing

ESX.DrawMissionText('Deliver the package to ~y~Sandy Shores~s~', 6000)

ESX.UI.ShowInventoryItemNotificationCopy Anchor Link

ESX.UI.ShowInventoryItemNotification(add, item, count)

Shows the small "+1 Bread" / "-1 Bread" item popup of the built-in inventory UI. The server triggers it through the secure event esx:showInventoryItemNotification.

Returns: nothing

TextUICopy Anchor Link

ESX.TextUICopy Anchor Link

ESX.TextUI(message, notifyType)

Shows a persistent text box through esx_textui until you hide it.

Returns: nothing

ESX.HideUICopy Anchor Link

ESX.HideUI()

Hides the TextUI box.

local point = ESX.Point:new({
    coords = vector3(441.0, -981.0, 30.7),
    distance = 2.0,
    enter = function()
        ESX.TextUI(('[%s] Open armory'):format(ESX.GetInteractKey()))
    end,
    leave = function()
        ESX.HideUI()
    end,
})

Progress barCopy Anchor Link

ESX.ProgressbarCopy Anchor Link

ESX.Progressbar(message, length, options)

Starts a progress bar through esx_progressbar. Only one can run at a time.

Returns: boolean, false if another progress bar is running.

ESX.Progressbar('Repairing vehicle', 8000, {
    FreezePlayer = true,
    animation = { type = 'Scenario', Scenario = 'PROP_HUMAN_BUM_BIN' },
    onFinish = function()
        TriggerServerEvent('mechanic:repairDone')
    end,
    onCancel = function()
        ESX.ShowNotification('Repair cancelled', 'error')
    end,
})

ESX.CancelProgressbarCopy Anchor Link

ESX.CancelProgressbar()

Cancels the running progress bar and calls its onCancel.

Context menuCopy Anchor Link

These wrap the esx_context exports. ESX strips HTML tags from the title, description, label and inputPlaceholder fields of every element before it opens or refreshes the menu. Element format and callbacks are documented on esx_context.

ESX.OpenContextCopy Anchor Link

ESX.OpenContext(position, elements, onSelect, onClose, canClose)

ESX.OpenContext('right', {
    { unselectable = true, icon = 'fas fa-car', title = 'Garage' },
    { icon = 'fas fa-warehouse', title = 'Store vehicle', value = 'store' },
    { icon = 'fas fa-key', title = 'Take out vehicle', value = 'take' },
}, function(menu, element)
    if element.value == 'store' then
        StoreVehicle()
    end
    ESX.CloseContext()
end)

ESX.PreviewContextCopy Anchor Link

ESX.PreviewContext(position, elements, onSelect, onClose, canClose)

Opens the context menu as a preview without taking NUI focus.

ESX.CloseContextCopy Anchor Link

ESX.CloseContext()

Closes the open context menu.

ESX.RefreshContextCopy Anchor Link

ESX.RefreshContext(elements, position)

Replaces the elements of the open context menu.

ESX.UI.MenuCopy Anchor Link

ESX.UI.Menu is the classic menu API. Menu resources such as esx_menu_default, esx_menu_dialog and esx_menu_list register a type, and scripts open menus of that type.

ESX.UI.Menu.RegisterTypeCopy Anchor Link

ESX.UI.Menu.RegisterType(menuType, open, close)

Returns: nothing

ESX.UI.Menu.OpenCopy Anchor Link

ESX.UI.Menu.Open(menuType, namespace, name, data, submit, cancel, change, close)

Returns: the menu object with type, namespace, resourceName, name, data and these methods:

After update, setElement, setElements, setTitle or removeElement, call menu.refresh() to show the change.

ESX.UI.Menu.Open('default', GetCurrentResourceName(), 'armory', {
    title = 'Armory',
    align = 'top-left',
    elements = {
        { label = 'Pistol', value = 'WEAPON_PISTOL' },
        { label = 'Nightstick', value = 'WEAPON_NIGHTSTICK' },
    },
}, function(data, menu)
    TriggerServerEvent('police:takeWeapon', data.current.value)
    menu.close()
end, function(data, menu)
    menu.close()
end)

ESX.UI.Menu.CloseCopy Anchor Link

ESX.UI.Menu.Close(menuType, namespace, name, cancel)

Closes a specific menu. With cancel = true the menu's cancel callback runs instead of close.

ESX.UI.Menu.CloseAllCopy Anchor Link

ESX.UI.Menu.CloseAll(cancel)

Closes every open menu. With cancel = true, each menu's cancel callback runs.

ESX.UI.Menu.GetOpenedCopy Anchor Link

ESX.UI.Menu.GetOpened(menuType, namespace, name)

Returns: the menu object, or nil if it is not open. ESX.UI.Menu.IsOpen is an alias, so it also returns the menu (truthy) or nil.

if ESX.UI.Menu.IsOpen('default', GetCurrentResourceName(), 'armory') then
    ESX.UI.Menu.Close('default', GetCurrentResourceName(), 'armory')
end

ESX.UI.Menu.GetOpenedMenusCopy Anchor Link

ESX.UI.Menu.GetOpenedMenus()

Returns: the internal array of open menus (ESX.UI.Menu.Opened). Closed menus leave nil holes, so iterate with pairs.

Common issuesCopy Anchor Link

• "Resource [esx_context] is Missing!": the helper resource is not installed or starts after es_extended. Fix the start order in server.cfg.
• Menu does not open: no resource registered the menu type. Start the matching menu resource.
• HTML in context titles disappears: ESX strips tags on purpose. Use plain text.

RelatedCopy Anchor Link

• Client functions
• esx_notify
• esx_textui
• esx_progressbar
• esx_context

Frequently asked questions