引用其他应用的kintone表格数据

cnDevNet发表于:2021年04月07日 16:30:33更新于:2021年10月19日 10:18:01

Index

前言

是不是有很多人想从另一个应用引用表格的整个数据?

对于这些用户,我们总结了在应用之间引用表格数据的方法。

现在,让我们看一下具体操作吧。

环境准备

  • kintone应用

    - 添加应用商店中的“差旅费结算申请”和“出差申请”。

  • 编辑器

    - 有关准备编辑器的内容可以参照 此处

自定义概况

通过此自定义,我们希望从“出差申请” 应用查看 “差旅费结算申请” 应用中的 “旅费” 表格中的数据。

  • 方式 1: 使用 REST API

  • 方式 2:仅使用标准功能    

    这次介绍以上两种方式。

方式 1: 使用 REST API

在引用表格中的数据时,根据业务的不同有多种引用方式,如下所示。

  • 我想从其他应用获取表格数据

  • 我想将表格数据存储到其他应用中

在本文中,将向您展示如何通过 JavaScript 自定义来实现上述两种方式的自动引用。

从其他应用获取表格数据

机制

具体来说,它的机制是 “从其他应用获取表格数据,并将其显示在记录详情页面的空白字段中”

在本示例中,当显示“出差申请”应用的记录详情页面时,

从“差旅费结算申请”应用获取“旅费”表格中的数据,并在空白栏字段中显示内容。 应用之间的关系图如下所示:

00161692fab2fa70ac6338714e91280

已完成的画面

0016169308c704002df35a27feeff21

应用步骤

  • “出差申请”应用:

  1. 添加字段代码为“出差申请编号”的记录编号字段。

  2. 添加一个字段代码为“tableSpace”的空白栏字段。

    字段代码字段类型备注
    出差申请编号记录编号

    用于标识“差旅费结算申请”记录的编号。
    请参阅同一“出差申请编号”中的“差旅费结算申请”记录中的表格数据,并将其反映在“出差申请”记录中。

    tableSpace空白栏用于显示获取到的“差旅费结算申请”的表格数据。
  3. 将示例程序保存到 JavaScript 文件,然后从设置画面读取文件。
    ※有关如何导入文件的信息,请参阅通过 JavaScript 或 CSS 自定义应用

在空白栏字段中显示数据时,标准函数无法计算显示的数据的总值。如果希望计算总金额(包括空白栏字段中显示的数据),则需要使用从“差旅费结算申请“应用获取的数据来计算总金额。

  • “差旅费结算申请”应用:

  1. 添加字段代码为“出差申请编号”的数值字段(必填字段)。

    字段代码字段类型备注
    出差申请编号数值

    用于标识“出差申请”记录的编号。
    “差旅费结算申请”的表格数据反映在同一个“出差申请号”的“出差申请”记录中。

    在此处输入要链接的“出差申请”应用程序的记录编号。

    ※ 请匹配“出差申请”应用中的“出差申请编号”和字段代码。
    ※ 字段设置 :“设为必填项” 和 “值为唯一” 。

示例程序

在“出差申请”应用的记录详情页面的显示事件中,从“差旅费结算申请”应用获取“旅费”表格中的数据,并将其显示在“出差申请”应用的空白栏字段中。

/*
 * 从其他应用引用表格数据的示例程序
 * Copyright (c) 2020 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/licenses/mit-license.php
*/

(function() {
  "use strict";
  
  kintone.events.on("app.record.detail.show", function(event) {
  
    // 请替换为"差旅费结算申请"的应用 ID
    var APP_ID = 123;
    
    // 获取作为“出差申请编号”使用的“记录编号”
    var applicationNumber = kintone.app.record.getId();
    
    // 字段代码保存为变量
    var businessTripExpenses = "旅费";
    var date = "旅费日期";
    var transportation = "交通工具";
    var summary = "旅费摘要";
    var amount = "旅费金额";
    var receipt = "旅费发票";
    // 显示制作“差旅费结算申请应用”的信息的表格
    var tableHtml = "<thead><tr>" +
        "<th>" + date + "</th>" +
        "<th>" + transportation + "</th>" +
        "<th>" + summary + "</th>" +
        "<th>" + amount + "</th>" +
        "<th>" + receipt + "</th>" +
        "</tr>" +
        "</thead>" +
        "</tbody>";
    // 在空间字段中显示创建的表格
    var tableEl = document.createElement("table");
    tableEl.id = "table";
    tableEl.border = "1";
    tableEl.style.textAlign = "center";
    tableEl.style.padding = "10px";
    tableEl.insertAdjacentHTML("afterbegin", tableHtml);
    kintone.app.record.getSpaceElement("tableSpace").appendChild(tableEl);
    // 从“差旅费结算申请应用”中获取相同的“出差申请编号”
    var params = {
      "app": APP_ID,
      "query": "出差申请编号 = " + applicationNumber
    };
    return kintone.api(kintone.api.url("/k/v1/records", true), "GET", params).then(function(resp) {
      var travelExpenseAppRecords = resp.records;
      // “差旅费结算申请应用”中不存在相同的“出差申请编号”记录时,显示错误
      if (travelExpenseAppRecords.length === 0) {
        window.alert("在“差旅费结算申请”应用中没有找到相同的“出差申请编号”,不能显示“旅费”表格。");
        return event;
      }
      // 把获取到的“差旅费结算申请”应用的表格数据保存在创建的表格中
      var tableRows = travelExpenseAppRecords[0][businessTripExpenses].value;
      var tableRef = document.getElementById("table");
      tableRows.forEach(function(row) {
        var tableRow = tableRef.insertRow(-1);
        var cell1 = tableRow.insertCell(-1);
        var cell2 = tableRow.insertCell(-1);
        var cell3 = tableRow.insertCell(-1);
        var cell4 = tableRow.insertCell(-1);
        var cell5 = tableRow.insertCell(-1);
        cell1.appendChild(document.createTextNode(row.value[date].value));
        cell2.appendChild(document.createTextNode(row.value[transportation].value));
        cell3.appendChild(document.createTextNode(row.value[summary].value));
        cell4.appendChild(document.createTextNode(row.value[amount].value));
        cell5.appendChild(document.createTextNode(row.value[receipt].value));
      });
      return event;
    }).catch(function(error) {
      // 显示错误
      window.alert("发生错误,错误信息:" + error.message);
      return event;
    });
  });
})();


 动作确认

  1. 在“差旅费结算申请”应用中创建新记录并保存。
    - 在“旅费”表格中添加演示数据。

  2. 在“出差申请”应用中创建新记录并保存。
    检查保存的记录详情页面的“tableSpace”空间字段,
    确认是否显示类似于“已完成的画面”中的表格。

