Badges

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.

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

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"`

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 : any) do
 let newClients := this.NewClients;
 {
  badge: {
   caption: if newClients > 0 then text(newClients) 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.

Important Points

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