Kintone on qwerty.work

【Kintone】モバイルのテーブル内の自動計算の文字を置き換えるJavascript

Mon, 13 Feb 2023 00:00:00 +0000

自動計算という文字を表示させたくない

キントーンで計算式を設定したフィールドがあります。モバイルで編集画面を表示した際、その項目には**『自動計算』と表示されています。ここの表示幅をCSSなどで狭くしている場合、縦に表示されてしまい、レイアウトが崩れてしまいます。そこで、Javascriptで仮に「*」**に置換て表示するスクリプトを書いたのでメモ。

こちらを参考にしてうまく動かなかった際はすみません。

Javascriptのソース例

テーブルのレコードを追加するボタンが押されたら、テーブル内にあるレコードの数を確認してfor文で繰り返し**「自動計算」を「*」**に置換えます。

/* 
　自動計算フォームに表示される「自動計算」の文字を書き換え
*/
(function() {
  'use strict';
   kintone.events.on(['mobile.app.record.create.show', 'mobile.app.record.edit.show', 'mobile.app.record.create.change'], function(event) {
      const record = event.record;
      var subtable = record.テーブル.value;
      var row = subtable.length;

      for (var i = 0; i < row ; i++ ){
        var elm = document.getElementsByClassName('forms-label-gaia expression-field-gaia');
        elm[i].textContent = '*';
      }
      return event;
      });
})();

jQueryのソース例

こちらはsetTimeoutで遅延させています。テーブルに行を追加したときに遅延させないと置換ができないことがあったためです。

(($) => {
  'use strict';

  kintone.events.on(['mobile.app.record.create.show','mobile.app.record.edit.show'], (event) => {
    $('.subtable-row-buttons-gaia').click(() => {
      //window.alert('レコード追加イベントが呼び出されました');
      var record = event.record;
      var subtable = record['テーブル'].value + 1;
      
      setTimeout(function(){
        for (var i = 0; i < subtable.length; i++) {
          var elm = document.getElementsByClassName('forms-label-gaia expression-field-gaia');
          elm[i].textContent = '*';
        }
      },1000);
    });
    //window.alert('レコード追加イベントが呼び出されました');
  });
})(jQuery);

【Kintone】詳細画面を常に編集モードで開くJavascript

Thu, 09 Feb 2023 00:00:00 +0000

キントーンでレコード一覧から詳細画面を開く際、編集が目的のことが多いのですが、ワンクッション挟んで編集ボタンをクリックしなければなりません。そこで、詳細画面を開いたらいきなり編集モードにする方法をメモ。

考え方

通常、詳細画面を開いたとき、URLにはmode=showとなっています。詳細画面が開かれたとき、Javascriptでmode=editのページに転送します。

ソース例

PC版の場合

(function() {
  'use strict';
  kintone.events.on('app.record.detail.show', function(event) {
    if ( location.href.match(/&mode=show/)) {
      //strにmode=showを含む場合の処理
      //何もしない
    } else {
      location.href += '&mode=edit';
    }
  });
})();

モバイル版の場合

