Getting started

This section covers tm.ui.window: schema driven windows for screens of your own. For the ready made widgets (notifications, text prompts, confirm and form dialogs, menus, progress bars, skill checks) see the interface docs.

1. Wire up your resource

A window built from a schemaOpen full size

-- fxmanifest.lua
lua54 'yes'
dependencies { 'ox_lib', 'tm_lib' }
shared_scripts { '@ox_lib/init.lua', '@tm_lib/init.lua' }
ui_page 'https://cfx-nui-tm_lib/ui-windows/dist/index.html'

That's the whole setup. @tm_lib/init.lua defines the global tm and tm.ui loads on first use inside your resource. Your resource has no ui/ folder, no build step and no files entries for the page.

• tm_lib (and ox_lib) must be started before your resource: ensure tm_lib first.
• A resource has exactly one ui_page. If yours already has its own custom page, it can't also use this. tm_lib's own interface (notifications, dialogs, menus, progress) keeps working either way, because it is a separate page that only tm_lib uses.

2. Open a window

local win = tm.ui.window({
    id = 'greeter',                      -- optional; generated when omitted
    title = 'Say hello',
    children = {
        { type = 'input', path = 'name', label = 'Your name', rules = { required = true } },
    },
    footer = {
        { type = 'button', label = 'Greet', event = 'greet', submit = true, close = true, variant = 'primary' },
    },
})

win:on('greet', function(data)
    print('Hello ' .. data.values.name)
end)

3. Or just await it

local values = tm.ui.window(schema):wait()
if not values then return end   -- dismissed with Escape or the X
print(values.name)

:wait() blocks the calling thread until a submit = true button is pressed (returns the field values) or the window is dismissed/closed (returns nil).

4. Update it while it's open

win:set('name', 'Jane')                       -- change a field value
win:setNode('status', { text = 'Saved' })     -- change props of the node with id = 'status'
win:update(newSchema)                          -- re-render the whole window in place
win:close()

Concepts

• Schema: plain Lua data describing the window. No functions inside it (they can't be sent to the page).
• path: fields store their value under a flat dotted key (user.name). values = { user = { name = 'x' } } is flattened for you.
• Events: the page tells Lua about clicks, submits, menu choices and (opt-in) field changes. See events.
• Focus: taken when the first window opens and released when the last one closes.

Next: Lua API · Schema reference · Events · Menus · Examples