Aura Componentを使い込む3（見積書作成システム：Ⅰ）

はじめに

前回は検索画面をコーディングし、詳細画面は標準機能を使いましたが、今回紹介する見積作成画面では詳細画面もコーディングしています。

元々は見積書はExcelを使っていたので、Salesforceで実施するにあたってはExcel風のUIを求められ苦労したところです。

はずせない機能としては

1. Excelのように表紙、明細１明細２と複数シートが作成でき、見積書もシート単位にPDF作成可能なこと。
2. 表紙シート以外は、各シートの並びを変えられること。
3. シートの中の各行は並び替えが可能なこと。
4. 商品マスターからの入力と、直接入力が可能なこと。
5. 表紙には各シートと連携して小計を表示できること。(Excelの数式みたいな機能)
6. 見積書の書式は単一でなく、複数のパターンがある。(1アイテムを1行、1アイテムを2行で表示など）
7. 見積書に印字される範囲が分かるように項目ごとに色分けして識別できるようにする。
8. シートの中の行数が多くて複数ページになる場合は、その改行位置を識別できるようにする。
9. シート間のコピーを可能にすること(これは最近の要望でした）。

とSalesforceの標準機能ではまず不可能なことです。これらを個別にコーディングしてAura Componentで実装しています。

業務用の画面(見積書の作成)

本番環境は中身のデータが当然本物で、中身を修正するもの大変なので、Sandboxでの画面を紹介します。
検索画面は前回と同じような動作しかしないので、詳細画面の説明をしたいと思います。

実は、項目名を維持したまま、縦横にスクロールしたかったのですが、どうしても方法がなく今は横スクロールにしか、項目名は追随できていません。この機能は３年くらい悩んでいます。

詳細画面

基本項目

詳細画面はタブで表示を切り替えられるようにしています。

各タブは
基本情報：お客様名など見積書の表紙のヘッダに印字される項目や、見積書の書式等の設定を行います。
明細シート：Excelのシートタブのようなもの。ここでシートを増やしたり、減らしたりできます。
見積明細：シート単位で見積の中身を表示、修正できます。
添付資料：見積書関係のファイルを添付できます。
見積取込：メーカーさんのシステムで作った見積書を変換できます。（現在２社に対応）

LightningのUIの中で私がかなり気に入っているのは、このタブです。このような機能をPHPで作ろうとしましたが、かなり大変だった思い出があります。少々癖¹はありますが、Lightningでは簡単に実装できます。

項目のラベルの背景色が水色の項目は見積書に表示されない項目です。今見ると一部設定の忘れがある... 見積書式とか...

明細シート

操作ボタンを開くと明細１のシートはコピーメニューがあります。これを選択すると、明細１の中身を複写して新しい明細２シートを作成します。

コピーをクリックした後

シートをコピーボタンをクリックすると、明細２のシートが作られます。明細１のシートには見積合計金額が20,000円の行がつくられているようです。明細2は明細1のコピーですので、作成後は見積合計金額が20,000円になるハズです。

シートをコピーした後

見積合計金額が20,000円になっています。正しくシートのコピーができたようです。
表紙のシートの位置は常に固定ですが、他のシートは順番を変更できます。操作の横の▼をクリックすると、下のシートと入れ替わります。
▲を押すと上のシートと順番が入れ替わります。

保存ボタンをクリックするとこのシートの順番で保存されます。とりあえず保存しておきます。

ここで保存をクリックせずに、他のタブを押した時に強制的に保存するようにしておきます。そうしないと保存を押してないのに保存されていないというクレームが出そうです。（実はテスト中に出てしまった...）²

#見積明細

この画面はタブを入れ子にして作っています。シート名のタブをクリックするとその中身が表示されます。Excelのシートタブのイメージです。³また、ここではlightning:datatableを使わずに、独自のdatatableコンポーネントを作って対応しています。水色のセルは見積書に表示されないようになっています。セルの中まで水色にすることができました。

右にスクロールさせて、全部の項目を表示します

独自のdatatable理由の１つが表示されています。数値項目の表示です。lightning:datatableでは表示している数値項目は左寄せになってしまいます。そのため桁が揃わず分かりにくいという指摘があって表示の数値は強制的に右寄せにしています。

また、lightning:datatableのインライン編集では鉛筆マークをクリックして編集モードにしますが、それだとわざわざマウスで鉛筆マークをクリックする手間が発生してしまいます。これも改善要望に挙がってしまいました。そこで独自のdatatableコンポーネントを実装することになったのです。今では入力できる詳細画面の入力項目と同じようなUIにしています。

1. タブを一度でも開いていないところにある項目にコントローラ(js)でアクセスするとundefinedでエラーになります。 ↩

2. この機能は悩みました。明細画面のヘッダにある表示中の見積もり明細件数の横にアルファベットを表示しています。これが今開いているタブの識別子です。保存ボタンが出ていて、識別子が変わったら強制的に前の画面で保存処理をするようにしています。 ↩

3. このような画面にする前は、シート名の欄を使って対象シートのデータだけを表示するUIでしたが、かなりの人に理解してもらえず現在のようなExcelライクなUIに改善しています。 ↩