よく使うフォームブリッジとkViewerのカスタマイズ〜トヨクモkintoneフェス2024〜

お前誰？

トヨクモ株式会社の前CTOとしてフォームブリッジやkViewerなどkintone連携サービスの開発をしてきました。2014年の制度発足時からのkintoneエバンジェリストで、（自称）kintoneやkintone連携サービスのセキュリティ、パフォーマンス、カスタマイズなど高度な技術領域に詳しいマンです(^^)
今はトヨクモクラウドコネクト株式会社の取締役をしております。

これなに？

トヨクモkintoneフェス2024のカウントダウンカレンダーに参加させていただくことになりました。いつもとはちょっと違う記事を書き、トヨクモkintoneフェス2024に参加される方や参加を検討している方の参考になるアウトプットができればと思い書かせていただきます！

フォームブリッジのカスタマイズ

ラジオボタンの初期値解除

ラジオボタンフィールドで初期値が空の場合、初期値を解除するJS

(() => {
  "use strict";

  fb.events.form.created.push(state => {
    state.fields.forEach(field => {
      if (field.type === 'RADIO_BUTTON' && field.defaultValue === '') {
        state.record[field.code].value = '';
      }
    });

    return state;
  });
})();

フィールドサイズの % 指定

フィールドコードに width◯◯par が含まれている場合、 width を ◯◯% 指定に変更するJS

(() => {
  "use strict";

  const pattern = /width([0-9]|[1-9][0-9]|100)par/;

  fb.events.form.created = [function (state) {
    state.fields.forEach(field => {
      const resultMatch = field.code.match(pattern);
      if (resultMatch) {
        field.style.width = resultMatch[1] + '%';
      }
    });

    return state;
  }];
})();

kViewerのカスタマイズ

一覧スキップ（詳細ページへの自動遷移）

レコードが１件の場合、詳細ページに自動遷移するJS

(() => {
  "use strict";

  kv.events.records.fetched.push((state, response) => {
        const records = response.response.data.records;
        if (records.length === 1) {
            const code = records[0].__kviewer_record_code__;
            location.href = location.origin + location.pathname + '#/detail/' + code;
        }
    });
})();

ダッシュボードビューのモバイル対応

(() => {
  "use strict";

   kv.events.view.created.push(state => {
    const layout = state.view.mainContent.layout;
    if (document.body.clientWidth > 480) {
      return state;
    }
    let y = 0;
    for (let i = 0; i < layout.length; i++) {
      const element = layout[i];
      element.w = 100;
      element.x = 0;
      element.y = y;
      y += element.h;
    }

    return state;
  });
})();

最後に

各プロダクトのバージョンアップの影響を受けにくいコードにしていますが、バージョンアップの影響等で動かなくなることもあります。カスタマイズはトヨクモのサポート対象外ですので、保守コストが必ず発生すると考えてカスタマイズするかしないか判断すると良いかと思います。

トヨクモでサポート対象外の部分もトヨクモクラウドコネクトでは有償でサポートしています。ただ、僕自身がサポートできる範囲には限りがあるのでお手柔らかにお願いしますm(_ _)m