Interfaces: menus, inputs and NUI · Lesson 1/3 · 9 min

Menus and forms with qb-menu and qb-input

The fastest way to have menus in QBCore without writing HTML: qb-menu for lists and qb-input for forms.

Before building your own NUI, QBCore gives you two ready-made resources: qb-menu (option menus) and qb-input (forms). For 80% of cases this is enough.

A menu with qb-menu

lua

-- client.lua
exports['qb-menu']:openMenu({
  { header = 'Mechanic workshop', isMenuHeader = true },
  {
    header = 'Repair vehicle',
    txt = 'Costs $500',
    params = { event = 'mecanico:client:reparar' },
  },
  {
    header = 'Close',
    params = { event = 'qb-menu:client:closeMenu' },
  },
})

qb-menu

A form with qb-input

lua

local dialog = exports['qb-input']:ShowInput({
  header = 'Transfer money',
  submitText = 'Send',
  inputs = {
    { type = 'number', name = 'cantidad', text = 'Amount', isRequired = true },
  },
})

if dialog and dialog.cantidad then
  local cantidad = tonumber(dialog.cantidad)
  TriggerServerEvent('banco:server:transferir', cantidad)
end

qb-input

The menu and the input are ONLY interface. What the player chooses is sent to the server via an event, and the server validates and executes. Never trust what comes back from the input.

Practice what you learned

0/3

Test

¿Qué te resuelven qb-menu y qb-input sin tener que escribir HTML?

Rellena los huecos

Completa el export que abre un menú de qb-menu con una cabecera.

1exports['qb-menu']:({

2 { header = 'Tienda', isMenuHeader = true },

3 { header = 'Comprar', txt = '', params = { event = 'mi:evento', args = { item = 'water' } } },

4})

Pista

Es el método que recibe el array de opciones del menú.

Corrige el error

Este qb-input no devuelve nada al alumno. Falta guardar lo que devuelve ShowInput en una variable para poder leer la cantidad.

Este código tiene un fallo:

1exports['qb-input']:ShowInput({

2 header = 'Cantidad',

3 submitText = 'OK',

4 inputs = { { name = 'cantidad', type = 'number', text = '¿Cuántos?' } },

5})

6print(dialog.cantidad)

Reescríbelo corregido:

Pista

ShowInput DEVUELVE una tabla con los valores; tienes que capturarla con 'local dialog = ...'.

Challenge: code it yourself

Make a qb-menu with two options (Deposit, Withdraw) that fire their respective client events.

Write it yourself in your editor (VS Code) and test it on your server. You learn here by doing it, not by copying.

See hint

exports['qb-menu']:openMenu with an array of { header, params = { event = '...' } }.

Escribe aquí tu solución:

Next: ox_lib: the modern alternative

How was this lesson?