オープンソースWebDBのプリザンター(pleasanter)ブログ

オープンソースのWebDBのプリザンター(pleasanter)のブログです

オープンソースWebDB「プリザンター」のブログです。 機能の紹介や実例を交え、わかりやすく解説していきます。

プリザンターにスクリプトでボタンの追加をしてみよう

こんにちは。
リーデックス小川です。

今回は、プリザンターの一覧画面や編集画面にボタンを追加してみます。ボタンを追加した後に、様々な処理を実装することで機能を充実させることができるようになります。それでは、実際に動かしてみましょう。

フォームのボタンを追加する 

今回は、公式サイトのFAQ「フォームにボタンを追加したい(ID:269995)」を参考に実装していきたいと思います。上記公式サイトには、分類Aにボタンを追加するサンプルが記載されています。

$p.events.on_editor_load = function () {
$('#Results_ClassAField').after('<button style="float: left;">ボタン</button>');
};

$p.events.on_editor_loadは、編集画面表示の際にスクリプトを実行させることができるようになる、プリザンターで拡張されたイベントです。別のFAQにも説明がありますが、今回は「おまじない」ということにして、このまま利用します。

さて、それでは、テーブルを用意しましょう。「記録テーブル」を作成し、分類Aをエディタで追加します。

※上記スクリプトはjQueryというJavaScriptのフレームワークを利用しています。プリザンターはjQueryを利用していて、今回は複雑なことをしないのでコピペで動くと思いますが、スクリプトによるプリザンターのカスタマイズを行いたい場合は、JavaScriptとjQueryを勉強すると幸せになると思います。

 

f:id:h-ogawa-reedex-co-jp:20190305164243p:plain

 

では、上記にスクリプトを実装しましょう。スクリプトは管理画面の「スクリプト」タグでプリザンターに組み込むことができます。詳細は下記をご覧ください。

pleasanter.hatenablog.jp

 

今回は、タイトルに「分類Aの後ろにボタンを追加」、スクリプトに上記のものをコピペ、出力先は編集のみにチェックを付けます。

f:id:h-ogawa-reedex-co-jp:20190305165303p:plain

 

追加ボタンをクリック、元の画面で変更ボタンをクリックし、変更を完了させます。

 

編集画面を見てみよう

それでは、編集画面を見てみます。先ほどのテーブルで新規登録を行いましょう。すると・・・

f:id:h-ogawa-reedex-co-jp:20190305165808p:plain

 

分類Aにボタンが表示されましたね!画面下部にあるボタンのように装飾することももちろん可能です。style="float"をお忘れなく。。。

f:id:h-ogawa-reedex-co-jp:20190305170626p:plain

※プリザンターではJavaScript以外にも画面の見栄えを変更するためにCSSという技術を利用しています。style="float"は、表示位置の設定の一つです。こちらもプリザンターをカスタマイズする場合は必須の技術となりますので、勉強しておくと幸せになれます。

 

まとめ

今回は、プリザンターにボタンを追加してみました。ボタンをクリックした後の処理については自由に実装できますので、プリザンターのAPIを利用して別のテーブルのデータを表示する、といったことも可能になります。ぜひ、チャレンジしてみてください。

 

それでは次回をお楽しみに。
最後までご覧いただきありがとうございました。