Functions

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

Notify

Client-Side

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

Server-Side

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

Client-Side

-- 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)

Server-Side

-- 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 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, title, icon)
    exports["is_ui"]:Notify(title or nil, text or "Example Message", tonumber(duration), style or "info", icon or nil)
end

OX Library

ox_lib -> resource -> interface -> client -> notify.lua

function lib.notify(data)
    local title = data.title or nil
    local message = data.description or nil
    local duration = data.duration or nil
    local style = data.type or nil
    local icon = data.icon or nil

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

Progress Bar

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

Activate

exports["is_ui"]:ProgressBar(data)

Cancel

exports["is_ui"]:cancelProgressBar()

Is Active

exports["is_ui"]:IsProgressBarActive()

• 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: indexed table or nil

    • hash: string

    • bone: number or nil

      • default: 60309

    • position: table

      • x: number

        • default: 0.0

      • y: number

        • default: 0.0

      • z: number

        • default: 0.0

    • rotation: table

      • x: number

        • default: 0.0

      • y: number

        • default: 0.0

      • z: number

        • default: 0.0

  • 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 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 then
        prop[1] = {
            hash = prop.model,
            bone = prop.bone or nil,
            position = prop.coords or nil,
            rotation = prop.rotation or 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 then
        prop[1] = {
            hash = Options.prop.hash,
            bone = Options.prop.bone or nil,
            position = Options.prop.position or nil,
            rotation = Options.prop.rotation or nil,
        }
    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

OX Library

ox_lib -> resource -> interface -> client -> progress.lua

function lib.progressBar(data)
    local prop, animation, scenario

    if data.prop and data.prop[1] then
        prop = {}

        for _, v in ipairs(data.prop) do
            table.insert(prop, {
                hash = v.model,
                bone = v.bone,
                position = v.pos and {
                    x = v.pos.x,
                    y = v.pos.y,
                    z = v.pos.z,
                } or {},
                rotation = v.rot and {
                    x = v.rot.x,
                    y = v.rot.y,
                    z = v.rot.z,
                } or {},
            })
        end
    elseif data.prop and data.prop.model then
        prop = {}

        prop[1] = {
            hash = data.prop.model,
            bone = data.prop.bone,
            position = data.prop.pos and {
                x = data.prop.pos.x,
                y = data.prop.pos.y,
                z = data.prop.pos.z,
            } or {},
            rotation = data.prop.rot and {
                x = data.prop.rot.x,
                y = data.prop.rot.y,
                z = data.prop.rot.z,
            } or {},
        }
    end

    if data.anim and data.anim.dict and data.anim.clip then
        animation = {
            dict = data.anim.dict,
            anim = data.anim.clip,
            blendIn = data.anim.blendIn,
            blendOut = data.anim.blendOut,
            duration = data.anim.duration,
            flag = data.anim.flag,
            playbackRate = data.anim.playbackRate,
            lockX = data.anim.lockX,
            lockY = data.anim.lockY,
            lockZ = data.anim.lockZ,
        }
    elseif data.anim and data.scenario then
        scenario = {
            name = data.anim.scenario,
            enterAnim = data.anim.playEnter,
        }
    end

    local data = {
        title = data.label,
        icon = data.icon,
        duration = data.duration,
        useWhileDead = data.useWhileDead,
        canCancel = data.canCancel,
        prop = prop,
        animation = animation,
        scenario = scenario,
        disable = data.disable,
    }

    return exports["is_ui"]:ProgressBar(data)
end

function lib.progressCircle(data)
    return lib.progressBar(data)
end

function lib.cancelProgress()
    exports["is_ui"]:cancelProgressBar()
end

function lib.progressActive()
    return exports["is_ui"]:IsProgressBarActive()
end