将表格数据导出到其他应用

机制

具体而言,“保存记录时,在要引用表格数据的应用中添加表格”

在本示例中,当您保存“旅行费用结算申请”应用的记录时,
会将“旅费”表中的数据保存在“出差申请”应用中。 应用之间的关系图如下所示。

001616932d68d7067a4cf490efb772a

已完成的图像

001616936dbd6ebc27582a62226f367

应用步骤

  • “出差申请”应用:

  1. 添加字段代码为“出差申请编号”的记录编号字段。

  2. 从设置中,添加一个表格用于存储获取到的数据。

    字段代码字段类型备注
    出差申请编号记录编号

    用于标识“旅行费用结算申请”记录的编号。
    从同一“出差申请编号”的“差旅费结算申请”记录中更新的表格数据反映在“出差申请”记录中。

    旅费表格添加与“旅行费用结算申请”中的“旅费”表格相同的表格。
  • “差旅费结算申请”应用:

  1. 添加字段代码为“出差申请编号”的记录编号字段。

    字段代码字段类型备注
    出差申请编号数值

    用于标识“出差申请”记录的编号。
    相同的“出差申请编号”中的“出差申请”记录反映“差旅费结算申请”的表格数据。

    在此处输入要链接的“出差申请”应用的记录编号。

    ※ 请匹配“出差申请”应用中的“出差申请编号”和字段代码。
    ※ 字段设置 :“设为必填项” 和 “值为唯一” 。

  2. 将示例程序保存到 JavaScript 文件,然后从设置页面导入文件。
     ※有关如何导入文件的信息,请参阅使用 JavaScript 或 CSS 自定义应用程序。

示例程序

在“差旅费结算申请”应用的记录添加和编辑页面保存成功后的事件中,
“差旅费结算申请”应用的“旅费”表中的数据也会导出到“出差申请”应用的“旅费”表中。

/*
 * 把表格数据保存到另一个应用的示例程序
 * Copyright (c) 2020 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/licenses/mit-license.php
*/
(function() {
  "use strict";

  // 请替换成“出差申请应用”的应用ID
  var APP_ID = 123;

  // 把字段代码赋值给变量
  var businessTripExpenses = "旅费";
  var applicationNumber = "出差申请编号";

  kintone.events.on(["app.record.edit.submit", "app.record.create.submit"], function(event) {
    // 获取“差旅费结算申请”应用的子表格对象
    var travelExpenseAppRecord = event.record;
    var tableRows = travelExpenseAppRecord[businessTripExpenses].value;
    
    // “差旅费结算申请”应用的子表格对象赋给数组
    var subtable = tableRows.map(function(row) {
      return {value: row.value};
    });

    // 从出差申请应用中获取相同的“出差申请编号”的记录
    var paramForGet = {
      "app": APP_ID,
      "id": travelExpenseAppRecord[applicationNumber].value
    };
    return kintone.api(kintone.api.url("/k/v1/record", true), "GET", paramForGet).then(function(resp) {

      var businessTripAppRecord = resp.record;

      // “出差申请”应用中相同的“出差申请编号”记录不存在时,显示错误
      if (!businessTripAppRecord) {
        window.alert('“出差申请”应用中相同的“出差申请编号”记录不存在,不能更新差旅费结算申请');
        return event;
      }
      // 更新的出差申请数据
      var paramForPut = {
        "app": APP_ID,
        "id": travelExpenseAppRecord[applicationNumber].value,
        "record": {
          // 差旅费结算申请(子表格)
          "旅费": {
            "value": subtable
          }
        }
      };

      // 在“出差申请”应用中反映出记录追加后的数据
      return kintone.api(kintone.api.url("/k/v1/record", true), "PUT", paramForPut);

    }).then(function(resp2) {
      // 处理成功时的信息
      window.alert("在出差申请应用中反映了差旅费结算申请!");
      return event;

    }).catch(function(error) {
      // 处理失败时的报错信息
      window.alert("向出差申请应用反映时失败了\n" + error.message);
      return event;
    });
  });
})();

