Modern UI

Quick Start

exports.lation_ui:showTimeline({
    id = 'my_mission',
    title = 'Mission Objectives',
    tasks = {
        { id = 'task1', label = 'First objective', status = 'completed' },
        { id = 'task2', label = 'Current objective', status = 'active' },
        { id = 'task3', label = 'Next objective', status = 'pending' }
    }
})

Functions

showTimeline

Display a timeline with tasks to the player.

exports.lation_ui:showTimeline(data)

Parameters:

data (table) - Timeline configuration object (see Options)

Only one timeline can be active at a time. Showing a new timeline will automatically hide any existing timeline.

hideTimeline

Hide a specific timeline.

exports.lation_ui:hideTimeline(id)

Parameters:

id (string) - Unique identifier of the timeline to hide

Timeline state is not preserved when hidden. You must pass the full configuration when showing again.

updateTimelineTask

Update one or multiple task statuses.

-- Single task update
exports.lation_ui:updateTimelineTask(timelineId, taskId, status)

-- Multiple tasks update (recommended for sequential progression)
exports.lation_ui:updateTimelineTask(timelineId, tasksArray)

Parameters (Single Task):

timelineId (string) - Unique identifier of the timeline
taskId (string) - Unique identifier of the task to update
status (string) - New status: 'pending', 'active', 'completed', 'failed'

Parameters (Multiple Tasks):

timelineId (string) - Unique identifier of the timeline
tasksArray (table) - Array of task objects with id and status properties

addTimelineTask

Add a new task to an existing timeline.

exports.lation_ui:addTimelineTask(timelineId, task)

Parameters:

timelineId (string) - Unique identifier of the timeline
task (table) - Task object (see Tasks)

updateTimeline

Update timeline properties (title, description, icon, etc.).

exports.lation_ui:updateTimeline(timelineId, updates)

Parameters:

timelineId (string) - Unique identifier of the timeline
updates (table) - Object containing properties to update (see Options)

getActiveTimeline

Get the ID of the currently active timeline.

local timelineId = exports.lation_ui:getActiveTimeline()

Returns:

timelineId (string | nil) - The ID of the active timeline, or nil if none is active

Configuration

Options

string

required

Unique timeline identifier

string

required

Timeline title (supports markdown)

string

Timeline description (supports markdown)

string

default:"right-center"

Timeline position on screenAvailable options: 'top-left', 'top-center', 'top-right', 'left-center', 'center', 'right-center', 'bottom-left', 'bottom-center', 'bottom-right'

string

FontAwesome icon class

string

default:"#71717A"

Icon color (hex or CSS color name)

string

Icon animation typeAvailable options: 'spin', 'spinPulse', 'spinReverse', 'pulse', 'beat', 'fade', 'beatFade', 'bounce', 'shake'

table

required

Array of task objects (see Tasks)

number

default:"1.0"

Background opacity (0.0-1.0)

Tasks

Each task object in the tasks array supports:

string

required

Unique task identifier

string

required

Task display text (supports markdown)

string

Task description (supports markdown)

string

required

Task statusAvailable options: 'pending', 'active', 'completed', 'failed'

string

FontAwesome icon class

Overrides default status icon

string

Icon color (hex or CSS color name)

Automatically determined by task status if not specified

string

Icon animation type

Custom task icons do not auto-animate unless iconAnimation is explicitly set

Examples

-- Show a timeline with mission tasks
exports.lation_ui:showTimeline({
    id = 'heist_mission',
    title = 'Bank Heist',
    description = 'Complete all objectives to finish the heist',
    position = 'right-center',
    icon = 'fas fa-mask',
    iconColor = '#EF4444',
    opacity = 0.95,
    tasks = {
        { 
            id = 'gear', 
            label = 'Acquire equipment', 
            description = 'Get supplies from the warehouse',
            status = 'completed'
        },
        { 
            id = 'hack', 
            label = 'Hack security system', 
            description = 'Disable cameras and alarms',
            status = 'active'
        },
        { 
            id = 'vault', 
            label = 'Access the vault', 
            status = 'pending'
        },
        { 
            id = 'escape', 
            label = 'Escape the area', 
            status = 'pending'
        }
    }
})

-- Update one task when objective is completed
exports.lation_ui:updateTimelineTask('heist_mission', 'hack', 'completed')

-- Update multiple tasks at once (recommended for sequential progression)
exports.lation_ui:updateTimelineTask('heist_mission', {
    { id = 'hack', status = 'completed' },
    { id = 'vault', status = 'active' }
})

-- Add a new task dynamically
exports.lation_ui:addTimelineTask('heist_mission', {
    id = 'bonus',
    label = 'Bonus objective',
    description = 'Collect additional loot',
    status = 'pending',
    icon = 'fas fa-star',
    iconColor = '#F59E0B'
})

-- Update timeline properties (e.g., completion message)
exports.lation_ui:updateTimeline('heist_mission', {
    description = 'Heist Complete! +$50,000'
})

-- Hide timeline when mission ends
exports.lation_ui:hideTimeline('heist_mission')

Weed

Coke

Meth

Chop Shop

Shops Creator

Money Laundering

Metal Detecting

Scuba Diving

Drug Sales

Interact

Modern UI - Timeline

Quick Start

Functions

Configuration

Options

Tasks

Examples

Preview

​Quick Start

​Functions

​Configuration

​Options

​Tasks

​Examples

​Preview

Quick Start

Functions

Configuration

Options

Tasks

Examples

Preview