search
LoginSignup
0
Help us understand the problem. What are the problem?

posted at

updated at

何も更新しない更新アプリでkintoneの自動再計算を実現したい

はじめに

  • イシイケンタロウです。ハケをつくっている会社の兼業情シスでkintoneを触る係をしてます
  • kintone認定資格は3つ取得済です
  • その他にITストラテジストやシステム監査技術者などの国家資格をいくつか取得しています
  • kintoneのカスタマイズは社内向けのみで、プラグインは作ってません(作れません)
    main_image.jpg
    associate.png appdesignsp.png customization.png

自動計算フィールドを自動計算させたい

  • 既存のアプリに計算フィールドや自動計算文字列1行フィールドを追加しても、そのままでは追加したフィールドに変化はありません
  • excelのように自動的に計算させるには1レコードであれば一度編集画面を開いて保存する、複数レコードであればレコード番号を含んだcsvを書き出して同一csvを再度読み込む、といった作業が必要になります
  • この作業が結構手間なので、アプリIDを入力してボタンクリックだけで自動計算できる専用アプリを作成します
  • 元ネタは斎藤さんの記事です
  • きっかけはこのツイート

完成イメージ

  • ヘッダーにテキストボックスとボタンを置いただけです
  • 一覧画面のヘッダーしか使わないのでフィールド何もいりません
    pcimage.png
    spimage.png

事前準備

JavaScript記述

emptyUpdatePC.js
/*
  ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼
  ▼
  ▼                     アプリ空更新PC版
  ▼
  ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲
*/
(() => {
    'use strict';

/*
  ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
  ●
  ●                          定数宣言
  ●
  ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
*/
  // kintone/rest-api-client設定 
  const client = new KintoneRestAPIClient();
/*
  ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
  ●
  ●                          イベント
  ●
  ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
*/
/*
  ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼
    レコード一覧画面表示時
  ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲
*/    
  kintone.events.on('app.record.index.show', (event) => {
        
    // 増殖バク回避
    if(document.getElementById('appIdText')){
      return event;
    }
    
    // ヘッダースペース取得
    const headerSpace = kintone.app.getHeaderMenuSpaceElement();
    
    // アプリIDテキストボックス
    const appIdText = new Kuc.Text({
      placeholder: 'アプリID',
      id: 'appIdText'
    });

    // アプリIDテキストボックスをヘッダースペースに追加
    headerSpace.appendChild(appIdText);

    // アプリ空更新ボタン
    const emptyUpdateButton = new Kuc.Button({
      text: 'アプリ空更新',
      type: 'submit',
      id: 'emptyUpdateButton'
    });
    
    // アプリ空更新ボタンクリック時
    emptyUpdateButton.addEventListener('click', async () => {

      // アプリIDの取得
      const appId = document.getElementById('appIdText').value;

      // アプリID未入力の場合は何もしない
      if(appId === ''){
        return;
      }

      // レコード取得用パラメータ(レコード番号だけ)
      const paramGet = {
          'app': appId,
          'fields': ['__ID__']
      };

      // レコード取得
      const respGet = await client.record.getAllRecords(paramGet);

      // 取得したレコード番号をそのまま更新用レコードとする
      const paramRecords = [];
      respGet.forEach((record) => {
          paramRecords.push({'id': record.$id.value});
      });
      
      // レコード更新用パラメータ
      const paramPut = {
          'app': appId,
          'records': paramRecords
      };
      
      // レコード更新
      const respPut = await client.record.updateAllRecords(paramPut);

      // アプリ名を取得して完了アラート
      const paramGetApp = {
          'id': appId
      };
      const respGetApp = await kintone.api(kintone.api.url('/k/v1/app', true), 'GET', paramGetApp);
      swal(respGetApp.name + ' を空更新しました');

    });
    
    // アプリ空更新ボタンをヘッダースペースに追加
    headerSpace.appendChild(emptyUpdateButton);
    
  });    

})();
emptyUpdateSP.js
/*
  ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼
  ▼
  ▼                    アプリ空更新SP版
  ▼
  ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲
*/
(() => {
  'use strict';

/*
  ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
  ●
  ●                          定数宣言
  ●
  ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
*/
  // kintone/rest-api-client設定 
  const client = new KintoneRestAPIClient();

/*
  ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
  ●
  ●                          イベント
  ●
  ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
*/
/*
  ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼
    レコード一覧画面表示時
  ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲
*/    
  kintone.events.on('mobile.app.record.index.show', (event) => {
        
    // 増殖バク回避
    if(document.getElementById('appIdText')){
      return event;
    }
    
    // ヘッダースペース取得
    const headerSpace = kintone.mobile.app.getHeaderSpaceElement();
    
    // アプリIDテキストボックス
    const appIdText = new Kuc.MobileText({
      placeholder: 'アプリID',
      id: 'appIdText'
    });
    // アプリIDテキストボックスをヘッダースペースに追加
    headerSpace.appendChild(appIdText);

    // アプリ空更新ボタン
    const emptyUpdateButton = new Kuc.MobileButton({
      text: 'アプリ空更新',
      type: 'submit',
      id: 'emptyUpdateButton'
    });
    
    // アプリ空更新ボタンクリック時
    emptyUpdateButton.addEventListener('click', async () => {

      // アプリIDの取得
      const appId = document.getElementById('appIdText').value;
      // アプリID未入力の場合は何もしない
      if(appId === ''){
        return;
      }

      // レコード取得用パラメータ(レコード番号だけ)
      const paramGet = {
          'app': appId,
          'fields': ['__ID__']
      };
      // レコード取得
      const respGet = await client.record.getAllRecords(paramGet);

      // 取得したレコード番号をそのまま更新用レコードとする
      const paramRecords = [];
      respGet.forEach((record) => {
          paramRecords.push({'id': record.$id.value});
      });
      
      // レコード更新用パラメータ
      const paramPut = {
          'app': appId,
          'records': paramRecords
      };
      
      // レコード更新
      const respPut = await client.record.updateAllRecords(paramPut);

      // アプリ名を取得して完了アラート
      const paramGetApp = {
          'id': appId
      };
      const respGetApp = await kintone.api(kintone.api.url('/k/v1/app', true), 'GET', paramGetApp);
      swal(respGetApp.name + ' を空更新しました');

    });
    
    // アプリ空更新ボタンをヘッダースペースに追加
    headerSpace.appendChild(emptyUpdateButton);
    
  });    
})();

おわりに

  • IEでは動きません
  • 見た目気になる方はmargin修正してください
  • あ、ゲストスペースのアプリに対応させるの忘れた対応してませんスミマセン
  • ご要望あれば別途記事書きます
  • そして例によって塗装用ローラーもつくってます
    main_image (1).jpg

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
0
Help us understand the problem. What are the problem?