Creating new apps

Here you will find a lot of information on creating new apps on our phone!

With our phone you can create your own apps with some HTML/JS/CSS/LUA development experience!

Step 1

Open html/js/config.js file located in the resource folder and find this line in it:

Config.Applications = {

And depending on how you want to have the apps ordered in the home screen, paste this code snippet after the app you want it to be after in the home screen

"Myapp": {
    label: "Example App", // App label, name used in notifications/shown on the home screen, etc.
    icon: "fas fa-circle", // A fontawesome icon name.
    icon_color: "#fff", // Color of the fontawesome icon.
    icon_image: "file.png", // You can put an image name that is in media/icons folder.
    background: ["#67ff81", "#01b41f"], // This can either be an array with two items ["color1", "color2"] or just a string "color", if its an array it'll be a gradient.
    bottom: false, // Put the app to the bottom box of the screen, set false to keep it on the home screen top.
    downloadable: true, // Add the app to home screen automatically and hide it from app store, set false to put it in app store and to not install this app automatically.
    downloadTime: 5000, // In miliseconds, 1000 ms = 1 second
    allowed_jobs: ["police", "ambulance"], // Jobs that can download this app from the app store and can open it.
    category: "social", // An example category, these can be added/removed in same config.js file.
    notifications: {
        icon: "fas fa-circle", // Notification icon
        color: "#fff" // Notification icon color
    },
    // Custom callback (a function that gets executed when you open or close the app). YOU MUST RETURN TRUE TO HAVE THE APP OPEN FOR YOU.
    customCallback: function(status) { // Status will be TRUE when the app is opened and FALSE when the app is closed (boolean type argument).
        if(status)
            console.log("Opened!");
        else
            console.log("Closed!");
        // Your app load function here, you have to change the app's DOM here, as that's when the HTML loads.
        return true; // You can return false to stop the app from opening. (When status is FALSE you don't have to return anything)
    }
},

Everything is commented and should be understandable.

Step 2

Open html/index.html file located in the resource folder with your editor [Notepad++, Visual Studio Code, etc]

Find this huge comment in the index.html file

<!------------------>
<!-- APPLICATIONS -->
<!------------------>

And under it, paste this example app template

<!-- MY EXAMPLE APP -->
<div class="myapp" id="Myapp"> <!-- MAKE SURE THE ID IS THE SAME AS THE APP'S INDEX NAME THAT YOU'VE ADDED IN Config.Applications IN THE CONFIG.JS FILE! -->
    <p class="text">Example Text</p>
    
    <div class="bottomline">
        <div></div>
    </div>
</div>

Step 3

Now open html/js directory located in the resource folder and create a new .js file named however you like, do the same in html/css but this time create a .css file.

Then again open html/index.html file located in the resource folder and inside the <head> tag paste this line in

<link rel="stylesheet" href="css/yourfilename.css">

Now locate this line that should be on the very bottom of the <body>:

 <!-- Configurations + Locales -->

And paste this line under the comment

<script type="text/javascript" src="js/yourfilename.js"></script>

You can find our very advanced Javascript API here!

Step 4

Open the .css file that you've created in html/css directory with your editor [Notepad++, Visual Studio Code, etc] and paste this template in

.myapp {
    position: absolute;
    top: 0;
    
    width: 100%;
    height: 100%;
    background: rgba(23, 32, 46);
    opacity: 0.0;
    
    transition: opacity 0.2s;
    overflow: hidden;
}

.myapp > .text {
    display: block;
    margin: auto auto;
    
    color: white;
    font-size: 1.5vw;
}

Do not change anything besides the background property on the .myapp css element, only add modify the inner HTML of the app. Do not remove the bottomline DIV element as well.

Always use viewport [vw] units or percent [%] for children of elements that have their size set with viewport [vw] units! Not px/vh/em!

That way the phone will be fully responsive for any screen size, and will remain the same size for all monitor sizes.

Step 5

Now open client directory located in the resource folder and create a new .lua file named however you like. You do not need to add the file in fxmanifest.lua, as all the files in the directory are automatically registered.

If you need a server file too, open the server directory located in the resource folder and create a new .lua file named however you like. You do not need to add the file in fxmanifest.lua, as all the files in the directory are automatically registered.

In these lua files you can register NUI callbacks, events, and do everything you need for the app to function correctly!

PreviousEventsNextInstallation

Last updated