Tips

タイトルに「名前＋日付」を結合してみよう！

著者名：菊地 宏司

目次

はじめに

固定リンクがコピーされました

日報など毎日提出するものは「名前」＋「日付」みたいな分かりやすいタイトルを付けたいものですよね。
でも、毎回タイトルに手入力するのはちょっと煩わしい。
そんな時にJavaScriptを使ってレコード内の項目を結合して自動で入力する方法について紹介します。

デモ環境

固定リンクがコピーされました

デモ環境で実際に動作を確認できます。
https://dev-demo.cybozu.com/k/168/ (External link)

ログイン情報は cybozu developer networkデモ環境 で確認してください。

完成イメージ

固定リンクがコピーされました

イメージとしては以下のキャプチャのように「保存」を押すと自動で「タイトル」が入力されるイメージです。

「タイトル」は空のまま「保存」をクリックします。

「タイトル」が自動で入力されます。

アプリの準備

固定リンクがコピーされました

以下のフィールドを配置したアプリを作成します。

フィールドの種類 フィールド名 フィールドコード
文字列（１行） タイトル タイトル
ユーザー選択 ユーザー選択 名前
日付 日付 日付
文字列（複数行） 本文 本文

サンプルコード

固定リンクがコピーされました

では、さっそくコードを見てみましょう。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

/*
 * kintone sample program
 * Copyright (c) 2016 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */
kintone.events.on(['app.record.create.submit', 'app.record.edit.submit'], (event) => {
  const record = event.record;
  const recperson = record.名前.value;
  const personNameAry = [];

  for (let num = 0; num < recperson.length; num++) {
    personNameAry.push(recperson[num].name);
  }

  record.タイトル.value = personNameAry + record.日付.value;
  return event;
});

まず、新規・編集画面の保存実行前イベントを取得します。

8

kintone.events.on(['app.record.create.submit', 'app.record.edit.submit'], (event) => {

次にレコード情報を取得します。
取得したユーザー名は、配列にセットします。

 9
10
11
12
13
14

const record = event.record;
const recperson = record.名前.value;
const personNameAry = [];
for (let num = 0; num < recperson.length; num++) {
  personNameAry.push(recperson[num].name);
}

最後に、名前と日付のフィールドの値を結合してタイトルに設定します。

17
18

record.タイトル.value = personNameAry + record.日付.value;
return event;

これでタイトルの自動入力は完了です。
たった十数行のお手軽さでちょっとした面倒が解消されるカスタマイズです。

今回のカスタマイズにはフォームに以下の設定を付けるとより使いやすくなります。

  • 名前と日付のフィールドは必須入力を付ける。
  • タイトルの項目は入力不可を付ける。
information

このTipsは、2022年8月版kintoneで動作を確認しています。