[第8回] 請求明細と備考欄を出力しよう

本講座はvisualforceを使い、Salesforce帳票の作り方を学んでいく講座です。全13回の講義終了後、商談から帳票を出力できるようになる事をGoalとして講座を進めていきます。

メンバーシップ（Salesforceデベロッパープラン）加入者は無料でご覧いただくことが可能です。

第7回講義でPDF帳票のメインエリアに請求先顧客名と請求金額合計を出力しました。

第8回講義では、請求明細と備考欄を出力できるようにデザイン調整していきましょう。

請求明細テーブルの設定

請求明細テーブルのHTML

opp_pdf.pageの<table class="totalAmount">…</table>の下の行に下記のテーブルをHTMLで設定します。

        <table class="itemDetail">
            <tr>
                <th class="itemName">商品名</th>
                <th class="itemCount">数量</th>
                <th class="itemPrice">単価</th>
                <th class="itemAmount">金額</th>
            </tr>
            <tr>
                <td>観葉植物（パキラ）</td>
                <td>2</td>
                <td>8,400</td>
                <td>16,800</td>
            </tr>
            <tr><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td></tr>
        </table>

<th>…</th>はテーブルのヘッダ部分です。
<tr>…</tr>で1行となり、請求明細を15明細出力したいので15行<tr>…</tr>を書いています。
（現時点ではデザインとしてわかりやすくするためにハードコピーしていますが、講義を進めていくに連れてコードもスマートにしていきます。）

請求明細テーブルのCSS設定

上記HTMLで枠組みを作ったのでCSSでデザイン調整します。
<style>…</style>の間に下記コードを追加します。