徽章

Ninext 通过在某些标签页上添加徽章来增强 Ninox 界面，从而突出显示重要信息。

在“文件”标签页上，蓝色徽章显示添加到该记录的附件数量。
在“评论”标签页上，红色徽章表示有新消息，灰色徽章则表示已有较早的评论。
在自定义标签页上，您可以修改外观（颜色、标题）并添加徽章，以引起对关键信息的注意。

这些徽章让您无需逐个打开标签页，就能快速发现新信息。

“文件”和“评论”标签页上的徽章

文件标签页

蓝色徽章 (#4970ff)：当存在未关联到任何“文件”字段的文件时出现，即可以在附件标签页下找到的文件。所显示的数字对应这些独立附件的数量。
无徽章：未检测到任何独立附件。

评论标签页

红色徽章 (#ff0000)：表示存在新评论（例如发布不足 24 小时的评论）。
灰色徽章 (#999999)：表示存在较早的评论，或者当没有新近评论时显示评论总数。
无徽章：该记录没有任何评论。

图片.png

徽章会在相应图标下告知您已有的条目：

在这个例子中，蓝色的 1 表示该记录保存了一个附件，灰色的 1 表示该记录有一条评论。

自定义徽章

在每个标签页的“仅在以下条件下显示”字段中，您可以创建一个函数，其中包含定义自定义徽章各项属性（包括其内容）的 JSON：

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

使用 Ninext 自定义标签页

图片.png

借助 Ninext，您可以通过在标签页的“仅在以下条件下显示”触发器中定义一个名为 onUpdate 的函数，来修改 Ninox 中用户自定义标签页的外观。该函数返回一个对象，告知 Ninext 需要更改哪些视觉元素。您可以：

调整标签页标题（caption）和工具提示。
更改文字颜色和背景颜色（普通状态或选中状态）。
设置关联表单的背景颜色。
在标签页上显示徽章，以突出重要信息。

JSON 属性速览

属性	说明	示例 / 用法
caption	标签页上显示的标题。	`"To Invoice" / "View Invoice"`
tooltip	鼠标悬停在标签页上时显示的文字。	`"Click to view details"`
color	标签页未选中时的文字颜色。	`"#333333"`
backgroundColor	标签页未选中时的背景颜色。	`"#ededed"`
formBackgroundColor	标签页处于激活状态时表单（编辑器）的背景颜色。	`"#fafafa"`
selected.color	标签页选中时的文字颜色。	`"#ffffff"`
selected.backgroundColor	标签页选中时的背景颜色。	`"#4970ff"`
badge.caption	徽章中显示的文字、数字或符号。	`"3"`（表示 3 位新客户）或 `"!"`（警示）
badge.color	徽章的文字颜色。	`"#ffffff"`
badge.backgroundColor	徽章的背景颜色。	`"#4970ff"`

总体流程

定义 onUpdate 函数
在标签页“仅在以下条件下显示”触发器的代码中，创建一个名为 onUpdate 的函数。该函数必须返回一个对象（类似 JSON），用于描述要修改哪些显示元素。
返回一个布尔值以决定可见性
“仅在以下条件下显示”触发器必须以返回 true 或 false 结束，以指明该标签页是否应当显示。
Ninext 应用这些修改
每当用户打开或刷新记录时，Ninext 都会运行 onUpdate 函数，读取返回的对象，并动态地将外观更改应用到标签页上。

实现示例

完整示例（多个属性）

"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

说明：

caption 根据 NumberTest 更改标签页标题。
tooltip 在鼠标悬停时显示一段文字信息。
color 和 backgroundColor 定义未选中状态下的颜色。
selected 包含标签页激活状态下的颜色。
badge 添加一个指示标记（数字或感叹号）以示强调。

最简示例（仅徽章）

"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

说明：

仅返回 badge 属性。
如果 NewClients 大于 0，则显示其值；否则徽章为空白。
该徽章为蓝色背景上的白色文字。

要点

最后必须返回布尔值
如果末尾不返回 true 或 false，标签页将不可见。