UI Builder

The following section provides a simple guide on how to use the cores built in UI builder to create UI elements for both internal additions or external scripts.

Q & A

What is the "UI Builder"?

The UI Builder is a built-in framework feature to streamline the creation user interfaces.

It includes:

• Core Structure:

  • Header with image/data section on left, centralised tabs with key functions, and a right data section.

  • A flexible body content section.

  • Footer with actions keypress support.

• Content Templates:

  • Pre-designed layouts such as slot inventories, tables, forms, lists, and input groups.

• Developer Access:

  • Fully accessible via exports, allowing external use to create matching interfaces.

Why use the UI Builder instead of custom UIs?

The UI Builder provides a fast, consistent, and accessible solution for creating a variety of user interfaces. It currently only covers a few things but what it covers can be used for a vast array of scripts if you have the imagination.

• Uniform Design:

  • Ensures all UI elements have a consistent look.

• Time Efficiency:

  • Prebuilt templates reduce the time spent on UI development.

• Ease of Use:

  • Designed to be simple and accessible.

• Flexibility:

  • Supports a wide range of templates, like slot inventories, forms, and lists.

Can the UI Builder be used in external scripts?

Yes, the UI Builder can be used in external scripts.

It is fully accessible via exports and NUI calls are posted to the invoking resource, allowing developers to create and manage UI elements outside the core using a data object.

Think of how a "context menu" works, only bigger.

Always add proper validation to any incoming data received from the client when interacting with the server to avoid bad actors!

What types of UI elements can I create with the builder?

The UI Builder supports a variety of UI components, including:

• Lists: For displaying items like rules or information in a styled <li> format.

• Tables: Used for structured data, like displaying statuses (e.g., Health: 200).

• Slot Inventory: A slot-based inventory system integrated into the framework.

• Input Groups: A collection of inputs (text or numbers) with optional increment/decrement buttons, currently used to create the cores character customisation.

• Cards: Highly customizable elements with images, headers, descriptions, hover tooltips, and action buttons. Used for character selection, banking, and roles display.

Do I need prior experience with HTML/CSS to use the builder?

No.

The UI Builder works from a standard data table input. You can create a UI externally from any code base utilising FiveM's exports.

It functions essentially the same way as draw text ui, context menus, etc. Create a table, send it through the export, the builder does the rest.

How do I include the UI Builder in my script?

For a quick start you can refer to the API information HERE

For more detailed information on creating UI elements continue through the guide.

Is the UI Builder customizable?

Everything's is customizable provided you understand how. The builder is entirely native html/js/css so modifications should be easy for those with basic front end skills to create their own look.

If you just want to change the colour palette of the existing UI you can do so within the root.css file. For more information on this read on.

Will the UI Builder include additional elements in the future?

Most likely.

As more external resources are created to work with the core if the need arises for new templated elements then they will be added.

One planned addition is a grid based inventory to provide an alternate option for those who do not want a traditional slot based system, however this might be some time yet.

Templates

cards

input groups

lists

slot inventory

tables