Skip to content
Technical complexity: Implementing API calls requires a solid understanding of HTTP requests in JavaScript.Limited interactivity: Changes only affect server-side data, without the ability to trigger immediate local updates in the interface.
Sending the value of an input field,Executing actions during events such as onclick, onfocus, onblur, ontimer, etc.,Handling asynchronous operations with callbacks.
Defining the Ninox Function
In your Ninox formula, define a function (e.g., myOnblur) that will handle the parameters passed from JavaScript. This function remains isolated from the rest of the script and executes within the context of the current record (equivalent to this in Ninox).Creating the HTML Interface
Embed an HTML component (e.g., an input field) within the formula. In the event attribute (such as onblur), use callNinoxFunction to call the corresponding Ninox function, passing the necessary parameters.Triggering the Event
When the HTML event fires, callNinoxFunction calls the specified Ninox function, isolates it, and executes it with the given context and parameters (e.g., the input field’s value).
When a user leaves the input field (onblur event),The function ninext.callNinoxFunction is called with:'myOnblur': the name of the Ninox function to execute,this: the HTML element itself,this.value: the current value of the input field.
The Ninox function performs asynchronous operations (API calls, complex calculations),You need to update the UI after the function completes,You want to chain multiple operations sequentially.
Contextualization:
The Ninox function executes with this representing the current record, ensuring consistency in the execution context.Flexibility:
You can add as many parameters as needed using ...args, allowing the Ninox function’s behavior to be adapted to your application’s specific needs.Error Handling:
Both synchronous and asynchronous modes provide clear error reporting, making debugging easier.Multiple Uses:
This mechanism is particularly useful for integrating complex interactions between the HTML/JavaScript user interface and the business logic defined in Ninox.
U Man Genius docs
- Pages
HTML helping functions
Jacques TUR
Access Ninox Functions Directly from HTML/JavaScript
Ninext makes it easier to create HTML interfaces integrated with Ninox by allowing direct calls to Ninox functions from HTML or JavaScript code. While Ninox’s html function enables easy generation of HTML components within a formula, interacting with Ninox logic remains complex without resorting to more complex solutions.
Take, for example, an input field that needs to trigger behavior linked to Ninox. The traditional approach involves using the REST API to send data to the server, which then updates the local display. While effective, this method has several drawbacks:
With Ninext, you get a smoother integration, enabling direct linking of your HTML/JavaScript components to Ninox functions. This enhances the interactivity of your applications without the usual constraints of API calls.
callNinoxFunction
The callNinoxFunction function allows you to call a Ninox script from JavaScript code. This integration provides great flexibility for interacting with Ninox, particularly for:
Format and Parameters
ninext.callNinoxFunction(functionName, htmlElement, ...args, [callback])
Parameter
Description
functionName
Name of the Ninox function to call.
htmlElement
Can be the ID of the HTML element (e.g., "myId"), or the element itself (e.g., this or document.getElementById("myId")).
...args
Additional parameters to pass to the Ninox function.
callback
(Optional) A function to handle the result asynchronously. If provided, it will be called with (error, result).
There are no rows in this table
Return Value
Synchronous mode (without callback)
The function returns a JSON object with one of the following structures:
On success:
{
result: <value> // The value returned by the Ninox function
}
On error:
{
error: <string> // Error message describing what went wrong
}
Asynchronous mode (with callback)
When a callback function is provided as the last argument, the callback receives two parameters:
callback(error, result)
Parameter
Description
error
An Error object if something went wrong, or undefined on success.
result
The value returned by the Ninox function, or null if an error occurred.
There are no rows in this table
How It Works
The main idea is to execute Ninox scripts within the context of an HTML page. Here’s how it works:
This mechanism simulates the behavior of a native trigger while allowing one or more custom parameters to be passed to the Ninox function execution.
Usage Examples
Basic Example: Input Field with onblur
1. Defining the Ninox Function
In your Ninox formula, add the following function:
function myOnblur(inputValue : text) do
alert("Input of record " + this.Id + " is " + inputValue)
end;
This function displays an alert showing the current record’s ID and the passed value.
2. Integrating the HTML Input Field
Next, insert the following HTML code to display an input field and define the onblur event:
function myOnblur(inputValue : text) do
alert("Input of record " + this.Id + " is " + inputValue)
end;
html("
<input
class='nx-input nx-input--editing'
style='width: 100%; height: 100%;'
onblur=""ninext.callNinoxFunction('myOnblur', this, this.value)""
/>
")
How it works:
This ensures that the Ninox script myOnblur runs in the context of the current record, as if it were triggered natively by Ninox, while also receiving the input field’s value as a parameter.
Synchronous Usage Examples
// Basic call - checking the result
const response = ninext.callNinoxFunction('myFunction', this, 'param1');
if (response.error) {
console.error('Error:', response.error);
} else {
console.log('Result:', response.result);
}
// Direct access to result (when you're confident there's no error)
alert(ninext.callNinoxFunction('getValue', this).result);
// With error handling
const res = ninext.callNinoxFunction('calculateTotal', 'myButtonId', 100, 0.2);
if (res.error) {
alert('Calculation failed: ' + res.error);
} else {
document.getElementById('total').textContent = res.result;
}
Asynchronous Usage Examples (with callback)
// Basic callback usage
ninext.callNinoxFunction('myFunction', this, 'param1', function(error, result) {
if (error) {
console.error('Error:', error.message);
} else {
console.log('Result:', result);
}
});
// Update UI after async operation
ninext.callNinoxFunction('loadData', 'myContainer', recordId, function(error, result) {
if (error) {
alert('Failed to load data: ' + error.message);
return;
}
document.getElementById('output').innerHTML = result;
});
// Using arrow function syntax
ninext.callNinoxFunction('calculateTotal', this, 100, 0.2, (error, result) => {
if (!error) {
document.getElementById('total').textContent = result;
}
});
When to Use Callbacks?
Use the callback pattern when:
Key Points
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.