🍊
Pleasanter の 1.5 年の進歩
2022 個人アドベントカレンダー の記事です。
目的
- Pleasanter がこの 1.5 年でどの程度進歩したかを具体的に感じ取る
題材
この記事の
プリザンターの一覧画面で選択したレコードを送信する方法
をベースにどのような機能改善があり、どういう改善ができるかを検討する
実装
ボタン配置
- 残念ながら今現在も、サイト(テーブル)にボタンを出すにはスクリプトが必要
- レコードには、プロセス機能でボタン配置できる
- プロセスの一括機能は、「保存」のボタンのみが出るため、クライアント側で実行するスクリプトには適さない
ということで、先の記事を利用させていただき、こう ↓
$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 や力技を使ったスクリプトは回避できそう
Discussion