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:

{
    playerId: 0, // The player's ID on the server.
    playerName: "", // The player's nickname on the server.
    number: "", // The player's phone number.
    identifier: "", // The player's identifier on the server.
    fullname: "", // The character's name and surname.
    job: {name: "", grade: 0} // The self.job object from high_phone/sh_config(_QB).lua
}

`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.

Opened app index from Config.Applications in the config.js file.

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.

Argument number	Argument name	Example value
1	eventName	"appOpened"
2	callback	function(...args)

`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.

Argument number	Argument name	Example value
1	eventName	"appOpened"
2	callback	function(...args)

`HR.Phone.events.add(eventName)`

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

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

Argument number	Argument name	Example value
1	eventName	"customEvent"

`HR.Phone.events.call(eventName)`

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

Manipulates existing events or calls your own created event.

Argument number	Argument name	Example value
1	eventName	"customEvent"

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.

Argument number	Argument name	Example value	Description
1	callbackName	"myCallback"	Registered NUI callback in your client LUA name.
2	payload	{myData: "Test"} OR JSON.stringify({myData: "Test"})	Payload, can be a JSON stringified object or a normal object.
3	callback	function(...args)	Callback from your client LUA, can have multiple arguments.

Argument number

Argument name

Example value

Description

callbackName

"myCallback"

Registered NUI callback in your client LUA name.

payload

{myData: "Test"} OR JSON.stringify({myData: "Test"})

Payload, can be a JSON stringified object or a normal object.

callback

function(...args)

Callback from your client LUA, can have multiple arguments.

`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.

Argument number	Argument name	Example value
1	query/element	"#myelement" OR HTMLElement
2	callback	function(element, event)

`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.

Argument number	Argument name	Example value
1	query/element	"#myelement" OR HTMLElement
2	callback	function(element, event)

`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.

Argument number	Argument name	Example value
1	app	"Bank"

`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.

Argument number	Argument name	Example value
1	icon	"fas fa-flag-checkered"
2	iconcolor	"#ffffff"
3	title	"Hello"
4	description	"I'm highrider#2873"
5	length (in miliseconds)	2000

`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.

Argument number	Argument name	Example value	Description
1	query	"#myelement"	An HTML element query selector.
2	callback	function(link)	Callback function that gets called after selecting the image/taking one. Returns an online link of uploaded image.
3	darkMode	true	The context menu theme, if set to true it'll be dark, if false or undefined - white.
4	removalButton	true	The 'Remove Photo' button visibility in the context menu, if true it'll be shown, if false - hidden.

Argument number

Argument name

Example value

Description

query

"#myelement"

An HTML element query selector.

callback

function(link)

Callback function that gets called after selecting the image/taking one. Returns an online link of uploaded image.

darkMode

true

The context menu theme, if set to true it'll be dark, if false or undefined - white.

removalButton

true

The 'Remove Photo' button visibility in the context menu, if true it'll be shown, if false - hidden.

`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.

Argument number Argument name Example value Description

Argument number	Argument name	Example value	Description
1	fileName	"myfile.ogg"	Audio file name with format from the `high_phone/media/sounds` folder.
2	loop	true	Loops the audio if true.
3	ignoreSilentMode	true	If true, it will play the sound no matter if silent mode is turned on, if false - it will play a vibration sound.

fileName

"myfile.ogg"

Audio file name with format from the high_phone/media/sounds folder.

loop

true

Loops the audio if true.

ignoreSilentMode

true

If true, it will play the sound no matter if silent mode is turned on, if false - it will play a vibration sound.

`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.

Argument number	Argument name	Example value
1	string	"Hello <b>everybody</b>"

`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.

Argument number	Argument name	Example value
1	setting	"silent"

`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.

Argument number	Argument name	Example value	Description
1	query	"#myelement" OR HTMLElement	An HTML element query selector or an HTML element.
2	newText	"New Text!"	The new text of the element.
3	widthTransition	true	If set to true it transitions the width as well to the new text length.
4	length	500	Length of the transition in miliseconds.
5	callback	function()	Callback function that gets called when the transition finishes.

Argument number

Argument name

Example value

Description

query

"#myelement" OR HTMLElement

An HTML element query selector or an HTML element.

newText

"New Text!"

The new text of the element.

widthTransition

true

If set to true it transitions the width as well to the new text length.

length

500

Length of the transition in miliseconds.

callback

function()

Callback function that gets called when the transition finishes.

`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 exports NextEvents

Last updated 1 year ago

Global variables

HR.Phone.resourceName String

HR.Phone.localData Object

HR.Phone.locked Boolean

HR.Phone.open Boolean

HR.Phone.currentApp String

Phone's event system

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

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

HR.Phone.events.add(eventName)

HR.Phone.events.call(eventName)

Arguments

Global functions

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

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

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

HR.Phone.functions.hasApp(app)

HR.Phone.functions.hasPhone() Async

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

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

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

HR.Phone.functions.cleanText(string)

HR.Phone.functions.getSetting(setting)

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

HR.Phone.functions.close()

HR.Phone.functions.open()

`HR.Phone.resourceName` `String`

`HR.Phone.localData` `Object`

`HR.Phone.locked` `Boolean`

`HR.Phone.open` `Boolean`

`HR.Phone.currentApp` `String`

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

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

`HR.Phone.events.add(eventName)`

`HR.Phone.events.call(eventName)`

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

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

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

`HR.Phone.functions.hasApp(app)`

`HR.Phone.functions.hasPhone()` `Async`

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

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

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

`HR.Phone.functions.cleanText(string)`

`HR.Phone.functions.getSetting(setting)`

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

`HR.Phone.functions.close()`

`HR.Phone.functions.open()`