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).
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.
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:
