自定义单位

已创建的自定义单位示例

以下列举了可通过混合应用添加的卡片和列表的自定义单元示例。

• 彩色自定义字段 - 用于为显示的自定义字段中的值定义彩色高亮规则。
• 描述 - 描述文本框的前150个字符。
• 最后一条评论 - 最近评论文本的前150个字符。
• 附件 - 首个附加（上传）图像文件的缩略图。
• 所有已分配人员 - 显示所有已分配用户的姓名首字母缩写。
• 所有者全名 - 所有者用户的姓名（包含姓氏和名字）。
• 关系计数器 - 任何实体的入站和出站关系中，已打开项目与所有项目的计数。 类型 Link 的关系与所有其他类型均单独计数。
• 按角色分配任务——按角色分别显示已分配用户；当具有多重角色的用户对实体进行估算并处理时，此功能尤为实用
• 角色工作量 - 按角色分别显示角色工作量（待完成工作量、已完成工作量）、已耗时间和剩余时间；当具有多重角色的用户估算实体并处理它们时，此功能尤为实用。
• 父实体计划日期、发布迭代和团队迭代日期——显示父级功能/用户故事/发布/迭代（冲刺）/团队迭代（对应用户故事、任务、缺陷或功能）的起止日期。
• 项目当前版本与迭代 - 显示项目当前版本与迭代的名称及可点击ID
• 请求者 - 请求者的名称显示在代表请求的卡片上。
• 请求方所属公司——请求方的名片上会显示公司名称。
• TestCasePercentage - 通过与失败的最近运行测试用例百分比，或自定义状态百分比，按测试用例类型分别计算；每个测试用例的类型通过下拉自定义字段指定。 适用于回归测试和验收工作流。

高级混合应用不仅能展示信息，还能在卡片间建立交互，并允许在视图中直接修改卡片：

• 显示关联 - 卡片间的关联关系在看板视图和列表视图中以箭头形式呈现。
• 快速添加评论 - 提交评论。

如何组合自定义单位混搭

让我们创建一个混合应用程序，该应用程序将以自定义单位显示实体名称的长度。

创建具有以下依赖项的混合应用：

tau.mashups
  .addDependency('tau/models/board.customize.units/const.entity.types.names')
  .addDependency('tau/models/board.customize.units/const.card.sizes')
  .addDependency('tau/api/board/v1/customize')
  .addMashup(function(types, sizes, customizeApi) {

  //insert your custom code here
});

• 自定义字段 => 用于自定义字段。
• 现在支持所有扩展数据模型（ ExD Extended Data Model）实体以及这些原生实体类型：

types.EPIC, types.FEATURE, types.STORY,

types.REQUEST, types.PORTFOLIO_EPIC,

types.BUG, types.TASK, types.TIME.

该单元的外观如下：

var unit = {
    id: 'name_length',
    name: 'Name Length',
    classId: 'tau-board-unit_type_name_length',
    types: [types.EPIC, types.FEATURE, types.STORY, types.TASK, types.BUG],
    template: [
      '<div class="tau-board-unit__value"><%= String(this.data.nameLength || 0) %></div>'
    ],
    sizes: [sizes.L, sizes.XL, sizes.LIST],
    sampleData: {
      nameLength: 42
    },
    model: 'nameLength:Name.Length',
    csv: {
      columns: [{
        id: 'name_length',
        name: '${Name Length}',
        model: 'Name.Length'
      }]
    },
    category: 'simple',
    sortConfig: {
      field: 'Name.Length',
      inverseOrder: false
    }
  };

customizeApi.registerCustomUnit(unit);

tau.mashups
  .addDependency('tau/models/board.customize.units/const.entity.types.names')
  .addDependency('tau/models/board.customize.units/const.card.sizes')
  .addDependency('tau/api/board/v1/customize')
  .addMashup(function(types, sizes, customizeApi) {

  var unit = {
    id: 'name_length',
    name: 'Name Length',
    classId: 'tau-board-unit_type_name_length',
    types: [types.EPIC, types.FEATURE, types.STORY, types.TASK, types.BUG],
    template: [
      '<div class="tau-board-unit__value"><%= String(this.data.nameLength || 0) %></div>'
    ],
    sizes: [sizes.L, sizes.XL, sizes.LIST],
    sampleData: {
      nameLength: 42
    },
    model: 'nameLength:Name.Length',
    csv: {
      columns: [{
        id: 'name_length',
        name: '${Name Length}',
        model: 'Name.Length'
      }]
    },
    category: 'simple',
    sortConfig: {
      field: 'Name.Length',
      inverseOrder: false
    }
  };

  customizeApi.registerCustomUnit(unit);
});

1. 打开设置 > 系统设置 > 混合应用。
2. 在混合应用管理器中，点击 “添加新混合应用 ”按钮。
3. 给这个混搭作品命名 CustomUnitNameLength
4. 将占位符设置为 restui_board。
5. 将源代码复制并粘贴到代码区域。
6. 点击 “保存混合内容 ”按钮。
7. 请在您的网页浏览器中重新加载所有已打开的Targetprocess页面，以便应用更改。

已完成：名为 的混合 CustomUnitNameLength 应用已出现在已安装混合应用列表中。

组合式混搭的使用

实体类型

卡片尺寸

单位的自定义样式

var style = document.createElement("style");
style.setAttribute('id', 'NameLengthCustomUnit');
style.appendChild(document.createTextNode(""));
document.head.appendChild(style);
var sheet = style.sheet;

var addCSSRule = function(selector, rules, index) {
  if (index === undefined) {
    index = sheet.cssRules.length;
  }
  sheet.insertRule(selector + "{" + rules + "}", index);
};

addCSSRule(
  '.tau-card-v2__section .tau-board-unit_type_name_length .tau-board-unit__value',
  'font-size: 14px;');

addCSSRule(
  '.tau-ui-size-xl .tau-card-v2__section .tau-board-unit_type_name_length .tau-board-unit__value',
  'font-size: 16px;');

列表中可编辑的自定义单元

tau.mashups
  .addDependency('tau/models/board.customize.units/const.entity.types.names')
  .addDependency('tau/models/board.customize.units/const.card.sizes')
  .addDependency('tau/api/board/v1/customize')
  .addMashup(function(types, sizes, customizeApi) {
        const unit = {
            id: 'due_date_colored',
            classId: 'tau-board-unit_type_due-date-colored',
            name: 'Formatted Due Date',
            types: [ types.STORY, types.FEATURE ],
            hideIf : function (data) {
                return !data.due;
            },
            sizes: [ sizes.XS, sizes.S, sizes.M, sizes.L, sizes.XL, sizes.LIST ],
            template: {
                markup: [
                    '<div class="tau-board-unit__value">',
                        '<%= fn.getDate(this.data.due, this.data.closed) %>',
                    '</div>'
                    ],
                customFunctions: {
                    getDate: function(due, closed) {
                        var today = new Date();
                        var date = new Date(due.match(/\d+/)[0] * 1 + 6*60*60*1000);
                        var color = !closed && (date - today) / (1000 * 60 * 60 * 60) < 1 ? 'red' : 'black';
                        return "<span style=\"color:" + color + "\"><b>" 
+ $.datepicker.formatDate('dd MMM yyyy', date)
                        + "</b></span>";
                    }
                }
            },
            sampleData: { due: '\/Date(1385360733000-0500)\/', closed: true },
            model: 'due:CustomValues.Date("Due Date"),closed:(entityState.isFinal or entityState.Name="Cancelled")'
        };
        customizeApi.registerCustomUnit(unit);
    });

截止日期是用户故事实体的自定义字段。 在列表视图中将显示为：

const editableCustomFieldUnit = customizeApi.makeCustomFieldUnitEditable(unit,'Due Date');
  customizeApi.registerCustomUnit(editableCustomFieldUnit);

tau.mashups
  .addDependency('tau/models/board.customize.units/const.entity.types.names')
  .addDependency('tau/models/board.customize.units/const.card.sizes')
  .addDependency('tau/api/board/v1/customize')
  .addMashup(function(types, sizes, customizeApi) {
        const unit = {
            id: 'due_date_colored',
            classId: 'tau-board-unit_type_due-date-colored',
            name: 'Formatted Due Date',
            types: [ types.STORY, types.FEATURE ],
            hideIf : function (data) {
                return !data.due;
            },
            sizes: [ sizes.XS, sizes.S, sizes.M, sizes.L, sizes.XL, sizes.LIST ],
            template: {
                markup: [
                    '<div class="tau-board-unit__value">',
                        '<%= fn.getDate(this.data.due, this.data.closed) %>',
                    '</div>'
                    ],
                customFunctions: {
                    getDate: function(due, closed) {
                        var today = new Date();
                        var date = new Date(due.match(/\d+/)[0] * 1 + 6*60*60*1000);
                        var color = !closed && (date - today) / (1000 * 60 * 60 * 60) < 1 ? 'red' : 'black';
                        return "<span style=\"color:" + color + "\"><b>" 
+ $.datepicker.formatDate('dd MMM yyyy', date)
                        + "</b></span>";
                    }
                }
            },
            sampleData: { due: '\/Date(1385360733000-0500)\/', closed: true },
            model: 'due:CustomValues.Date("Due Date"),closed:(entityState.isFinal or entityState.Name="Cancelled")'
        };
        const editableCustomFieldUnit = customizeApi.makeCustomFieldUnitEditable(unit,'Due Date');
        customizeApi.registerCustomUnit(editableCustomFieldUnit);
    });

支持可编辑的自定义单位

支持的 CustomField 单元类型：

• 文本
• NUMBER
• 金钱
• 日期
• 下拉菜单
• 多项列表

模型类型

model: 'due:CustomValues.Date("Due Date"),closed:(entityState.isFinal or entityState.Name="Cancelled")'

model: {
                due:'CustomValues.Date("Due Date")',
                closed:'(entityState.isFinal or entityState.Name="Cancelled")'
            }