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.

The badges, like the tab customization described below, can be turned off in the Ninext Settings, "UI Enhancements" section: Badge on files & comments (on by default).

Badges on the “Files” and “Comments” Tabs

Files Tab

• Blue badge: 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: Gives the number of new comments, that is, those posted less than 24 hours ago.
• Gray badge: When no comment is less than 24 hours old, gives the total number of comments.
• 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 field only, if” formula of each tab, you can declare an onUpdate function that returns a JSON object describing the tab and its badge. The example below comes from the “Badges” table of the demo database: Caption, Color, 'badge.caption'… are fields of that table.

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 field only, if” formula. 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

General Workflow

• Define the onUpdate function
  In the tab’s “Display field only, if” formula, create a function named onUpdate. This function must return an object (JSON-like) describing which display elements to modify. It receives as a parameter the object it returned on the previous call (an empty object the first time).
• Return a Boolean for visibility
  The “Display field only, if” formula 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 : any) do
    let nb := this.NumberTest;
    {
        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:

• The function contains no return: that word does not exist in the Ninox language. It returns the value of its last expression, here the object.
• 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; in the other cases, its caption is empty and the badge does not appear.

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, converted to text by text(); otherwise, the caption is empty and the badge does not appear.
• 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.
• A badge caption always in text
  Ninext only displays the badge if badge.caption is a non-empty text. A number (3 instead of "3") leaves the badge hidden: use text().
• A function evaluated separately
  Ninext extracts the onUpdate function alone from the formula, then evaluates it separately, in the context of the record. It therefore sees neither the variables nor the other functions declared elsewhere in “Display field only, if”: declare inside onUpdate everything it needs. It can read the record’s fields (this.NumberTest) and call the database’s global functions.