2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【kintone】レコードの取得と値の更新-kintone JavaScript API(初心者/入門)

Last updated at Posted at 2024-02-23

初めに

イベントが始まったらレコードを取得して、値を書き換える。
また、任意のタイミングで値を書き換えたい場面ありますよね。
その扱いの違いのサンプルを提示していきたいと思います。

今回はkintone JavaScript APIを使用します。より詳細が知りたい方は下記公式ドキュメントにてご確認ください。大変わかりやすく書かれています。

対象

eventとkintone.app.record.get()で取得したレコードの使い分けが分からないとお困りの方

手順

1.アプリにフィールドコードテキストという文字列を設置してください。(項目名でなくフィールドコード)

2.下記コードをコピペしてコードエディタ等に張り付け、hello.jsなどのファイル名で保存してください。
3.アプリ設定から設定→JavaScript / CSSでカスタマイズに行き、hello.jsをアップロードして保存:writing_hand:
4. アプリを更新:v:
5.レコードの編集を開く。:thermometer_face:
6.開いたタイミングでテキストが書き換えられます。ボタンを押下するとそのタイミングでのテキスト更新が入ります。

説明

ルールは2つあり

  • イベントが始まって終わる間に値を更新したい場合はevent.recordで値を書き換え、return eventで返してあげる
  • 任意のタイミングで値を取得して更新したい場合は、kintone.app.record.get()で取得してkintone.app.record.set()で値を更新してあげる

イベント内での更新について、今回のサンプルは編集イベントです作成しましたが、保存前イベントで値を書き換えて保存するときによく使っています。例えばユーザーが指定の値を入れなかった時に警告をだしてあげるなど。
また、kintone.app.record.get()kintone.app.record.set()はボタン押した時に取得・更新したい:cold_sweat:という時に使います

コード

hello.js
(() => {
  'use strict';
  const fieldCode = "テキスト"
  
  // ボタン押下時に書きかえる
  const updateFunction = () =>{
    // ボタン押下時の現在のレコードを取得
    const res = kintone.app.record.get()
    // 扱いやすいようにrecordを宣言
    const record = res.record
    
    record[fieldCode].value = "ボタンのテキスト"
    // 更新したrecordを更新。この時最初に取得したresを引数に渡す
    kintone.app.record.set(res)
  }

  // 編集画面を開いた時に動くサンプルにします。editです。
  kintone.events.on('app.record.edit.show', (event) => {
    // イベントで扱えるレコード
    const record = event.record;
    
    alert("編集のイベント")
    record[fieldCode].value = "イベントで書き換えたテキスト"
    
    // ボタンの設置と作成
    const button = document.createElement("button")
    button.innerText = "書き換え"
    button.addEventListener("click",updateFunction)
    
    // kintoneに表示する要素(位置)を取得して、ボタンを設置。
    const el = kintone.app.record.getHeaderMenuSpaceElement()
    el.appendChild(button)

  // 必ずeventを返してあげる
  return event
    
  });
  
})();

おわりに

JavaScript Apiを使った値の取得と更新についてのサンプルでした。

ちなみに、値の更新はJavaScriptApiでは追加、編集、保存前等に使用できます。
もし詳細や一覧画面で外側から値を更新したい場合はRestApiを使って更新してください。
他のアプリから値を持ってきたい場合も同様です。

楽しいkintoneライフを:blush:

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?