オープンソースのローコード開発ツールのプリザンター(pleasanter)ブログ

オープンソースのローコード開発ツールのプリザンター(pleasanter)のブログとサービス情報サイトです

カテゴリ : お知らせプリザンターとは?使い方スクリプト・スタイル環境構築事例動画

プリザンターの一覧でEXCELのように編集を行うには?その②

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

今回は、前回に引き続き、プリザンターの一覧でEXCELのように編集を行う機能についてご紹介いたします。今回は、行の追加や行のコピーなどについて書いていきたいと思います。

 

2022/03/15 更新

新規作成がわかりやすいようにスタイルシートを効かせると・・・

に新規登録用のCSSを追記しました。

 

 一覧画面での新規作成について

それでは、さっそく一覧画面を確認していきましょう。まだ設定を行っていない方は、前回のブログを参考にして設定してみてください。編集モードに変更をします。

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

 

一覧表の左上に「+」ボタンがあります。このボタンをクリックしてみましょう。すると・・・

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

 

一番上の行に、入力が可能な行が追加されました。+ボタンを複数回クリックすると、その回数分行が追加されます。一気に複数行を登録できるのはうれしいですね。前回のブログにも記載しましたが、入力できる項目は、日付や数値など決まっているようです。表示されている項目しか編集はできませんが、ビューを使うことにより、追加で登録する項目を設定することが可能です。

 

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

 

登録用のビューを作っておくと、一覧で項目が整理できていいですね。少し残念なのが、タイトルは入力できないので、新規作成後に別途登録する必要があります。これについては、改善されるとうれしいですね。

新規行の一覧の左側にある×ボタンをクリックすると、新規作成の行が削除されます。

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

↓ ×ボタンをクリック

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

 

行をコピーしてみる。

次に行のコピーを行ってみます。左側の窓のボタンをクリックします。

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

 

すると、クリックした行が表の一番上にコピーされました。

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


編集でできる操作などについては新規登録と同じです。

新規作成や編集が終わったら、画面下の更新ボタンをクリックすると、更新が反映されます。

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


更新(新規登録も含む)された件数が表示され、更新(登録)が完了となります。

 

もう一つの行のクルクル矢印ボタンの役割とは?

もう一つ、行のクルクル矢印ボタン(私が勝手に名付けてます)は何でしょうかこれは、行単位でデータのリロードが可能になります。通常は利用する機能ではないと思いますが、ほかの人がデータを更新し競合が発生したときに、該当する行だけを読み込むことができます。当該行のクルクル矢印をクリックすると、その行だけが最新化されますので、適宜修正し再度更新してください。

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

 

新規作成がわかりやすいようにスタイルシートを効かせると・・・

新規作成した行は必ず一番上に挿入されますが、少し見分けがつきにくいですね。
ということで、ここぞとばかりにスタイルシートを設定してみました。

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

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

 

新規の行がわかりやすくなりますね。スタイルシートの設定方法は下記を参考にしてみてください。 

pleasanter.hatenablog.jp

 

CSS自体は難しくないので、ぜひチャレンジしてみてください!答えが知りたい方は、コメントに「答えが知りたいです!」と書いていただければ、こっそりと(もしくは堂々と書いてしまうかもしれませんが)お伝えします。ぜひコメントをください!

 

2022/03/15 追加

スタイルに下記を登録してみてください。

#Grid > tbody > tr.grid-row.new{
background-color:#FFFFE1;
}

 

まとめ

2回にわたって一覧画面での修正について書いてきました。画面を遷移せずに一気に値を変更できることで、編集の使い勝手が向上したのではないでしょうか。

それでは、今回はこの辺で。
最後までご覧いただき、ありがとうございました。