Functions

Here you will find functions and example code on how to use our Notifications or Progress Bar.

Notify

exports["is_ui"]:Notify(title, message, duration, style, icon)

TriggerClientEvent("is_ui:Notify", playerId, title, message, duration, style, icon)

title: string or nil
message: string
duration: number or nil
style: string or table
icon: string or nil

Example Usage

-- Example 1: Using Predefined Style
exports["is_ui"]:Notify("Test", "Lorem ipsum <span>adipiscing elit</span>.", 5000, "info")

-- Example 2: Using Predefined Style with Custom Icon
exports["is_ui"]:Notify("Test", "Lorem ipsum adipiscing elit.", 5000, "info", "fa-regular fa-thumbs-up")

-- Example 3: Using Custom Style
local style = {
    icon = "fa-solid fa-sack-dollar",
    primaryColor = "#FF425D",
    backgroundIcon = { from = "#FC3955", to = "#861A20" },
    sound = { play = true, type = "notifySound6", volume = 5 }
}

exports["is_ui"]:Notify("Test", "Lorem adipiscing elit.", 5000, style)

-- Example 1: Using Predefined Style
TriggerClientEvent("is_ui:Notify", source, "Test", "Lorem ipsum <span>adipiscing elit</span>.", 5000, "info")

-- Example 2: Using Predefined Style with Custom Icon
TriggerClientEvent("is_ui:Notify", source, "Test", "Lorem ipsum adipiscing elit.", 5000, "info", "fa-regular fa-thumbs-up")

-- Example 3: Using Custom Style
local style = {
    icon = "fa-solid fa-sack-dollar",
    primaryColor = "#FF425D",
    backgroundIcon = { from = "#FC3955", to = "#861A20" },
    sound = { play = true, type = "notifySound6", volume = 5 }
}

TriggerClientEvent("is_ui:Notify", "Test", "Lorem adipiscing elit.", 5000, style)

Default Framework Notifications

To quickly change default Notifications, go to the given file and replace the functions to call our export.

QBCore

qb-core -> client -> functions.lua

function QBCore.Functions.Notify(text, style, duration, icon, title)
    local title = title or nil
    local icon = icon or nil

    if style == "primary" then style = "info" end

    exports["is_ui"]:Notify(title, text, tonumber(duration), style, icon)
end

ESX

es_extended -> client -> functions.lua

function ESX.ShowNotification(text, style, duration, icon)
    local title = title or nil
    local icon = icon or nil

    exports["is_ui"]:Notify(title, text, tonumber(duration), style, icon) 
end

Progress Bar

The Progress Bar can only be invoked on the Client-Side!

exports["is_ui"]:ProgressBar(data)

exports["is_ui"]:cancelProgressBar()

data: table
- title: string
- icon: string or nil
  - default: fa-solid fa-user
- duration: number or nil
  - default: 5000
- useWhileDead: boolean or nil
  - default: false
- canCancel: boolean or nil
  - default: false
- prop: table or nil
  - hash: string
  - bone: number or nil
    default: 60309
  - position: table
    x: number
    y: number
    z: number
  - rotation: table
    x: number
    y: number
    z: number
- animation: table or nil
  - dict: string
  - anim: string
  - blendIn: number or nil
    default: 3.0
  - blendOut: number or nil
    default: 3.0
  - duration: number or nil
    default: -1
  - flag: number or nil
    default: 49
  - playbackRate: number or nil
    default: 0
  - lockX: boolean or nil
    default: false
  - lockY: boolean or nil
    default: false
  - lockZ: boolean or nil
    default: false
- scenario: table or nil
  - name: string
  - enterAnim: boolean or nil
    default: true
- disable: table or nil
  - move: boolean or nil
    default: false
  - car: boolean or nil
    default: false
  - combat: boolean or nil
    default: false
  - mouse: boolean or nil
    default: false
  - sprint: boolean or nil
    default: false

Example Usage

-- Example 1: Simple operation

local status = exports["is_ui"]:ProgressBar({
    title = "Test",
    icon = "fa-solid fa-user",
    duration = 5000,
    useWhileDead = false,
    canCancel = false,
    animation = {
        dict = "amb@prop_human_movie_bulb@base",
        anim = "base",
    },
})

if status == true then
    print("done")
elseif status == false then
    print("cancel")
end

-- Example 2: Advanced operation

