前言
2019年7月，发布了可轻松自定义kintone门户的“Kintone Portal Designer”（安装Kintone Portal Designer）。
使用此工具，创建自定义以便在应用中管理门户的背景。
这次，我们使用“Kintone Portal Designer”的“Import Sample Template”中的“basic-1column-photo”为模板来制作。
自定义画面
使用方法
本文基于使用“Kintone Portal Designer”进行操作的前提下讨论的。
关于“Kintone Portal Designer”的使用方法，请参考“用Kintone Portal Designer来设计门户”。
STEP1 准备管理图像的应用
首先，在kintone里创建一个应用。
应用里只需一个附件字段。
设置完附件字段后发布此应用。
※记下以下内容，以备之后使用。
附件字段的字段代码
（字段代码可从字段设置中查看、更改。）
接下来，在刚创建完的应用内添加一条记录。
将要设置为背景图像的图像添加到附件中，并添加这条记录。
※ 记下以下内容，以备之后使用。
应用的应用ID
之后要运用的记录的记录编号
通过查看URL可以找到应用ID和记录编号。
示例：https://{subdomain}.cybozu.cn/k/{ 应用ID }/show#record={ 记录编号 }
STEP2 下载自定义所需的文件
下载以下zip文件，解压。
basic-1column-photo-selector.zip
STEP3 更改自定义
在“Kintone Portal Designer”中导入解压后的“basic-1column-photo-selector.json”文件。
如若不确定如何导入，请参考“Kintone Portal Designer的使用方法”。
而后，使用“Kintone Portal Designer”把之前记录下来的内容替换掉JavaScript的内容。
1. 更改应用ID
将以下部分中的“12345”更改为之前记录下来的应用ID。
//指定要获取的应用 var APP_ID = 12345;
2. 更改记录编号
将以下部分中的“1”更改为之前记录下来的记录编号。
//指定要获取的记录 var RECORD_ID = 1;
3. 更改字段代码
将以下部分中的“background_img”更改为之前记录下来的字段代码。
// 指定要获取的字段代码 var IMAGE_FIELD_CODE = 'background_img';
完成这些更改后点“Save”保存，返回到门户。
这样，附件中添加的图像就设置成门户的背景了。
代码说明
现在，我们来详细了解下JavaScript的内容。
这次使用到的代码大致分为“获取图像的fileKey”和“图像的获取与显示”两部分构成。
我们分别来说明。
获取图像的fileKey
1. 输入应用ID和记录ID
//指定要获取的应用 var APP_ID = 12345; //指定要获取的记录 var RECORD_ID = 1;
2. 输入包含图像数据的附件字段代码
// 指定要获取的字段代码 var IMAGE_FIELD_CODE = 'background_img';
3. 获取分配给记录中添加的图像的fileKey
var fetchImageFileKey = function() {
var params = {
'app': APP_ID,
'id': RECORD_ID
};
return kintone.api(kintone.api.url('/k/v1/record', true), 'GET', params).then(function(resp) {
return resp.record[IMAGE_FIELD_CODE].value[0].fileKey;
});
};图像的获取与显示
1. 使用“3”中获取的fileKey创建图像的blobURL。
使用下载文件API。下载附件请参考文档内的“JavaScript范例”。
var loadImage = function(imageFileKey) {
var domain = document. domain;
var url = 'https://' + domain + '/k/v1/file.json?fileKey=' + imageFileKey;
var xhr = new XMLHttpRequest();
xhr. open('GET', url);
xhr. setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr. responseType = 'blob';
xhr. onload = function () {
if (xhr. status === 200) {
success
var blob = new Blob([xhr. response]);
var url = window. URL || window. webkitURL;
var imageURL = url. createObjectURL(blob);
renderImage(imageURL);
} else {
error
console. log(xhr. responseText);
}
};
xhr. send();
};2. 在特定类选中的部分添加style
这次，将图像添加到整个区域的背景中。
var renderImage = function(imageURL) {
var portalBackground = document.getElementsByClassName('designportal designportal-basic');
portalBackground[0].setAttribute('style', 'background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(' + imageURL + ');');
};style部分的说明
这次，将style的属性添加到显示背景图像的位置，并使用CSS的background属性来显示图像。
指定的内容如下：
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(' + imageURL + ');
linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4))
指定图像稍微暗一些。url(' + imageURL + ')
这是图像的blobURL。
运行
在最后一行中，运行代码。
fetchImageFileKey().then(loadImage);
最后
今后我们将继续发布有关kintone门户自定义的相关文章。
尽情期待。
此Tips在2019年07月版的 kintone中确认过。