新規投稿

吹き出しで「文字列（複数行）」の入力が出来る機能が欲しいのですが。。。

豊和会　本部

2022年08月05日 01:44

いつも大変お世話になっております。本日はこのような機能そのものがあるのかどうか、もしくはこのようなプラグインをご存知の方がいらっしゃらないかどうか、教えて頂きたく投稿致しました。

この機能そのものは、kintoneとは違うソフトのものなのですが、そのソフトからkintoneに移行するにあたり、同じような表現が出来ればと思っております。。。。

普段は、グレーの無地のボタン（ラベル？）なのですが、シングルクリックをすると、文字列（複数行）の入力が可能で、保存すると元のグレーのボタン（ラベル？）に戻ります。。。説明が拙いので画像も添付致します。

8件のコメント

Lorenz Ras 2022年08月06日 01:29

答えではないですが、以下の感じでしょうか。

https://codesandbox.io/s/bold-forest-h67c3b?file=/src/index.js

社内ではReactを利用しているので、パッケージが豊富ですが、他の方がどうしているか、知りたいです。

当投稿フォローさせて頂きます。

Lorenz Rasにより編集されました 2022年08月06日 01:35

豊和会　本部 2022年08月08日 01:13

Lorenz Rasさん

いつもお世話になっております。

何という事！驚きすぎて言葉も出ませんが、まさに見せて頂いた通りです。

なんですが、、、このレベルのプログラミングは、我々には到底不可能でして、、、

まさにこの通りの機能をプラグインで使いたいのですが、どこかで提供しているところがありませんでしょうか。。。

mls-hashimoto 2022年08月09日 04:54

SweetAlert2を使えば比較的簡単に近いことを実装できるかと思います。

詳細が不明なので以前の投稿にあった内容を元に作ってあります。ひとまず最低限度の機能のみなので、必要に応じて肉付けが必要です。

あらかじめ SweetAlert2 を読み込んで、4～6行目を適宜設定して使用して下さい（6行目はChromeであればレコードの新規登録画面等でフィールド上で右クリック→検証を選択すれば「field-xxxxxxx」と記載されています）。

(function() {
  'use strict';

  let subTable = ''; // サブテーブルのフィールドコード
  let fieldCode = ''; // 「ツイート」のフィールドコード
  let fieldElement = 'field-'; // 「ツイート」に割り振られている番号


  kintone.events.on([
    'app.record.create.show', 'app.record.edit.show',
    'app.record.create.change.' + subTable, 'app.record.edit.change.' + subTable
  ], (event) => {
    let record = event.record;

    [...document.getElementsByClassName(fieldElement)].forEach((field, index) => {
      let button = document.createElement('button');
      let buttonId = 'swal-' + index;

      if (document.getElementById(buttonId)) return;

      button.id = buttonId;
      button.style.padding = '12px';
      button.onclick = () => {
        let recordData = kintone.app.record.get(), rec = recordData.record;
        let inputValue = rec[subTable].value[index].value[fieldCode].value;

        Swal.fire({
          input: 'textarea',
          inputValue: inputValue ? inputValue: '',
          showCancelButton: true,
          toast: true,
          animation: false
        }).then((result) => {
          if (!result.value) return;

          rec[subTable].value[index].value[fieldCode].value = result.value;
          kintone.app.record.set(recordData);
        });
      };

      field.style.display = 'none';
      field.parentNode.appendChild(button);
    });

    return event;
  });
})();