Create an application 🖼️

info

For this guide, let's assume that the new application that we want to create is "hello-world"

• Go in the nui/scripts/configs/applications.js file.
• Add a new key (it will be the command name) appCode template:

<div id="app-{APP-KEY}-world" class="application">
    <h1 id="app-{APP-KEY}-title"><button id="{APP-KEY}-quit" class="app-exit"></button><button id="{APP-KEY}-minimize" class="app-minimize"></button>{Title}</h1>
    <div id="{APP-KEY}-wrapper"></div>
</div>`

Example with our hello-world app:

const Applications = {
    // ...
    "hello-world": {
            usable: true, // (optional)
            width: 300, // (optional)
            height: 200, // (optional)
            hide: false, // (optional: will hide the app from the desktop)
            appCode: `
    <div id="app-hello-world" class="application">
        <h1 id="app-hello-world-title"><button id="hello-world-quit" class="app-exit"></button><button id="hello-world-minimize" class="app-minimize"></button>Command Prompt</h1>
        <div id="hello-world-text"></div>
    </div>`
    // ...
}

• If your application is not hidden (hide: false) then you have to add an icon:

  • 64x64 size
  • PNG format
  • app key as name (in our case hello-world.png)

• To create locale for your application you can add a key at locales/locales.js for all languages

• You should always load the locales when the NUI message of type show is sended to follow the user's language setting (at nui/scripts/script.js)

window.addEventListener("message", (event) => {
    if (event.data.type === "show") {
        // ...
        document.getElementById("hello-world-text").innerText = GetLocale("hello_world_text")
        // ...
    }
    // ...
}

info

To create advanced applications, you should take example from existing ones such as the market/mail application.