动作确认

  1. 在“出差申请”应用中创建新记录并保存。

  2. 在“差旅费结算申请”应用中创建新记录并保存。
    - 在“旅费”表格中填入演示数据。

  3. 保存“差旅费结算申请”应用的记录添加/编辑页面时,
    如果出现“出差申请应用反映差旅费结算申请数据”消息,
    请在 1 中创建的“出差申请”记录的“旅费”表格中查看数据是否反映。

方式 2:仅使用标准功能

我们已经介绍了如何使用 JavaScript 进行自定义,接下来将向您展示如何使用标准功能来实现这一切,这会显得容易一些。

这个方法使用了分享操作,虽然稍微欠缺一些便利,但可以零代码。如果有兴趣的话请试试看。

机制

在另一个应用中保存表格数据,然后在那个应用中使用关联记录功能来引用数据。

对于本示例中使用的应用

  • 创建“差旅费明细”应用

  • 将相当于“差旅费结算申请”应用的表格数据的内容保存到“差旅费明细”应用

  • 使用关联记录从“差旅费结算申请”和“出差申请”应用查看保存的“差旅费明细”应用中的数据

应用之间的关系图如下所示。

001616d25f18a7cf60451e1b2b28224

在新的“差旅费明细”应用中添加数据,再使用“差旅费结算申请”应用中的分享功能将表格的一行数据保存在一条记录中。

已完成的图像

0016155c180c50a17e4279f57b7ae65

应用步骤

  • “差旅费明细”应用:

  1. 创建“差旅费明细”应用。

    - 添加如“日期”、“交通工具”、“旅费摘要”、“金额”和“发票”等字段,保存与“差旅费结算申请”应用的表格数据对应的内容。

    - 添加字段名称为“差旅费申请编号”的单行文本框。

    - 有关要添加的字段的详细信息,请参阅下文。

    字段名称字段类型备考
    日期日期字段输入旅费的“日期”信息。
    交通工具下拉菜单输入旅费的“交通工具”信息。
    旅费摘要单行文本框输入旅费的“旅费摘要”信息。
    金额数值输入旅费的“金额”信息。
    发票复选框输入旅费的“发票”信息。
    差旅费申请编号单行文本框作为关联记录和分享功能的关联字段。
  • “差旅费结算申请”应用:

  1. 删除“旅费”表格。

  2. 设置分享功能。
    - 在分享设置的“关联字段”中,
    将“No”字段与“差旅费明细”应用中的“差旅费申请编号”相关联。
    ※有关如何设置应用分享的操作,请参阅此处

  3. 添加关联记录列表字段,并将其设置为可引用“差旅费明细”应用中的数据。
    - 有关要添加的字段的详细信息,请参阅下文。

    字段名称字段类型备考
    差旅费明细关联记录列表· 引用应用:差旅费明细
    · 显示记录的条件:此应用的字段“No”和要引用的应用字段“差旅费申请编号”
    · 显示的字段:要在“差旅费结算申请”应用中显示的字段
    · 有关如何设置关联记录列表,请参阅此处

想要让关联记录功能作为表格的替代品在“差旅费结算申请”应用中显示“旅费”数据时,标准功能中的表格数据合计计算的功能就会失效。
想要计算关联记录里包含金额数据的合计值时,请参照这篇文章
想要先尝试“引用表格数据”这一方法时,请在删除“差旅费结算申请”的“旅费”表格时一同删除“旅费合计”这个计算字段。

  • “出差申请”应用:

  1. 创建字段代码为“差旅费申请编号”的单行文本框。
    (作为关联记录和分享功能的关联字段)

  2. 添加关联记录列表字段,并将其设置为可引用“差旅费明细”应用中的数据。
    - 有关要添加的字段的详细信息,请参阅下文。

    字段名称字段类型备考
    差旅费申请编号单行文本框作为关联记录和分享功能的关联字段。
    差旅费明细关联记录列表· 引用应用:差旅费明细
    · 显示记录的条件:此应用的字段“差旅费申请编号”和要引用的应用字段“差旅费申请编号”
    · 显示的字段:要在“差旅费结算申请”应用中显示的字段
    · 有关如何设置关联记录列表,请参阅此处

结束语

在本技巧中,介绍了如何在应用之间引用表格数据(^0^)/

另外还有许多其他有用的技巧,比如关联记录的自定义(日文)表格的其他活用方法(日文)也可以了解一下♪


    注意:贴代码时请注意格式并使用"代码语言",与本文无关的问题请至“讨论社区”提问。