Javascript API

Here you will find all the useful and needed functions for the Javascript API whether you're making a new app or adding more functions to the base of the phone.

Global variables

Here you'll find many variables that can be used for various things, you can find the functions below. There are of course more of them, and you can just console.log the HR.Phone object in your chrome developer tools. We picked out the ready for public use ones.

Make sure your <script> tag is below our Javascript GitHub CDN inside <body> tag, otherwise the variables will return undefined.

HR.Phone.resourceName String

Whether you will find this useful or not (since the phone has it's own function to execute NUI events that doesn't require the resource name) it could help you in some situations.

HR.Phone.localData Object

This variable includes some of the phone and player local data. Default object structure:

HR.Phone.locked Boolean

Returns if the phone is locked.

HR.Phone.open Boolean

Returns if the phone is opened.

HR.Phone.currentApp String

Returns the current opened app.

Phone's event system

Our phone has it's own event system! It can handle many actions of the phone, such as opening an app, changing a setting, unlocking/opening the phone and more!

List of events
{
    "settingUpdated": function(setting, value, oldValue), // Triggers when you change a setting.
    /* Has 3 arguments, 
       setting - the index name of the setting, 
       value - the new value of the setting, 
       oldValue - the old value of the setting.
    */
    "closing": function(), // Triggers when you start closing the phone, e.g. click ESC/The keybind of the phone.
    // Has no arguments
    "fullyClosed": function(), // Triggers when the phone is fully closed and not visible anymore.
    // Has no arguments
    "unlocking": function(), // Triggers when the phone starts being unlocked (when clicked on the click to unlock)
    // Has no arguments
    "fullyUnlocked": function(), // Triggers when the phone is fully unlocked and the lockscreen is not visible anymore.
    // Has no arguments
    "appOpened": function(app), // Triggers when an app is successfully opened, doesn't trigger if the player doesn't have the required job for the app or it just fails.
    /* Has 1 argument
       app - the app index name from Config.Applications
    */
    "appClosed": function(app), // Triggers when an app is closed.
    /* Has 1 argument
       app - the app index name from Config.Applications
    */
}

HR.Phone.events.on(eventName, callback)

HR.Phone.events.on("appOpened", function(app) {
    console.log(app); // Returns the app index from Config.Applications
});

An event listener for our phone's own events system.

HR.Phone.events.once(eventName, callback)

HR.Phone.events.on("appOpened", function(app) {
    console.log(app); // Returns the app index from Config.Applications
});

An event listener for our phone's own events system. This only executes once, after that the event listener gets deleted.

HR.Phone.events.add(eventName)

HR.Phone.events.add("customEvent");

Creates your own events on our phone's own event system.

HR.Phone.events.call(eventName)

HR.Phone.events.call("customEvent");

Manipulates existing events or calls your own created event.

Arguments

Global functions

HR.Phone.functions.callNui(callbackName, payload, callback)

HR.Phone.functions.callNui("myCallback", {myData: "Test"}, function(...args) {
    console.log("Callback successful! Arguments: ", ...args);
});

Calls a registered NUI callback in the client LUA file.

HR.Phone.functions.addButton(query, callback)

HR.Phone.functions.addButton("#myelement", function(element, event) {
    console.log(element.id " was clicked on.");
});

Adds a click listener to an element.

HR.Phone.functions.addDynamicButton(query, callback)

HR.Phone.functions.addDynamicButton("#myelement", function(element, event) {
    console.log(element.id " was clicked on.");
});

Adds a click listener to an element.

How is this different from addButton?

This function adds a dynamic click event to the document, not to the element, what that means is you're able to create the element later and it will still handle the click event once you click on it.

HR.Phone.functions.hasApp(app)

function raceCreated() {
    let hasRacingApp = ESX.Phone.functions.hasApp("Races");
    if(hasRacingApp) {
        // Do something here
    }
})

Returns if the app is opened.

HR.Phone.functions.hasPhone() Async

async function someFunction() {
    let hasPhone = await ESX.Phone.functions.hasPhone();
    if(hasPhone) {
        // Do something here
    }
})

Returns if you have the phone item.

HR.Phone.functions.sendNotification(icon, iconcolor, title, description, length)

function raceCreated() {
    ESX.Phone.functions.sendNotification("fas fa-flag-checkered", "#fff", "Races", "A new race has been created!", 3000)
});

Sends a notification to the phone.

HR.Phone.functions.addImageSelector(query, callback, darkMode, removalButton)

HR.Phone.functions.addImageSelector("#myelement", function(link) {
    console.log(link); // 'link' is the uploaded image online link.
}, true, true);

// You can also use an input HTMLElement as the callback, it will automatically fill in the selected/taken photo link.
HR.Phone.functions.addImageSelector("#myelement", document.querySelector("#myinput"), true, true);abs

This function adds an image selector to an element, when you click on it, a context menu will apear.

HR.Phone.functions.playSound(fileName, loop, ignoreSilentMode)

function someFunction() {
    HR.Phone.functions.playSound("myfile.ogg", false, false);
}tabs

This function plays a specified sound file from the high_phone/media/sounds folder.

HR.Phone.functions.cleanText(string)

function postSomething(text) {
    document.querySelector("#myelement").textContent = HR.Phone.functions.cleanText(text);
};

Replaces all < > special HTML characters to HTML character entities to prevent any HTML being inserted.

HR.Phone.functions.getSetting(setting)

function someFunction() {
    let picture = HR.Phone.functions.getSetting("picture");
    document.querySelector("#myimage").src = picture;
};

This function gets the current setting value of specified setting.

HR.Phone.functions.smoothTextTransition(query, newText, widthTransition, length, callback)

function someFunction() {
    HR.Phone.functions.smoothTextTransition("#myelement", "New Text!", true, 500, function() {
        console.log("Transition is done!");
    });
};

This function transitions the text in a very smooth way from old text to new text, just like iOS does it.

HR.Phone.functions.close()

function someFunction() {
    HR.Phone.functions.close();
});

Closes the phone.

HR.Phone.functions.open()

function someFunction() {
    let success = HR.Phone.functions.open();
});

Opens the phone.

PreviousServer-side exportsNextEvents

Last updated