[How-To] Use NUI (UI Creation with HTML)

FiveM Resource Development & Modding Modding Tutorials
42

Is it possible to allow user using voice chat (press N) when NUI is focus?
I used this command:
SetNuiFocus(true, true)

43

Has anyone had the issue where if you press ‘T’ to open the chat resource text box, the text box gets stuck and you can’t type in it. However, when I open my own custom NUI it allows me to type in it and close it. However pressing T when my own NUI isn’t open freezes it.

1 Like
44

hey can someone help me out, I know html etc but im having trouble adding images to the index.html is it different than if you make a normal site?

45

I got it working now but I want to link other html pages to a link but when i do that the nui closes and Yes ive added the other html file to the resource file help me pls

46

How is the funtion or the Register to close the ui

47

hi, everyone is it possible to load a file from my webpack-dev-server running separately?
just for development purposes,
webpack-dev-server is running on https://127.0.0.1:9334
and i have this next line in my resource->index.html which does not seem to work
<script type="text/javascript" src="https://127.0.0.1:9334/Browser/index.js" />
when i change the line to:
<script type="text/javascript" src="https://${myDomain}/Browser/index.js" />
it does work but i want to have a local development environment as well :slight_smile:

48

Hey! Im using NUI to make a nice gui but when i use a hyperlink, it doesn’t open the gui but it just closes the gui and the cursor is still there. How do i fix this issue? And here is the code:

LÆGE

POLITI

49

you need >

SetNuiFocus(false, false)

after closeing your nui.

50

you can’t use local address as its a client side script and no one has your nui stuff on their local root :smiley:

51

But the problem is when i use the hyperlink, to redirect me to another html script, it doesn’t do it it just closes. Do you got a fix for that?

52

This post needs to be updated. If you are using fx_version cerulean (and possibly above in the future), your NUI callbacks need to use https instead of http.

53

I did that in the past, I used something along the lines of

location.replace("nui://resource_name/path/to/your/pageName.html");

With the root being the resource’s root.

However I’m no longer doing that, I now prefer to hide and display divs by changing their attributes.

54

And do i do that in js or html? Or in the ?

55

in the <a

56

Or do i make a button?

57

Its possible disable chat when has UI enabled? Because key bind works when it is enabled, so I want “lock” chat when has UI enabled.

58

It’s a Javascript function, you do that in the frontend / NUI part. As to where exactly you want the page to change it’s up to you.

59

Hmmm it doesn’t seem to work. Im gonna type the code right here:

<script>
  function redirectToLogin() {
    location.replace("nui://tablet/html/index4.html");
  }
</script>

<button onclick="redirectToLogin()" class="button">POLITI</button>

What is wrong with it? Or is there something wrong with it?

60

My frontend is receiving a message, but not with the JSON object I’ve sent?

My backend client.js calls:

SendNuiMessage(JSON.stringify({type: 'show', action: 'show', user: user}))

My frontend has the following code:

window.addEventListener('message', function(event) {
  console.log('event', event)
  console.log(JSON.stringify(event)
  console.log(event.data)
  console.log(event.data.action)
})

Which results in:

event [object MessageEvent] @ts-fivem-template/dist/ui/main.js:39
{"isTrusted": true} @ts-fivem-template/dist/ui/main.js:39
undefined @ts-fivem-template/dist/ui/main.js:39
Uncaught TypeError: Cannot read property 'action' of undefined (@ts-fivem-template/dist/ui/main.js:39)

No matter what I change the SendNuiMessage() call to, the message is always received on the frontend as {"isTrusted": true}

61

Use the NUI debug tools: F8 → Tools → NUI tools → Open dev tools
Use the browser console instead of the native console for debugging NUI.