(function() {
  'use strict';
  kintone.events.on('mobile.app.record.detail.show', function(event) {
    if ( location.href.match(/#mode=show/)) {
      //strにmode=showを含む場合の処理
      //何もしない
    } else {
      location.href += '#mode=edit';
    }
  });
})();

【Kintone】ルックアップ項目を編集可能に変更するJavascript

Wed, 08 Feb 2023 00:00:00 +0000

キントーンのテーブル内にルックアップフィールドを設定しています。ルックアップによってコピーされたフィールドは編集画面で編集できなくなっています。この編集不可の状態を解除して編集・保存ができるようにするJavascriptをメモ。

考え方

ルックアップでコピーされた項目のINPUTタグに入力不可にされるためのdisabledが指定されていますので、このdisabledをJavascriptで無効化します。

<input id="12_12345678-:h0-text" type="text" class="input-text-cybozu" disabled="">

以下のページにあったソースを参考にさせていただいたところ、うまくできました。

https://cybozudev.zendesk.com/hc/ja/community/posts/206984406 https://cybozudev.zendesk.com/hc/ja/community/posts/206984406

Javascriptソース

「明細」はテーブルのフィールドコードを表しています。「単価」「項目」はテーブル内に配置してる項目のフィールドコードを表しています。

(function() {
 "use strict";

 // 新規登録・編集画面
 kintone.events.on(['app.record.create.show', 'app.record.edit.show'], function(event) {
 var record = event.record;

 // 通常のフィールドのdisabled解除処理
 record['テーブルでない項目名']['disabled'] = false;

 // 「明細」サブテーブルのdisabled解除処理
 var subtable = record['明細'].value;
 for (var i = 0; i < subtable.length; i++) {
 subtable[i].value['単価'].disabled = false;
 subtable[i].value['項目'].disabled = false;
 }
 return event;
 });

 // 「明細」サブテーブルの変更イベント（行追加削除を拾う）
 kintone.events.on(['app.record.create.change.明細', 'app.record.edit.change.明細'], function(event) {
 // 「明細」サブテーブルのdisabled解除処理
 var row = event.changes.row;
 row.value['単価'].disabled = false;
 row.value['項目'].disabled = false;
 return event;
 });

})();

jQueryで行う場合のソース例

例えば、**「項目」**フィールドのクラス名が552345だった場合。項目を変更不可にロックしているdisabled-cybozuというクラスをjQueryで削除して、編集可能にします。

なお、テーブル内のレコードに変更があった際、またフィールドがロックされてしまうことがあるので、ここでは何かbuttonがクリックされたら**1.5秒後**に実行するようにしています。

(($) => {
  'use strict';

  kintone.events.on(['app.record.create.show','app.record.edit.show', 'app.record.create.change'], (event) => {
    $('button').click(() => {
      //window.alert('レコード追加イベントが呼び出されました');
      var record = event.record;
      
      setTimeout(function(){
        //window.alert('レコード追加イベントが呼び出されました');
        
        $('.value-552345 div').removeClass('disabled-cybozu');
        
      },1500);
      
    });
    //window.alert('レコード追加イベントが呼び出されました');
  });
})(jQuery);

【Kintone】ExcelからVBAでAPI連携してシートに直接データを取得する方法

Thu, 26 Jan 2023 00:00:00 +0000

キントーンにある標準の帳票の書き出し機能はデザイン性に乏しく使い物になりません。エクセルやPDFで帳票出力ができるプラグインは存在していますが、高額な料金がかかるものが多くてハードルが高いです。そこで、あらかじめ計算式が組み込まれてレイアウトが整ったエクセルからキントーンのデータを直接読み込むことができればな～と、方法をいろいろ探したらあったのでメモ。

Excelに読み込む方法の参考ページ

キントーンとエクセルを連携させるプラグインが存在しますが、無料かつ自力で読み込む方法をメモ。

https://qiita.com/t0ru/items/e11c5508cca9abb8fd4b https://qiita.com/t0ru/items/e11c5508cca9abb8fd4b

https://caryncolabo.com/kintonedatareaderforvba/ https://caryncolabo.com/kintonedatareaderforvba/

Amazonの本（キンドル）

https://www.amazon.co.jp/dp/B00UV83GPM https://www.amazon.co.jp/dp/B00UV83GPM

試してみたら簡単にできた

上記の「kintoneとExcelを連携するためのVBAクラスを作りました！｜かりんこラボ」にあった方法を試したところ、簡単にキントーンの情報をエクセルのシートに読み込むことができました。

まずは必要な物をダウンロード

以下の3つをそれぞれのページからダウンロード。

モジュールをインポート

Dictionary.clsとJsonConverter.basはエクセルにインポートする必要があります。インポート方法はエクセルの**「開発」タブにある「Visual Basic」**から行います。

エディタが起動したら**[ファイル]-[ファイルのインポート]**からそれぞれのファイルを読み込めばOKです。

データを読み込む

あとはexample.xlsmの**「データ取得」**ボタンを押してキントーンのID/パスワードを入力すれば、新しいシートにレコード読み込まれます。

レコード数が全部で2500あったのですが、きれいに全部読み込むことができました。かりんこラボさんありがとうございます。

【Kintone】関連レコード一覧内の金額や数値を集計してフィールドに登録するJavascript

Thu, 19 Jan 2023 00:00:00 +0000

関連レコードに合計を表示したい

Kintone（キントーン）で請求書や勤怠管理などで、明細を関連レコード一覧で表示するアプリを作成したのですが、金額や時間の合計を登録できたらな～と検索してみたら方法がありましたのでメモ。アプリにJavascriptを登録したら正常に動きました。

関連レコード一覧を表示するアプリに「数値」パーツで作った「合計」というフィールドに、レコード保存時に計算された値が表示され、保存できました。しかし、最初のレコード保存では表示されず、２回目の保存のタイミングで表示されるので、改善の余地ありです。

ソース1

AAA1、AAA2、BBB、CCC、DDDをそれぞれアプリで使用している項目のフィールドコードに置換て使用します。フィールドコードは英数に限らず日本語でも大丈夫です。

(function() {
  kintone.events.on(['app.record.edit.show','app.record.create.change.AAA2'], function(event) {
    const appId = kintone.app.getRelatedRecordsTargetAppId("BBB");
    const query = 'AAA1="' + event.record['AAA2'].value + '"'; 
    const body = {
      'app' : appId,
      'query' : query
    };
    kintone.api(kintone.api.url('/k/v1/records', true), 'GET', body, function(resp) {
      var sum = 0;
      resp.records.forEach((record)=>{
        sum += record['CCC'].value ? parseInt(record['CCC'].value) : 0;
      });
       event.record['DDD'].value = sum;
       kintone.app.record.set(event);
    });

    return event;
  });  
  
})();

設定するフィールドコードの説明

例えば、リレーションの関係が請求書アプリと請求書明細アプリだったとしたら、以下のようになります。

AAA1

「関連レコード一覧」の設定で「表示するレコードの条件」に設定している主キーとなるフィールドコード（関連レコード一覧を呼び出すアプリ側のフィールドコード）。

（例）請求書アプリ側の請求書ID（レコードID）

AAA2

「関連レコード一覧」の設定で「表示するレコードの条件」に設定している外部キーとなるフィールドコード（関連レコード一覧に呼び出されるアプリ側のフィールドコード）。

（例）請求書明細アプリ側の請求書ID

BBB

「関連レコード一覧」パーツに設定したフィールドコード（関連レコード一覧を呼び出す****アプリ側のフィールドコード）。

（例）請求書アプリ側の明細を表示する「関連レコード一覧」パーツのフィールドコード

CCC

関連レコード一覧に呼び出されるアプリ側にある集計対象のフィールドコード。

（例）請求書明細アプリ側の「金額」フィールド

DDD

集計結果を表示したいパーツのフィールドコード（関連レコード一覧を呼び出す****アプリ側のフィールドコード）。

（例）請求書アプリ側の「合計」フィールドコード

ソース2

以下のソースでも動作しました。こちらの方がわかりやすいかもしれません。

(() => {
    'use strict';
  
    const events = [
      'app.record.detail.show',
      'app.record.edit.show'
    ];
    kintone.events.on(events, (event) => {
      const clientRecordId = event.recordId;
      const relatedAppId = kintone.app.getRelatedRecordsTargetAppId('請求明細一覧');
      const query = '請求書ID="' + event.record['請求書ID'].value + '"';
      // const query = `"${clientRecordId}"=請求書ID`; //レコードIDを使用する場合
      const outputFields = ['金額'];
      const appUrl = kintone.api.url('/k/v1/records');
  
      const params = {
        'app': relatedAppId,
        'query': query,
        'fields': outputFields
      };
    
      kintone.api(appUrl, 'GET', params, (resp) => {
        let amount = 0;
        for (let i = 0; i < resp.records.length; i++) {
          //amount += parseFloat(resp.records[i].金額.value);
          amount += parseFloat(resp.records[i].金額.value) ? parseFloat(resp.records[i].金額.value) : 0;
        }

        event.record['合計'].value = amount;
        kintone.app.record.set(event);
        return event;
      });
    });
  })();