Purchase Asset

Client-Side

Client Exports

Below are all the useful exports that you can use in other resources, be sure to read their descriptions.

Notification

--- @param data {table}
---  @field title {string?} Title. (Optional)
---  @field description {string?} Description. (Optional)
---  @field time {number?} Display time in milliseconds. (Optional)
---  @field color {string?} Notification color in HEX format, such as "#34ebe8". (Optional)
---  @field icon {string?} An icon class from Font Awesome, such as “fa-solid fa-check”. (Optional)
---  @field image {string?} URL of the image displayed. (Optional)
---  @field progressBar {string?} Progress bar type: "linear", "rounded", "rounded-icon". (Optional)
---  @field preset {string?} Name of the predefined preset from Config.NotificationsPresets. (Optional)
---  @field soundFile {string?} The name of the audio file, such as "notification-1.mp3". (Optional)
---  @field soundVolume {number?} Sound volume (range: 0-100). (Optional)
---  @field soundNative {table?} An array of native sound data that takes priority over soundFile. (Optional)
---  @field customCSS {table?} CSS style board for custom notification design. (Optional)
---    @field customCSS.icon {table} Icon styling, such as color or scaling.
---    @field customCSS.title {table} Title styling, such as font or size.
---    @field customCSS.description {table} Stylization of the description, such as font thickness.
---    @field customCSS.background {table} Background styling, such as color and border.
---    @field customCSS.background_glow {table} Styling the background glow effect.
exports['vms_notifyv2']:Notification(data)

Parameter soundNative requires 4 data because it runs on a native FiveM base PlaySoundFrontend you can use dev_nativesounds created by PainedPsyche to search for sounds.

Class customCSS works on the basis of default data from the CSS language.

Explanation

The use of parameters

