[kintoone] Teams 알림 플러그인을 만들었어요.

모티프

규격.

프로젝트 작성

$ create-kintone-plugin プロジェクト名

구성 화면 만들기

그림 완성

코드

<section class="settings">
  <h2 class="settings-heading">プラグインの設定</h2>
  <p class="kintoneplugin-desc">teamsから取得したwebhookのURLを入力してください</p>
  <form class="js-submit-settings">
    <p class="kintoneplugin-row">
      <label for="message">
        URL:
        <input type="text" class="js-text-message kintoneplugin-input-text">
      </label>
    </p>
    <p class="kintoneplugin-row">
        <button type="button" class="js-cancel-button kintoneplugin-button-dialog-cancel">Cancel</button>
        <button class="kintoneplugin-button-dialog-ok">Save</button>
    </p>
  </form>

설정 저장 및 불러오기

코드

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

  const form = document.querySelector('.js-submit-settings');
  const cancelButton = document.querySelector('.js-cancel-button');
  const url = document.querySelector('.js-text-message');
  const config = kintone.plugin.app.getConfig(PLUGIN_ID);

  console.log(form, cancelButton, url, config);

  if (config.url) {
    url.value = config.url;
  }
  form.addEventListener('submit', event => {
    event.preventDefault();
    kintone.plugin.app.setConfig({url: url.value}, () => {
      window.location.href = '../../flow?app=' + kintone.app.getId();
    });
  });
  cancelButton.addEventListener('click', () => {
    window.location.href = '../../' + kintone.app.getId() + '/plugin/';
  });
})(kintone.$PLUGIN_ID);

응용 프로그램 사이드 프로세싱

코드

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

  kintone.events.on('app.record.create.submit.success', (event) => {
    const config = kintone.plugin.app.getConfig(PLUGIN_ID);
    const webhookUrl = config.url;

    const payLoad = {
      'text': `新規レコードが追加されました。`
    };

    return new kintone.Promise((resolve, reject) => {
      kintone.proxy(webhookUrl, 'POST', {}, payLoad, (body, status, headers) => {
        resolve(event);
      });
    });
  });
})(kintone.$PLUGIN_ID);

감상