Index
前言
是不是有很多人想从另一个应用引用表格的整个数据？
对于这些用户，我们总结了在应用之间引用表格数据的方法。
现在，让我们看一下具体操作吧。
环境准备
kintone应用
- 添加应用商店中的“差旅费结算申请”和“出差申请”。
编辑器
- 有关准备编辑器的内容可以参照 此处。
自定义概况
通过此自定义，我们希望从“出差申请” 应用查看 “差旅费结算申请” 应用中的 “旅费” 表格中的数据。
方式 1： 使用 REST API
方式 2：仅使用标准功能
这次介绍以上两种方式。
方式 1： 使用 REST API
在引用表格中的数据时，根据业务的不同有多种引用方式，如下所示。
我想从其他应用获取表格数据
我想将表格数据存储到其他应用中
在本文中，将向您展示如何通过 JavaScript 自定义来实现上述两种方式的自动引用。
从其他应用获取表格数据
机制
具体来说，它的机制是 “从其他应用获取表格数据，并将其显示在记录详情页面的空白字段中” 。
在本示例中，当显示“出差申请”应用的记录详情页面时，
从“差旅费结算申请”应用获取“旅费”表格中的数据，并在空白栏字段中显示内容。 应用之间的关系图如下所示：
已完成的画面
应用步骤
“出差申请”应用：
添加字段代码为“出差申请编号”的记录编号字段。
添加一个字段代码为“tableSpace”的空白栏字段。
字段代码 字段类型 备注 出差申请编号 记录编号 用于标识“差旅费结算申请”记录的编号。
请参阅同一“出差申请编号”中的“差旅费结算申请”记录中的表格数据，并将其反映在“出差申请”记录中。tableSpace 空白栏 用于显示获取到的“差旅费结算申请”的表格数据。 将示例程序保存到 JavaScript 文件，然后从设置画面读取文件。
※有关如何导入文件的信息，请参阅通过 JavaScript 或 CSS 自定义应用。
在空白栏字段中显示数据时，标准函数无法计算显示的数据的总值。如果希望计算总金额（包括空白栏字段中显示的数据），则需要使用从“差旅费结算申请“应用获取的数据来计算总金额。
“差旅费结算申请”应用：
添加字段代码为“出差申请编号”的数值字段（必填字段）。
字段代码 字段类型 备注 出差申请编号 数值 用于标识“出差申请”记录的编号。
“差旅费结算申请”的表格数据反映在同一个“出差申请号”的“出差申请”记录中。在此处输入要链接的“出差申请”应用程序的记录编号。
※ 请匹配“出差申请”应用中的“出差申请编号”和字段代码。
※ 字段设置 ：“设为必填项” 和 “值为唯一” 。
示例程序
在“出差申请”应用的记录详情页面的显示事件中，从“差旅费结算申请”应用获取“旅费”表格中的数据，并将其显示在“出差申请”应用的空白栏字段中。
/*
* 从其他应用引用表格数据的示例程序
* 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;
});
});
})();动作确认
在“差旅费结算申请”应用中创建新记录并保存。
- 在“旅费”表格中添加演示数据。在“出差申请”应用中创建新记录并保存。
检查保存的记录详情页面的“tableSpace”空间字段，
确认是否显示类似于“已完成的画面”中的表格。
将表格数据导出到其他应用
机制
具体而言，“保存记录时，在要引用表格数据的应用中添加表格”。
在本示例中，当您保存“旅行费用结算申请”应用的记录时，
会将“旅费”表中的数据保存在“出差申请”应用中。 应用之间的关系图如下所示。
已完成的图像
应用步骤
“出差申请”应用：
添加字段代码为“出差申请编号”的记录编号字段。
从设置中，添加一个表格用于存储获取到的数据。
字段代码 字段类型 备注 出差申请编号 记录编号 用于标识“旅行费用结算申请”记录的编号。
从同一“出差申请编号”的“差旅费结算申请”记录中更新的表格数据反映在“出差申请”记录中。旅费 表格 添加与“旅行费用结算申请”中的“旅费”表格相同的表格。
“差旅费结算申请”应用：
添加字段代码为“出差申请编号”的记录编号字段。
字段代码 字段类型 备注 出差申请编号 数值 用于标识“出差申请”记录的编号。
相同的“出差申请编号”中的“出差申请”记录反映“差旅费结算申请”的表格数据。在此处输入要链接的“出差申请”应用的记录编号。
※ 请匹配“出差申请”应用中的“出差申请编号”和字段代码。
※ 字段设置 ：“设为必填项” 和 “值为唯一” 。将示例程序保存到 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：仅使用标准功能
我们已经介绍了如何使用 JavaScript 进行自定义，接下来将向您展示如何使用标准功能来实现这一切，这会显得容易一些。
这个方法使用了分享操作，虽然稍微欠缺一些便利，但可以零代码。如果有兴趣的话请试试看。
机制
在另一个应用中保存表格数据，然后在那个应用中使用关联记录功能来引用数据。
对于本示例中使用的应用
创建“差旅费明细”应用
将相当于“差旅费结算申请”应用的表格数据的内容保存到“差旅费明细”应用
使用关联记录从“差旅费结算申请”和“出差申请”应用查看保存的“差旅费明细”应用中的数据
应用之间的关系图如下所示。
在新的“差旅费明细”应用中添加数据，再使用“差旅费结算申请”应用中的分享功能将表格的一行数据保存在一条记录中。
已完成的图像
应用步骤
“差旅费明细”应用：
创建“差旅费明细”应用。
- 添加如“日期”、“交通工具”、“旅费摘要”、“金额”和“发票”等字段，保存与“差旅费结算申请”应用的表格数据对应的内容。
- 添加字段名称为“差旅费申请编号”的单行文本框。
- 有关要添加的字段的详细信息，请参阅下文。
字段名称 字段类型 备考 日期 日期字段 输入旅费的“日期”信息。 交通工具 下拉菜单 输入旅费的“交通工具”信息。 旅费摘要 单行文本框 输入旅费的“旅费摘要”信息。 金额 数值 输入旅费的“金额”信息。 发票 复选框 输入旅费的“发票”信息。 差旅费申请编号 单行文本框 作为关联记录和分享功能的关联字段。
“差旅费结算申请”应用：
删除“旅费”表格。
设置分享功能。
- 在分享设置的“关联字段”中，
将“No”字段与“差旅费明细”应用中的“差旅费申请编号”相关联。
※有关如何设置应用分享的操作，请参阅此处。添加关联记录列表字段，并将其设置为可引用“差旅费明细”应用中的数据。
- 有关要添加的字段的详细信息，请参阅下文。字段名称 字段类型 备考 差旅费明细 关联记录列表 · 引用应用：差旅费明细
· 显示记录的条件：此应用的字段“No”和要引用的应用字段“差旅费申请编号”
· 显示的字段：要在“差旅费结算申请”应用中显示的字段
· 有关如何设置关联记录列表，请参阅此处。
想要让关联记录功能作为表格的替代品在“差旅费结算申请”应用中显示“旅费”数据时，标准功能中的表格数据合计计算的功能就会失效。
想要计算关联记录里包含金额数据的合计值时，请参照这篇文章。
想要先尝试“引用表格数据”这一方法时，请在删除“差旅费结算申请”的“旅费”表格时一同删除“旅费合计”这个计算字段。
“出差申请”应用：
创建字段代码为“差旅费申请编号”的单行文本框。
（作为关联记录和分享功能的关联字段）添加关联记录列表字段，并将其设置为可引用“差旅费明细”应用中的数据。
- 有关要添加的字段的详细信息，请参阅下文。字段名称 字段类型 备考 差旅费申请编号 单行文本框 作为关联记录和分享功能的关联字段。 差旅费明细 关联记录列表 · 引用应用：差旅费明细
· 显示记录的条件：此应用的字段“差旅费申请编号”和要引用的应用字段“差旅费申请编号”
· 显示的字段：要在“差旅费结算申请”应用中显示的字段
· 有关如何设置关联记录列表，请参阅此处。
结束语
在本技巧中，介绍了如何在应用之间引用表格数据（^0^）/
另外还有许多其他有用的技巧，比如关联记录的自定义（日文）和表格的其他活用方法（日文）也可以了解一下♪