exports['vms_notifyv2']:Notification({
    title = "example",
    description = "example",
    time = 4000, -- Miliseconds
    color = "#34ebe8", -- Hex color
    icon = "fa-solid fa-check", -- Font Awesome (https://fontawesome.com/search)
    image = "https://i.ibb.co/YdXQKY8/500x500.png",
    progressBar = "linear",
    preset = "ios",
    soundFile = "notification-1.mp3",
    soundVolume = 30,
    soundNative = {-1, 'Checkpoint_Hit', 'GTAO_FM_Events_Soundset', 0}, -- This parameter has priority over soundFile
    customCSS = {
        icon = {
            ['color'] = 'white',
            ['scale'] = '1.15'
        },
        title = {},
        description = {
            ['font-weight'] = '500'
        },
        background = {
            ['background'] = "{CURRENT_COLOR}",
            ['border'] = 'none'
        },
        background_glow = {},
    },
})
A simple example of use
exports['vms_notifyv2']:Notification({
    title = "SHOP",
    description = "You just bought bread.",
    time = 4000,
    color = "#34ebe8",
    icon = "fa-solid fa-check",
})

TopNotification

--- @param data {table}
---  @field title {string?} Title. (Optional)
---  @field description {string?} Description. (Optional)
---  @field time {number?} Display time in milliseconds. (Optional)
---  @field color {string?} Notification color in HEX format, such as "#34ebe8". (Optional)
---  @field icon {string?} An icon class from Font Awesome, such as “fa-solid fa-check”. (Optional)
---  @field image {string?} URL of the image displayed. (Optional)
---  @field progressBar {string?} Progress bar type: "linear" or nil. (Optional)
---  @field soundFile {string?} The name of the audio file, such as "notification-1.mp3". (Optional)
---  @field soundVolume {number?} Sound volume (range: 0-100). (Optional)
---  @field soundNative {table?} An array of native sound data that takes priority over soundFile. (Optional)
exports['vms_notifyv2']:TopNotification(data)
Explanation

The use of parameters

exports['vms_notifyv2']:TopNotification({
    title = "example",
    description = "example",
    time = 20000, -- Miliseconds
    color = "#34ebe8", -- Hex color
    icon = "fa-solid fa-check", -- Font Awesome (https://fontawesome.com/search)
    image = "https://i.ibb.co/YdXQKY8/500x500.png",
    progressBar = "linear",
    soundFile = "notification-1.mp3",
    soundVolume = 30,
    soundNative = {-1, 'Checkpoint_Hit', 'GTAO_FM_Events_Soundset', 0}, -- This parameter has priority over soundFile
})
A simple example of use
exports['vms_notifyv2']:TopNotification({
    title = "ANNOUNCEMENT",
    description = "In ~y~30 minutes~s~ the event race will begin.",
    time = 15000,
    color = "#34ebe8",
    icon = "fa-solid fa-check",
})

Question

--- @param data {table}
---  @field title {string?} Title. (Optional)
---  @field description {string?} Description. (Optional)
---  @field color {string?} Notification color in HEX format, such as "#34ebe8". (Optional)
---  @field icon {string?} An icon class from Font Awesome, such as “fa-solid fa-check”. (Optional)
---  @field image {string?} URL of the image displayed. (Optional)
---  @field preset {string?} Name of the predefined preset from Config.QuestionsPresets. (Optional)
---  @field soundFile {string?} The name of the audio file, such as "notification-1.mp3". (Optional)
---  @field soundVolume {number?} Sound volume (range: 0-100). (Optional)
---  @field soundNative {table?} An array of native sound data that takes priority over soundFile. (Optional)
---  @field customCSS {table?} CSS style board for custom notification design. (Optional)
---    @field customCSS.icon {table} Icon styling, such as color or scaling.
---    @field customCSS.title {table} Title styling, such as font or size.
---    @field customCSS.description {table} Stylization of the description, such as font thickness.
---    @field customCSS.background {table} Background styling, such as color and border.
---    @field customCSS.background_glow {table} Styling the background glow effect.
--- @param keys {table?}
local question = exports['vms_notifyv2']:Question(data, keys)

You don't need to enter the keys parameter - if it is not available, the default keys from Config.DefaultQuestionKeys will be activated, i.e. Y for accept, N for reject.

Explanation

The use of parameters

local question = exports['vms_notifyv2']:Question({
    title = "example",
    description = "example",
    color = "#673feb",
    icon = "fa-solid fa-circle-question",
    image = "https://i.ibb.co/YdXQKY8/500x500.png",
    preset = "transparent",
    soundFile = "notification_3.mp3",
    soundVolume = 50,
    soundNative = {-1, 'Checkpoint_Hit', 'GTAO_FM_Events_Soundset', 0},
    customCSS = {
        icon = {
            ['scale'] = "1.08",
        },
        title = {
            ['text-shadow'] = "none",
        },
        description = {
            ['text-shadow'] = "none",
        },
        background = {},
        background_glow = {},
    },
}, {
    {
        displayKey = "Y",
        description = "Accept",
        control = 246
    },
    {
        displayKey = "N",
        description = "Reject",
        control = 306
    },
    {
        displayKey = "X",
        description = "I don't know",
        control = 73
    }
})

Citizen.Await(question) -- IT MUST BE HERE

if question == "246" then -- export returns clicked control as string!
    print('PLAYER ACCEPTED')
elseif question == "73" then
    print('THE PLAYER DOES NOT KNOW.')
else
    print('PLAYER REJECTED')
end
A simple example of use
local question = exports['vms_notifyv2']:Question({
    title = "Enter to house",
    description = "Do you want to enter the house?",
    color = "#673feb",
    icon = "fa-solid fa-circle-question",
}, {
    {
        displayKey = "Y",
        description = "Accept",
        control = 246
    },
    {
        displayKey = "N",
        description = "Reject",
        control = 306
    },
    {
        displayKey = "X",
        description = "I don't know",
        control = 73
    }
})

Citizen.Await(question) -- IT MUST BE HERE

if question == "246" then -- export returns clicked control as string!
    print('PLAYER ACCEPTED')
elseif question == "73" then
    print('THE PLAYER DOES NOT KNOW.')
else
    print('PLAYER REJECTED')
end

ShowTextUI

--- @param message {string} Message
--- @param data {table?}
---  @field preset {string?} Name of the predefined preset from Config.QuestionsPresets. (Optional)
---  @field soundFile {string?} The name of the audio file, such as "notification-1.mp3". (Optional)
---  @field soundVolume {number?} Sound volume (range: 0-100). (Optional)
---  @field soundNative {table?} An array of native sound data that takes priority over soundFile. (Optional)
---  @field customCSS {table?} CSS style board for custom notification design. (Optional)
---    @field customCSS.key {table} Key styling, such as font or size.
---    @field customCSS.message {table} Stylization of the message, such as font thickness.
---    @field customCSS.background {table} Background styling, such as color and border.
exports['vms_notifyv2']:ShowTextUI(message, data)
Explanation

The use of parameters

exports['vms_notifyv2']:ShowTextUI("message", {
    soundFile = "notification-5.mp3",
    soundVolume = 30,
    soundNative = {-1, 'Checkpoint_Hit', 'GTAO_FM_Events_Soundset', 0}, -- This parameter has priority over soundFile
    customCSS = {
        key = {
            ['font-weight'] = '500'
        },
        message = {
            ['font-weight'] = '500'
        },
        background = {
            ['background'] = "red",
            ['border'] = 'none'
        }
    },
})
Example of use in your scripts
Citizen.CreateThread(function()
    local inRange = false
    local shown = false
    local letSleep = true
    while true do
        letSleep = true
        inRange = false
        local myCoords = GetEntityCoords(PlayerPedId())
        local coords = vector3(0.0, 0.0, 0.0)
        local distance = #(myCoords - coords)
        if distance <= 10.0 then
            letSleep = false
            if distance <= 2.5 then
                inRange = "Press ~INPUT_CONTEXT~ to enter"
                if IsControlJustPressed(0, 38) then
                    -- your action
                end
            end
        end
        if inRange and not shown then
            shown = true
            exports['vms_notifyv2']:ShowTextUI(inRange)
        elseif not inRange and shown then
            shown = false
            CL.TextUI.Close()
        end
        Citizen.Wait(letSleep and 1000 or 1)
    end
end)

UpdateTextUI

--- @param message {string} Message
exports['vms_notifyv2']:UpdateTextUI(message)

HideTextUI

exports['vms_notifyv2']:HideTextUI()

Last updated