根据优先组织在门户页面上显示不同的内容! 〜kintone门户自定义介绍#2〜

cybozu发表于:2021年03月26日 14:35:37更新于:2021年10月08日 14:31:57

前言

这是使用“Kintone Portal Designer来进行门户自定义的第二篇文章!


您是否已阅读“使用kintone的应用管理门户的背景图像!

如果您尚未阅读,建议先阅读它。

本文将会介绍通过自定义来实现按照优先组织显示不同的门户内容。

门户的公告栏会显示应用中添加在文本编辑框里的内容。

0016064415b189f35bb0aa92aefbf0d

使用方法

本文基于会使用Kintone Portal Designer这一前提。

关于“Kintone Portal Designer”的使用方法,请参考“用Kintone Portal Designer来设计门户”。

使用此自定义时,请为使用此自定义的用户设置“优先组织”。
如未设置“优先组织”时,则会显示在管理门户显示内容的应用中登录的任何门户内容。

STEP1 创建一个管理门户上显示内容的应用

首先,在kintone里创建一个应用。

创建后设置以下字段:

  • 选择组织字段

  • 文本编辑框

※请记下每个字段的字段代码,以备之后使用。

接下来,添加一条记录。

组织选择字段中不要添加任何内容,在文本编辑框中输入“Hello kintone”并保存。

※如未添加记录,程序将发生错误。

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

  • 应用的应用ID

  • 刚添加的那条记录的记录编号

通过查看URL可以找到应用ID和记录编号。
例:https://{subdomain}.cybozu.cn/k/{ 应用ID }/show#record={ 记录编号 }

应用的使用方法

“选择组织”字段 
在“选择组织”字段中,输入要显示记录内容的组织。
仅向将该组织设为优先组织的用户显示内容。

文本编辑框
在文本编辑框中,输入需要在公告栏中显示的内容。
文本编辑框的内容将按原样显示在公告栏中。

00160645743770c89f6451feac1d6a1

STEP2 下载自定义所需的文件

下载以下zip文件并解压缩。

OrganizationSwitcher.zip

STEP3 更改自定义

解压zip文件,将“OrganizationSwitcher.json”导入“Kintone Portal Designer”。

如果您不知道如何导入,请参阅 如何使用Kintone Portal Designe
接下来,打开“Kintone Portal Designer”按照之前记下的内容,修改JavaScript。

1. 指定应用ID

让我们将下面的“12345”更改为之前记下的应用ID。

  // 指定管理应用
  const MASTER_APPID = 12345;


2. 指定当没有包含优先组织时需要显示的记录编号

让我们将下面的“1”更改为记下的记录编号。

  // 指定当没有设置优先组织时,需要显示的记录
  const DEFAULT_RECORD_NUMBER = 1;

3. 指定字段代码

指定文本编辑框的字段代码和选择组织字段的字段代码。

// 公告栏中显示文本编辑框的字段代码
const RICH_TEXT_EDITOR_CODE = '文本编辑框';
// 输入想要显示的组织
const ORGANIZATION_CODE = '选择组织';


STEP4 检查

到所有变更后,请按下“保存”按钮,返回到门户画面。
这时应该显示“Hello kintone”。

001606c29e211b34560ec6d8cb1198d

STEP5 确认优先级组织指定的内容是否正确显示

在之前新建的应用中新增另一条记录。
在“选择组织”字段中,输入您的优先组织。
在文本编辑框中输入“My Team Portal”,然后保存记录。
让我们回到门户画面。 它应该显示“My Team Portal”。

001606c2afe2eb2e786992a4d5c20bb

代码说明

在这里,我将详细解释JavaScript的内容。
这次使用的代码大致分为两部分“获取包含优先组织的记录”、“在门户页面上显示文本编辑框的内容”。

1.获取包含优先组织的记录

使用kintone REST API批量获取记录(在查询中指定条件)

执行API并获取记录后,将返回文本编辑框的内容。
当可以获取的记录数为0时,获取在DEFAULT_RECORD_NUMBER中设置的记录。

const fetchNoti = function() {
const params = {
'app': MASTER_APPID,
'query': ORGANIZATION_CODE + ' in (PRIMARY_ORGANIZATION()) limit 1',
'fields': [RICH_TEXT_EDITOR_CODE]
};
return kintone.api(kintone.api.url('/k/v1/records', true), 'GET', params).then(function(resp) {
if (resp.records.length === 0) {
return fetchDefaultNoti();
}
return resp.records[0][RICH_TEXT_EDITOR_CODE].value;
});
};

“'query': ORGANIZATION_CODE + ' in (PRIMARY_ORGANIZATION()) limit 1'”获取优先组织(粗体部分)包含“选择组织”字段值的一条记录。

如果执行操作的用户没有设置“优先组织”,则忽略“组织 in (PRIMARY_ORGANIZATION())”的条件,并检索所有满足其他筛选条件的记录。
※有关详细信息,请参阅“query”参数中可用的运算符和函数的"函数"部分 。

在“获取0条记录”时执行。

const fetchDefaultNoti = function() {
const defaultParams = {
'app': MASTER_APPID,
'id': DEFAULT_RECORD_NUMBER
};
return kintone.api(kintone.api.url('/k/v1/record', true), 'GET', defaultParams).then(function(resp) {
return resp.record[RICH_TEXT_EDITOR_CODE].value;
});
};

返回在DEFAULT_RECORD_NUMBER中添加记录的文本编辑框的内容。

2.在门户页面上显示文本编辑框的内容

在下面的部分中,我们将展示在1中获得的文本编辑框的内容。
在HTML中添加了一个ID,并使用该ID来表示要显示的位置。

// 指定显示位置的ID
const NOTI_AREA_ID = 'noti_area';
const notiElArea = document.getElementById(NOTI_AREA_ID);

由于文本编辑框的值包含了html的style式样,因此将该值以html的原样来显示。

const renderNotiContent = function(content) {
notiElArea.innerHTML = content;
};

执行与错误

最后,运行代码。

fetchNoti().then(renderNotiContent).catch(errorMessage);

如果某处发生错误,将执行以下处理。

const errorMessage = function(error) {
const notiDate = error.message;
alert('门户页面处理期间发生了错误。\n请与门户管理员联系。\n\n错误详情\n' + notiDate);
};


最后

我们将继续发布有关定制kintone门户的文章。
敬请期待。

此Tips在2019年10月版的kintone中得到确认。

附件:OrganizationSwitcher.zip • 2.01KB • 下载