1

NUI Dialog Box for FiveM [Standalone]

thumb
thumb1681×869 70.4 KB

[an_dialogBox]

An immersive dialog box with sounds and a simple but beautiful UI.
I created this because of the very few options available out there.
Using this utility will open a whole world of possibilities for your server and make your FiveM scripting easier.

:warning: This script is intended for advanced users who know a bit about coding.

Preview:

image

Installation:

  • Download this and put it inside your resources folder
  • Add this to your server.cfg: start an_dialogBox

Usage:

Add this somewhere in your script where you wanna trigger the dialog box:

exports['an_dialogBox']:showDialog(name, label, input, help, submitFunc, cancelFunc)
  • name [REQUIRED]
    A unique name for your dialog. It can also be used to prevent people from injecting stuff into the dialog box with the NUI Dev Tools
  • label [REQUIRED]
    The text that’s gonna be shown as the title of the dialog form
  • input [REQUIRED]
    The default typed text inside the input ( can be empty )
  • help [REQUIRED]
    A little hint text below the text area
  • submitFunc() [REQUIRED]
    This is the function that runs once the OK button is clicked or when you click ENTER. It takes the input text typed into that form as an argument.
  • cancelFunc() [OPTIONAL]
    This is the function that runs once the Cancel button is clicked or the form is canceled. doesn’t take any arguments and can be the function that runs if the player closes or cancel the dialog box.

Debug

  • Set debugMode on line 14 of client.lua to true
  • Use /testdialog command to test the demo dialog

Example Code ( Easy to configure / Plug and Play )

You can put it inside any script and it’s gonna work:

RegisterCommand('example', function(src, args)
		exports['an_dialogBox']:showDialog('example_dialog', 'Enter your name:', '0', 'This is a hint example', onSubmit, onCancel)
end)
function onSubmit(data)
		print('You submitted the following text: ^1'..data)
end
function onCancel()
		print('CANCELED')
end

Download:

Support:

Feel free to ask questions and provide me with your code in the replies.
I’ll be glad to answer any problem and help you use this script to achieve your purpose.

My Other Releases:

:green_circle: Custom Radio Sound Effect [FREE]
:red_circle: [QB-ESX] Rob NPC Script [PAID] [6.99€]
:green_circle: [RELEASE] Useful Commands for RP | /job /cash /bank /ping /license [FREE]
:red_circle: [ESX] AFK Mode / Idle Zone [PAID] [4.99€]
:green_circle: [ESX] Ladders [FREE]
:green_circle: [FREE] Job-Based Blips Creator [ESX] [QBCore]

Tebex

7 Likes
2

Looks awesome. Great work! :slight_smile:

1 Like
3

Thanks buddy :heartpulse:

1 Like
4

Looks amazing, thank you so much!

5

greatwork :sparkling_heart:

6

Hi! I’m trying to work this out with qb-bossmenu, to withdraw and deposit money, this is the code, any help on how I could do it? :frowning:

menu_button6:On("select", function()
    local result = LocalInput('Amount', 16, '')
    if result ~= nil then
        TriggerServerEvent("qb-bossmenu:server:withdrawMoney", tonumber(result))
        UpdateSociety()
    end
end)
7

Try like this:

menu_button6:On("select", function()
	exports['an_dialogBox']:showDialog('bossdialog', 'Insert Amount:', '0', 'insert money to withdraw from society', onSubmitBoss, onCancelBoss)
end)

function onSubmitBoss(data)
	print('You submitted the following text: ^1'..data)
	TriggerServerEvent("qb-bossmenu:server:withdrawMoney", tonumber(data))
    UpdateSociety()
end
function onCancelBoss()
	print('CANCELED')
end

Not yet tested, hope works

1 Like
8

That worked! Thank you :slight_smile:

1 Like
9

Glad it worked!
Thanks for the contribution @strianodev

2 Likes
10

Good job bro

11

@SrPeter
For better results and to avoid the script resulting in errors, do this:

menu_button6:On("select", function()
	exports['an_dialogBox']:showDialog('bossdialog', 'Insert Amount:', '0', 'Insert money to withdraw from society', onSubmitBoss)
end)

function onSubmitBoss(data)
    ---- print('You submitted the following text: ^1'..data)
    local amount = tonumber(data)
    if type(amount) == 'number' and amount > 0 then
	  TriggerServerEvent("qb-bossmenu:server:withdrawMoney", math.ceil(amount))
    else
       print('Not a valid number') -- replace this with a notification if you like
    end
    UpdateSociety()
end
2 Likes
12

With this I cant withdraw anything, even If I type a number :confused:

13

I edited the code. Can you try now?

1 Like
14

Works perfect, thanks again!

1 Like
15

Great work !

16

Using this as a temp NUi for a script i’m working on, just noticed though the submit button doesn’t work even with the debug box.

17

I’ve recently done some changes, download the newest version from github.

18

Look great and works perfect. Maybe you can make a new variable for maxInput so that I can set maxInput = 9 so that I can only insert max 9 letters or numbers.
You know what I mean?

19

I usually do a check for that in the submit function with: string.len(s).

1 Like
21

UPDATED TO VERSION 1.1.0

  • Added possibility to have a text area instead of an input
  • UI design changes
  • Update is backwards compatible so you won’t be having to change any of your scripts

image
image

1 Like