# Custom menu

If you want to use a custom menu of your own to handle hostaging options, it's totally possible! Currently we offer two kinds of menu style "built-in" and "ox". If you're looking to implement something of your own it's still possible however you're going to require of some basic coding skills.

Head to of_hostage/shared.lua and select between the possible options.

-- ...
  shared.menu_style = "built-in" -- built-in, ox, custom

Head to of_hostage\client\modules\nui\custom\ox.lua as an example. If the resource was found then this file will be added as a preferred nui handler, if something messes up then we'll default to the built-in menu. You'll find something like this:

Nui.customHandler["ox"] = Client.DependStatus.lib == "ox_lib" and shared.menu_style == "ox" and
(function()
  local ctx = {
    id = Nui.context,
    title = "Hostage menu",
    canClose = true,
    onExit = Nui.closeMenu,
    onBack = Nui.closeMenu,
    options = {}
  }

  local function buildOptionsWithFlags(flags, options)
    local aux = {}

    for i = 1, #options do
      local iFlag = options[i]
      local isHidden = lib.table.contains(flags, iFlag)
      if isHidden then goto continue end

      table.insert(aux, {
        title = Client.T(iFlag),
        onSelect = function()
          TriggerEvent("of-hostage:handleOption", { action = { id = iFlag } })
          Nui.closeMenu()
        end,
      })

      :: continue ::
    end

    return #aux ~= 0 and aux or {
      title = "No options found"
    }
  end


  return {
    openMenu = function(flags)
      local newCtx = lib.table.deepclone(ctx)
      newCtx.options = buildOptionsWithFlags(flags, Nui.flagList)

      lib.registerContext(newCtx)
      lib.showContext(Nui.context)
    end,
  }
end)()

If you decided to implement your custom menu you'll need to take a few details into account. Obviously, set shared.menu_style to custom in the script config (shared.lua).

In order to control which options are displayed and which actions we'll be dispatching we send flags to the NUI

Nui.flagList = { 
  "cuff", "uncuff", "grab", "grab_stop", 
  "follow", "follow_stop", "car_in", "car_out",
  "knees", "knees_stop", "carry", "carry_stop",
  "dead_rob", "free", "no_hostage"
}

The implementation is up to you, just make sure to send the correct flag when an item is selected.

In this case, we'll be sending an event to the client with the selected flag. Since we're not using the built-in menu, you should manually close the menu so during-menu threads are killed.

It should look something like this:

(function()
  TriggerEvent("of-hostage:handleOption", { action = { id = "my_flag_to_handle" } })
  Nui.closeMenu() -- Really important, otherwise you'll get into issues
end)()

Essentially, what we're doing is indexing a "custom" handler inside Nui.customHandler so we must return a table that looks like this in order to make it work properly:

Nui.customHandler["custom"] = (function()
  -- single-time-executed-code?
  return {
    openMenu = function(flags)
      -- your code
    end
  }
end)()