使用kintone的应用管理门户的背景图像! ~ kintone门户自定义介绍#1 ~

betsy_yan发表于:2021年03月23日 17:48:36更新于:2021年04月16日 14:24:00

前言

2019年7月,发布了可轻松自定义kintone门户的“Kintone Portal Designer”(安装Kintone Portal Designer)。
使用此工具,创建自定义以便在应用中管理门户的背景。

这次,我们使用“Kintone Portal Designer”的“Import Sample Template”中的“basic-1column-photo”为模板来制作。

自定义画面

00160642f3d9499a93eb86bb91e7282

 

使用方法

本文基于使用“Kintone Portal Designer”进行操作的前提下讨论的。
关于“Kintone Portal Designer”的使用方法,请参考“用Kintone Portal Designer来设计门户”。

STEP1  准备管理图像的应用

首先,在kintone里创建一个应用。
应用里只需一个附件字段。
设置完附件字段后发布此应用。

※记下以下内容,以备之后使用。

  • 附件字段的字段代码
    (字段代码可从字段设置中查看、更改。)

0016063f0dca1d32e55732bf8975097

接下来,在刚创建完的应用内添加一条记录。
将要设置为背景图像的图像添加到附件中,并添加这条记录。

※ 记下以下内容,以备之后使用。

  • 应用的应用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;
  });
};

使用Kintone记录信息获取REST API


图像的获取与显示

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中确认过。


附件:basic-1column-photo-selector.zip • 4.65KB • 下载

    注意:贴代码时请注意格式并使用"代码语言",与本文无关的问题请至“讨论社区”提问。
    您需要登录后才可以回复