umangenius-logo
U Man Genius docs
Pages
Ninext documentation

icon picker
Button event

Jacques TUR
⁠
image.png
⁠
⁠

Customizing Buttons with Ninext

With Ninext, you can modify the appearance of Ninox buttons by defining a function called onUpdate in the "Display only if" trigger. This function must return an object describing the visual elements to be modified, and the script must end with a Boolean indicating whether the button should be displayed.
Using this approach, you can:
Change the button's caption.
Update the tooltip (or title) of the button.
Change the button's color using predefined classes.
Display a badge to highlight important information.
⁠

Quick Overview of JSON Properties

Property
Description
Example / Usage
caption
The text displayed on the button.
"Send" / "Cancel"
tooltip or title
The text shown when hovering, as a tooltip.
"Click to send"
buttonColor
The color class to apply to the button (e.g., "blue", "red", "grey").
"blue"
badge
An object describing the badge to display on the button.
See details below
badge.caption
The text, number, or symbol displayed on the badge.
"3" or "!"
badge.color
The badge color (either default or customized).
"red" or "#4970ff"
There are no rows in this table
⁠
⁠

General Workflow

Define the onUpdate Function In the code of the button's "Display only if" trigger, declare a function called onUpdate. This function returns an object (in JSON format) describing the elements to modify.
Return a Boolean for Visibility The trigger must end by returning a Boolean (true or false) to indicate whether the button should be displayed.
Ninext Applies the Modifications When the record is opened or refreshed, Ninext executes the onUpdate function, reads the returned object, and dynamically applies the appearance changes to the button.
⁠

Implementation

Single Code Block in the "Display only if" Trigger

"Declaration of the onUpdate function that customizes the button"
function onUpdate(buttonValues : any) do
let count := this.Count;
{
caption: if count > 0 then "Send (" + count + ")" else "Send" end;
tooltip: "Click to send your request",
buttonColor: if count > 0 then "red" else "blue" end;
badge: {
caption: if count > 0 then text(count) else "" end;
color: "#ffffff"
}
}
end;

"Determination of the button's visibility"
if this.Count >= 0 then
true
else
false
end
Comments:
The onUpdate function builds an object that allows modifying the button caption (with a numerical indicator if Count is positive), the tooltip, the button color, and displaying a badge.
The final block of code returns a Boolean to determine whether the button should be displayed.
⁠

Minimal Example (Badge Only)

"Declaration of the onUpdate function to display only a badge"
function onUpdate(buttonValues : any) do
let newItems := this.NewItems;
{
badge: {
caption: if newItems > 0 then text(newItems) else "",
color: "#ffffff"
}
}
end;

"The button is always displayed"
true

Comments:
Only the badge property is returned to display a value if NewItems is greater than 0.
The button is displayed unconditionally.
⁠
high-priority

Important Points

Final Boolean Return Without returning true or false at the end, the tab will not be visible.

Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.