Zenn
🍊

Pleasanter の 1.5 年の進歩

2022/12/06に公開
#
pleasanter
tech

2022 個人アドベントカレンダー の記事です。

目的

  • Pleasanter がこの 1.5 年でどの程度進歩したかを具体的に感じ取る

題材

https://qiita.com/YoshikiSawada/items/f5b2416fed9661a7727c

この記事の

プリザンターの一覧画面で選択したレコードを送信する方法

をベースにどのような機能改善があり、どういう改善ができるかを検討する

実装

ボタン配置

  • 残念ながら今現在も、サイト(テーブル)にボタンを出すにはスクリプトが必要
    • レコードには、プロセス機能でボタン配置できる
    • プロセスの一括機能は、「保存」のボタンのみが出るため、クライアント側で実行するスクリプトには適さない

ということで、先の記事を利用させていただき、こう ↓

$p.events.on_grid_load = () => {
  const sendButton =
    '<button id="post" class="button button-icon ui-button ui-corner-all" type="button"><span class="ui-icon ui-icon-circle-arrow-n"></span>送信</button>';

  document
    .getElementById('MainCommands')
    .insertAdjacentHTML('beforeend', sendButton);

  document.getElementById('post').onclick = () => sendSelected();
};

なお、先の記事のコードコメントには

// エクスポートボタンの右にボタンを追加

とあるが、ビューの機能やアクセス権限によっては "MainComands" には「エクスポート」がない場合がある。しかし、実装は、表示されているボタンに依存しないため問題なく動作する。

送信スクリプト

先の記事の実装の問題として、一覧の件数が 20 件を超えており、スクロール全てのレコードが読み込まれていない場合、全選択をした結果が正しくないことが致命的。

この場合 $p.selectedIds() を使うことで、期待の ID が取れるので ↓

const apiGetPromisify = (siteId, resultIds) => {
  return new Promise((resolve, reject) => {
    $p.apiGet({
      id: siteId,
      data: {
        View: {
          ColumnFilterHash: { ResultId: JSON.stringify(resultIds) },
          ApiDataType: 'KeyValues',
          GridColumns: ['ResultId', 'Title'],
        },
      },
      done: function (data) {
        resolve(data);
      },
      fail: function (data) {
        reject(data);
      },
    });
  });
};

const sendSelected = async () => {
  const rows = $p.selectedIds();
  if (rows.length < 1) {
    return;
  }
  const dats = (await apiGetPromisify($p.siteId(), rows)).Response.Data;
  const json = await (
    await fetch('http://httpbin.org/post', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json;charset=UTF-8',
      },
      body: JSON.stringify(dats),
    })
  ).json();
  console.log(json);
};
  • 地味に ApiDataType: 'KeyValues', も比較的最近の機能。fetch で連携する先が Pleasanter 固有のカラム名に依存しなくてすむ。
  • ID がロードされていないのと同じく、Title も画面から取れる保証はないので、API で取るほかない。
    • 場合によっては fetch で連携させる先には ID だけ渡して、そちらでデータを取り直してもらったほうが画面の応答は早いかもしれない。

おわりに

  • 一覧表で画面をカスマイズすることについては、目立った進化はない
    • 逆に、編集画面は、プロセスやエディタの特定の項目の拡張 HTML など、進歩している
    • このところは今後の課題
  • API の機能は最近の更新でも機能追加の多いところなので、拡張 SQL や力技を使ったスクリプトは回避できそう
GitHubで編集を提案

Discussion