umangenius-logo
U Man Genius docs
Pages
Ninext documentation

icon picker
Badges

JT
Jacques TUR
Ninext enhances the Ninox interface by adding badges to certain tabs to highlight important information.
On the Files tab, a blue badge displays the number of attached files added to the record.
On the Comments tab, a red badge indicates new messages, while a gray badge shows older comments.
On custom tabs, you can modify the appearance (color, title) and add a badge to draw attention to key information.
These badges allow you to quickly spot new information without having to open each tab.

Badges on the “Files” and “Comments” Tabs

Files Tab

Blue badge (#4970ff): Appears if there are files that are not linked to any “File” field, i.e. can be found under the attachment tab. The number shown corresponds to these standalone attachments.
No badge: No standalone attachments were detected.

Comments Tab

Red badge (#ff0000): Indicates new comments (for example, those posted less than 24 hours ago).
Gray badge (#999999): Shows the presence of older comments, or the total number of comments if none are recent.
No badge: There are no comments for this record.
⁠
image.png
⁠
⁠
Badges will inform you about existing entries under the relevant icons:
In this case the blue 1 means that there’s one attachment saved to this record and the grey 1 that there’s one comment for this record.

Custom Badges

In the “display only, if” field of each tab you can create a function containing a JSON defining different properties of a custom badge - including its content:

function onUpdate(event : any) do
debug(formatJSON(event));
{
caption: Caption,
color: Color,
backgroundColor: BackgroundColor,
tooltip: Tooltip,
badge: {
caption: 'badge.caption',
color: 'badge.color',
backgroundColor: 'badge.backgroundColor'
}
}
end;
true

Customizing Tabs with Ninext

⁠
image.png
⁠
⁠
With Ninext, you can modify the appearance of user-defined tabs in Ninox by defining a function called onUpdate in the tab’s “Display only if” trigger. This function returns an object that tells Ninext which visual elements to change. You can:
Adjust the tab title (caption) and tooltip.
Change text and background colors (normal or selected states).
Set the background color of the associated form.
Display a badge on the tab to highlight important information.
⁠

Quick Overview of the JSON Properties

Property
Description
Example / Usage
caption
The title displayed on the tab.
"To Invoice" / "View Invoice"
tooltip
Text shown when hovering over the tab.
"Click to view details"
color
The text color when the tab is not selected.
"#333333"
backgroundColor
The background color when the tab is not selected.
"#ededed"
formBackgroundColor
The background color of the form (editor) when the tab is active.
"#fafafa"
selected.color
The text color when the tab is selected.
"#ffffff"
selected.backgroundColor
The background color when the tab is selected.
"#4970ff"
badge.caption
The text, number, or symbol shown in the badge.
"3" (for 3 new clients) or "!"(alert)
badge.color
The text color of the badge.
"#ffffff"
badge.backgroundColor
The background color of the badge.
"#4970ff"
There are no rows in this table
⁠
⁠

General Workflow

Define the onUpdate function In the code of the “Display only if” trigger for the tab, create a function named onUpdate. This function must return an object (JSON-like) describing which display elements to modify.
Return a Boolean for visibility The “Display only if” trigger must end by returning true or false to indicate whether the tab should be displayed.
Ninext applies the modifications Whenever the user opens or refreshes the record, Ninext runs the onUpdate function, reads the returned object, and dynamically applies the appearance changes to the tab.
⁠

Implementation Examples

Complete Example (Multiple Properties)

"Declaration of the onUpdate function";
function onUpdate(tabValues) do
let nb := this.NumberTest;
return {
caption: if nb > 0 then "To Invoice" else "View Invoice" end,
tooltip: "Click to view details",
color: "#333333",
backgroundColor: "#ededed",
formBackgroundColor: "#fafafa",
selected: {
color: "#ffffff",
backgroundColor: "#4970ff"
},
badge: {
caption: if nb = 3 then "3" else if nb = -1 then "!" else "" end,
color: "#ffffff",
backgroundColor: if nb = 3 then "#4970ff" else if nb = -1 then "#ff0000" else "#cccccc" end
}
}
end;

"Determine whether the tab is displayed: shown if NumberTest > 0";
if this.NumberTest > 0 then
true
else
false
end
Comments:
caption changes the tab title based on NumberTest.
tooltip shows a text message when hovering.
color and backgroundColor define colors in the non-selected state.
selected contains colors for the active tab state.
badge adds an indicator (number or exclamation mark) for emphasis.

Minimal Example (Badge Only)

"Declaration of the onUpdate function";
function onUpdate(tabValues) do
let newClients := this.NewClients;
return {
badge: {
caption: if newClients > 0 then newClients as string else "" end,
color: "#ffffff",
backgroundColor: "#4970ff"
}
}
end;

"The tab is always displayed";
true
Comments:
Only the badge property is returned.
If NewClients is greater than 0, its value is shown; otherwise, the badge is blank.
The badge has white text on a blue background.
⁠
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.