Kintoneテーブル操作のカスタマイズ事例

本

Kintoneのフォーム内のテーブルを操作するJavacriptカスタマイズ事例の記事を集めたマガジンです。テーブル内のデータ並び替え、科目別集計、行番号追加など、テーブル操作に…

運営しているクリエイター: アプリ活用研究会

#kintone

Kintoneテーブル内の数値を科目別に集計する

やりたいこと Kintoneの交通費申請アプリで、サブテーブルの経費明細に「経費分類」を追加して、経費分類毎に小計を表示したい。具体的な計算結果イメージは、以下の通りです。上記の様な集計は、エクセルならばSUMIF関数で簡単に実現できるのですが、Kintoneの標準機能には、SUMIF関数の様な機能が有りません。今回もJavascriptを用いたカスタマイズで経費分類毎の集計を実現します。 /* サブテーブルの数値を経費区分で小計して表示する */(() => {

¥2,000

テーブル内に行番号を表示して任意の行をコピーする

やりたいこと Kinotneアプリでテーブル内データの指定した行を複製するフォームとボタンを作成してみました。これは、テーブル内の入力データを同じ内容で何度も入力する手間を少しでも省くために行コピー機能を実装したモノです。コピーする行を指定するために、行の先頭に行Noも表示する様にしました。デモ画面デモ画面では、テーブル内のデータの行番号を指定して「行複製」ボタンをクリックすることで、指定した行と同じ内容の行を下に追加します。レコードの新規登録と編集画面で動作

テーブルデータを指定した条件で並び替えて行番号も振り直す

やりたいこと Kinotneアプリでテーブル内データを指定した条件で何回でも並び替え出来るフォームとボタンを作成してみました。これは、テーブル内の入力データを後から並び替え表示したいという要望が色々な条件で次々と出て来るため、フォーム上の条件指定で任意に並び替え出来る機能を実装したモノです。デモ画面デモ画面では、テーブル内のデータ（日付、金額、メモ）を任意で指定し、ソート順も昇進／降順を選択して［並び替え実行］ボタンをクリックすれば、テーブル内のデータを指定の条件

指定した行数でテーブルの行にフォームの値をコピーしたい

やりたいこと Kintoneのフォームで、商品コード、商品名、テーブルがあり、テーブル内にその商品のモデル明細（仕様の名称など）を記録したい。モデル明細は、同じ名称で寸法や色などの仕様が違うだけなので、追加したい行数を指定して、追加行数分の商品コード＋行番号、モデル名をコピーしてテーブルにセットしたい。という少し複雑でかなり具体的な要望を頂きました。言葉にすると少しややこしいのですが、実現したい機能をフォームのイメージで説明すると下図の通りです。ポイントは、フィー

ルックアップのコピーフィールドを編集可能にする（テーブル内を含む）

やりたいこと Kintoneのルックアップでコピーしたフィールドを編集可能にしたい。テーブル内でルックアップしたコピーフィールドも編集可能にしたい。 ※今回は、テーブル内フィールドの操作方法が本題です Kintoneのルックアップは便利な機能ですが、参照元のアプリから値をコピーする様に設定したフィールドは編集できない仕様です。（他アプリの値をコピーする前提なので編集不可なのが当然です）以下の受注管理アプリでは、顧客名をルックアップして担当部署と電話番号をコピーして

テーブルの邪魔な列を非表示にする

やりたいこと kintoneの経費精算アプリで、科目別の集計行を計算フィールドで作成してますが、新規レコード登録と編集画面では、テーブルが横長になり過ぎて操作しづらいので、科目別の計算フィールドを非表示にしたい。 kintoneではsumif関数が使えないので、代替手段としてkintoneヘルプページの「kintoneにSUMIF関数はありますか？」で紹介されているアプリ作成例とJavascriptカスタマイズの合わせ技です。テーブルの科目別の金額を集計するために、３

アプリのテーブルに入力補助機能を付加する

やりたいこと Kintoneアプリのテーブル中のフィールドに入力補助機能を付けたい。具体的には、テーブルの各項目にプレイスホルダー（代用文字）やツールチップ（吹き出し型のヒント）を実装したい。標準機能のテーブルでは、この様なカスタマイズは出来ませんので、本稿では、kintone UI Component v1のTableを利用してカスタマイズ版のテーブル（ＫＵＣ版テーブルと呼びます）を作成する事例を紹介します。ＫＵＣ版テーブルの役割はテーブル枠機能だけなので、他のコ

アプリのテーブル内のデータを日付順で並び替える

やりたいことＫintoneアプリのテーブルにデータを入力完了した後で「日付の降順で入力するルールでやりし直して」と言われて、困った人からのリクエストです。標準機能では、テーブルの要素を並び替えすることはできません。（2023年10月20日現在）データの順番に注意しながら入力するのは、ストレス作業ですね。解決策として、テーブル入力の順番がバラバラでも「保存」ボタンで日付の降順（又は昇順）で自動的に並び替える機能を実装しました。デモ画面テーブル内のデータを並