# Low code - Custom Javascript

## Overview

The low-code component allows for running custom Javascript functions directly on the edge device. This component is useful when the logic you're looking to implement would require too make individual components, or if the components you need to implement your logic just do not exist.

{% hint style="info" %}
Currently there is no support for implementing custom javascript / NPM packages. Support for this will come in the future.
{% endhint %}

## Cross-platform

Your code will operate cross platform whether your app deployment is to an iOS app or an edge device.

***

## Syntax

Our implementation of running custom JS scripts has a specific opinionated syntax that must be followed in order for the code to evaluate.

### Function definition

The entry point function must be named `customJSFunction`. The application runtime will look for this function to evaluate each time the component is called

```javascript
function customJSFunction() { 
    return []
}
```

### Parameter structure

You may define the inputs for the function that you would like to use within your code. Pass the name that you assigned to the input as parameters to the `customJSFunction`

![](/files/FYjziF3QkbuXMjhQjwCG)

```javascript
function customJSFunction(text_input, bounding_box_array)
```

### Outputs return structure

Outputs are defined in the component customization just like inputs. Return data from your function as an array of named objects

![](/files/clwbITbxRVadJkcm27GB)

```javascript
function customJSFunction(text_input, bounding_box_array) {
    // your code
    return [{text_output: "hello world"}, {bounding_box: bbox_var}]
}
```

### Retain state between calls

The context of the function is maintained in between calls. Meaning, if you declare a variable outside the scope of the function, the value of that variable can be updated and will retain the updated value between function calls.

example:

```javascript
// add inputs to the function's parameters to access them in the script
// store variables outside of the function to access values between triggers
 let longTermVariable = 0 

function customJSFunction() {
	console.log(longTermVariable) // On the first call this will be 0, on the second call it will be 5
	longTermVariable = 5 
}

```

### Display on screen notifications

You can display notifications on screen by using the following syntax

```javascript
displayNotification(message: "Error processing data", type: "error")
```

The following are the types of notifications that you can trigger to show in the UI.

* `"error"` 
* `"success"`
* `"info"`

## Debugging

Currently debugging is only possible while testing your app on an iOS device (in the future we will have web based debugging). If an error is generated from your code, the platform will automatically pop up a view with information about the error. For example:

![](/files/ZqvxVQQFEN3lfqMFqImG)/


---

# 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.cloneable.ai/cloneable-documentation/platform-documentation/components/logical-components/low-code-custom-javascript.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.