local status = exports["is_ui"]:ProgressBar({
    title = "Test",
    icon = "fa-solid fa-user",
    duration = 5000,
    useWhileDead = false,
    canCancel = false,
    prop = {
        hash = "bkr_prop_weed_lrg_01b",
        bone = 60309,
        position = {x = 0.0, y = 0.0, z = 0.0},
        rotation = {x = 0.0, y = 0.0, z = 0.0}
    },
    animation = {
        dict = "amb@prop_human_movie_bulb@base",
        anim = "base",
        blendIn = 3.0,
        blendOut = 3.0,
        duration = -1,
        flag = 0,
        playbackRate = 0,
        lockX = false,
        lockY = false,
        lockZ = false
    },
    -- scenario = {
    --     name = "WORLD_HUMAN_PAPARAZZI",
    --     enterAnim = true
    -- },
    disable = {
        move = true,
        car = true,
        combat = true,
        mouse = true,
        sprint = true
    },
})

if status == true then
    print("function done")
elseif status == false then
    print("function cancel")
end

Default Framework Progress Bar

To quickly change default Progress Bar, go to the given file and replace the functions to call our export.

QBCore

qb-core -> client -> functions.lua

function QBCore.Functions.Progressbar(name, label, duration, useWhileDead, canCancel, disableControls, animation, prop, propTwo, onFinish, onCancel, icon)
    if prop and prop.model and (prop.coords and prop.coords.x and prop.coords.y and prop.coords.z) and (prop.rotation and prop.rotation.x and prop.rotation.y and prop.rotation.z) then
        prop = {
            hash = prop.model,
            bone = prop.bone or nil,
            position = prop.coords,
            rotation = prop.rotation
        }
    else
        prop = nil
    end

    if animation and animation.task then
        local scenario = {
            name = animation.task,
            enterAnim = true
        }
        animation = nil
    elseif animation and animation.animDict and animation.anim then
        animation = {
            dict = animation.animDict,
            anim = animation.anim,
            blendIn = animation.blendIn,
            blendOut = animation.blendOut,
            duration = animation.duration,
            flag = animation.flags,
            playbackRate = animation.playbackRate,
            lockX = animation.lockX,
            lockY = animation.lockY,
            lockZ = animation.lockZ
        }
    end

    if type(disableControls) == "table" then
        local disable = {
            move = disableControls.disableMovement,
            car = disableControls.disableCarMovement,
            combat = disableControls.disableCombat,
            mouse = disableControls.disableMouse,
            sprint = disableControls.disableSprint
        }
    end

    local status = exports["is_ui"]:ProgressBar({
        title = label,
        icon = icon,
        duration = duration,
        useWhileDead = useWhileDead,
        canCancel = canCancel,
        prop = prop,
        animation = animation,
        scenario = scenario,
        disable = disable
    })

    if status == true then  
        if onFinish then
            onFinish()
        end
    elseif status == false then
        if onCancel then
            onCancel()
        end
    end
end

ESX

es_extended -> client -> functions.lua

function ESX.Progressbar(title, duration, Options)
    if Options.prop and Options.prop.hash and (Options.prop.position and Options.prop.position.x and Options.prop.position.y and Options.prop.position.z) and (Options.prop.rotation and Options.prop.rotation.x and Options.prop.rotation.y and Options.prop.rotation.z) then
        local prop = Options.prop
    end

    if Options.animation and Options.animation.type == "Scenario" then
        local scenario = {
            name = Options.animation.Scenario,
            enterAnim = Options.animation.enterAnim
        }
    elseif Options.animation and Options.animation.type == "anim" then
        local animation = {
            dict = Options.animation.dict,
            anim = Options.animation.lib,
            blendIn = Options.animation.blendIn,
            blendOut = Options.animation.blendOut,
            duration = Options.animation.duration,
            flag = Options.animation.flag,
            playbackRate = Options.animation.playbackRate,
            lockX = Options.animation.lockX,
            lockY = Options.animation.lockY,
            lockZ = Options.animation.lockZ
        }
    end

    if Options.disable and type(Options.disable) == "table" then
        local disable = Options.disable
    end

    local status = exports["is_ui"]:ProgressBar({
        title = title,
        icon = Options.icon,
        duration = duration,
        useWhileDead = Options.useWhileDead,
        canCancel = Options.canCancel,
        prop = prop,
        animation = animation,
        scenario = scenario,
        disable = disable
    })

    if status == true then  
        if Options.onFinish then
            Options.onFinish()
        end
    elseif status == false then
        if Options.onCancel then
            Options.onCancel()
        end
    end
end

Last updated 8 days ago