# Custom App

## Config

App settings to be added to the AppStore section in [`gksphone/config/config.json`](#user-content-fn-1)[^1]

* name => The name of the app that will appear on the phone
* icons  => Icon of the app
* categori => In which category the app will appear (  jobs, mix, social, finance )
* appurl => You should write the file path of the resource you want to run in the application **( If you want to add a site, make sure it has iframe support )**
* url => Don't touch this part
* blockedjobs  => Jobs that will not see the app
* allowjob  => Only jobs that can see this application<br>

```json
    {
      "name": "Custom App",
      "icons": "/html/img/icons/qbit.png",
      "categori": "mix",
      "appurl": "https://cfx-nui-gksphone-app/ui/index.html",
      "url": "/customapp",
      "blockedjobs": {
         "police": "police"
      },
      "allowjob": {
         "ambulance": "ambulance"
      },
      "signal": true,
      "show": true
    }
```

You can access the custom app template on [github](<https://github.com/Xenknight61/gksphone-app >) and start making the app you want

## Open App

Add this client and this will be triggered every time you enter the application.

```lua
RegisterNUICallback('getInfo', function(data, cb)
    print("The function that will run when it enters the application")
    cb('ok')
end)
```

## Exports

### InputChange

To prevent walking while filling in input fields

```lua
local data = true -- true or false
exports["gksphone"]:InputChange(data)
```

```html
<input type="text" onfocus="inputFocused(false)" onblur="inputFocused(true)">

<script>
   async function inputFocused(value) {
       //await NuiFetch("input", value);
   }
</script>
```

### NuiSendMessage

You have to use this export instead of SendNUIMessage

```lua
exports["gksphone"]:NuiSendMessage({event = 'showMessage', hello = "world"})
```

```javascript
window.addEventListener('message', (event) => {
    if (!event.data) return;
    const e = event.data
    if (e.event === "showMessage") {
        console.log(`Hello ${e.hello}!`)
    }
})
```

## Javascript UI

```javascript
document.addEventListener('DOMContentLoaded', () => {
    setTimeout(() => {
        if (window.gksphone) {
            console.log(`GKSPHONE functions available`)
        }
    }, 100);
});
```

### Dark Mode Check

```javascript
const isDarkMode = window.gksphone.isDarkMode();
console.log(isDarkMode)  // true or false
```

### Loading Poup

```javascript
window.gksphone.loadingPopup("Loading...");
setTimeout(() => {
   window.gksphone.closeLoadingPopup();
}, 1000)
```

### Notify

```javascript
var timeout = 2000
window.gksphone.notify("This is a notification message", timeout);
```

### Call

```javascript
const phoneNumber = "55555"  // Number to call
const anonymous = false
window.gksphone.calling(phoneNumber, anonymous);
```

### Video Call

```javascript
const phoneNumber = "55555"  // Number to call
window.gksphone.videoCall(phoneNumber);
```

[^1]:


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.gkshop.org/gksphone-v1/gksphonev2/custom-app.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.