見積書作成リスト

[SP改]フォームレイアウトデザイナーと[SP改]リストフィールドデザイナーを利用して、SharePoint 2016のリストフォームを見積書の帳票のようなレイアウトにします。
また、見積番号の自動採番機能や、表示フォームからそのまま見積書を印刷できるようにします。

※ SharePoint2019 でも基本的に動作する想定ですが、すべてのチュートリアルの動作検証は行っておりません。動作しない等ございましたら、こちらからお問合せください。

▼新規フォーム画面例

▼表示フォーム画面および印刷プレビュー画面の例
見積書作成リストの表示フォームを、IEからそのまま印刷できます。

※IEから印刷を行うと、「タイトル」、「ページ番号」、「URL」などがヘッダーとフッターに出力されます。
これらのヘッダー、フッターを出力したくない場合には、IEの設定で、ヘッダーとフッターの出力を「なし」に指定します。

手順の流れ

[SP改]フォームレイアウトデザイナーと[SP改]リストフィールドデザイナーを使って「見積書作成リスト」を作成する手順の流れは以下の通りです。

[SP改]フォームレイアウトデザイナーと[SP改]リストフィールドデザイナーのインストール
サンプルファイルのダウンロード
リストの作成
JavaScriptファイルとCSSファイルのアップロード
フォームレイアウトデザイナーの設定
リストフィールドデザイナーの設定
JSリンクの設定

前提条件

使用するSP改製品
[SP改]フォームレイアウトデザイナー、[SP改]リストフィールドデザイナー
- [SP改]フォームレイアウトデザイナー/[SP改]リストフィールドデザイナーのWSPファイル（ソリューションファイル）はインストール・展開済みで、利用するサイトコレクションの機能も有効化されているものとします。
  ※無料トライアルはこちらからお申込み下さい。
- [SP改]フォームレイアウトデザイナー/[SP改]リストフィールドデザイナーのWSPファイルおよびインストール手順が記載された管理者マニュアルは、[SP改]フォームレイアウトデザイナー/[SP改]リストフィールドデザイナのパッケージに含まれています。
  ※こちらからもご参照いただけます。
印鑑表示の画像アップロード
任意のライブラリに、ユーザー列に対応する印鑑表示画像が[ドメイン_アカウント名.拡張子]のファイル形式でアップロードされているものとします。
必要な知識
HTML、JavaScript、CSS
実現している機能
- 表示/新規/編集フォームを見積書の帳票のようにレイアウト（フォームレイアウトデザイナー）
- IEからそのままのレイアウトで印刷（JavaScript / CSS）
- 見積書番号の自動採番（JavaScript）
- 表示/新規/編集フォームでそれぞれ異なる列を表示（フォームレイアウトデザイナー）
- 繰り返し行による見積詳細内容の入力（リストフィールドデザイナー）
- 小計、消費税、合計を別の列で管理（リストフィールドデザイナー）
- 承認者の印鑑表示（リストフィールドデザイナー）

事前準備

サンプルファイルQuotationDemo.zipをダウンロードします。

リストの作成

リスト（アプリ）を作成し、列を追加します。

[カスタムリスト]テンプレートでリスト（アプリ）を作成します。

以下の列を作成します。

列名	列内部名	種類	その他設定	必須
会社名	fld_corpName	1行テキスト	最大文字数：255	〇
期間	fld_startendText	1行テキスト	最大文字数：255	〇
件名	title	1行テキスト	最大文字数：255	〇
見積No	fld_quotationNO	1行テキスト	最大文字数：255
見積内容	fld_quotationDesc	複数行テキスト	書式なしテキスト
見積日	fld_quotationDate	日付と時刻	日付のみ	○
見積有効期限	fld_dueDate	日付と時刻	日付のみ	○
合計	fld_totalamount	通貨
支払条件	fld_paymentterm	1行テキスト	最大文字数：255	○
小計	fld_subtotal	通貨
承認者	fld_accept	ユーザーまたはグループ	ユーザーのみ
消費税	fld_tax	通貨
備考	fld_comment	複数行テキスト	拡張リッチテキスト
予定開始日	fld_startDate	日付と時刻	日付のみ
予定終了日	fld_endDate	日付と時刻	日付のみ
予定納期	fld_deliveryDate	日付と時刻	日付のみ

リストの設定画面から、以下の手順でコンテンツタイプ名を変更します。
1. [全般設定]セクションの[詳細設定]画面で、[コンテンツタイプ]の[コンテンツタイプの管理を許可する]に「はい」を指定します。
2. [コンテンツタイプ]セクションで、コンテンツタイプの[アイテム]をクリックします。
3. [リストコンテンツタイプ]画面で、[設定]セクションの[名前と説明]をクリックし、[名前]を[アイテム]から「見積書」に変更します。

JavaScriptファイルとCSSファイルのアップロード

サイトコレクションのマスターページギャラリーに、JavaScriptファイルとCSSファイルをアップロードします。

サイトコレクションのルートのマスターページギャラリー(/_catalogs/masterpage/)に「fld_QuotationDemo.js」「fld_QuotationDemo.css」「fld_QuotationDescDemo.css」をアップロードします。
※「fld_QuotationDemo.js」「fld_QuotationDemo.css」「fld_QuotationDescDemo.css」は、「QuotationDemo.zip」に格納されています。

補足：アップロードするJavaScriptとCSSの内容

fld_QuotationDemo.js
注意：ルート以外のマスターページギャラリーにアップロードした際には、赤文字部分の URLを修正してください。

function qd_Init(){
    var fieldCustomizeContext = {};

    // 見積No の表示フォーム、編集フォーム、ビューの表示をカスタマイズ
    fieldCustomizeContext.Templates = {};
    var TemplatesObj = {};
    TemplatesObj['fld_quotationNO'] = {};
    TemplatesObj['fld_quotationNO'].DisplayForm = qd_CustomQNoFormTemplate;
    TemplatesObj['fld_quotationNO'].EditForm = qd_CustomQNoFormTemplate;
    TemplatesObj['fld_quotationNO'].View = qd_CustomQNoViewTemplate;
    fieldCustomizeContext.Templates.Fields = TemplatesObj;
    if (typeof (SPClientTemplates) == 'object') {
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(
            fieldCustomizeContext
        );
    }
}
function qd_CustomQNoFormTemplate(ctx) {
    // 表示フォーム、編集フォームの場合
    var varHtml = ctx.CurrentItem['fld_quotationNO'];
    if(qd_isStringEmpty(varHtml) == true){
        // URLクエリ文字列から、アイテムIDを取得
        var itemID = GetUrlKeyValue('ID');
        // 5ケタで0埋め
        var idFieldValue = qd_ZeroFormat(itemID, 5);
        // Q- を付けてHTMLを作成
        varHtml = "<nobr><span>Q-"+ idFieldValue + "</span></nobr>"
    }
    return varHtml;
}
function qd_CustomQNoViewTemplate(ctx) {
    // ビューの場合
    var varHtml = ctx.CurrentItem['fld_quotationNO'];
    if(qd_isStringEmpty(varHtml) == true){
        // 現在のアイテムIDを取得
        var idFieldValue = ctx.CurrentItem.ID;
        // 5ケタで0埋め
        idFieldValue = qd_ZeroFormat(idFieldValue, 5);
        // Q- を付けてHTMLを作成
        varHtml = "<nobr><span>Q-"+ idFieldValue + "</span></nobr>"
    }
    return varHtml;
}
// 指定した桁数分 0 埋め
function qd_ZeroFormat(num,max){
    var tmp=""+num;
    while(tmp.length<max){
        tmp="0"+tmp;
    }
    return tmp;
}
// 文字列が null か空か確認
function qd_isStringEmpty(str) {
    return (!str || 0 === str.length);
}

// MDS 対応
if (typeof (RegisterModuleInit) == "function") {
    RegisterModuleInit("/_catalogs/masterpage/fld_QuotationDemo.js", qd_Init); // MDSの場合
}
qd_Init(); // MDSでない場合

if (typeof (Sys) != "undefined" && Boolean(Sys) && Boolean(Sys.Application)) {
    Sys.Application.notifyScriptLoaded();
}
if (typeof (NotifyScriptLoadedAndExecuteWaitingJobs) == "function") {

    NotifyScriptLoadedAndExecuteWaitingJobs("/_catalogs/masterpage/fld_QuotationDemo.js");
}

fld_QuotationDemo.css

.formlayoutdiv {
}
.fld-formtable{
    width: 100%;
    z-index: 0;
    border-collapse:collapse;
}
table.fld-formtable > tbody > tr > th{
    background-color: #ffffff;
    padding:5px 10px 5px 10px;
    text-align: left;
    font-weight:normal;
    color:#191970;
    white-space:nowrap;
    width: 150px;
}
table.fld-formtable > tbody > tr > td{
    background-color: #ffffff;
    padding:5px 10px 5px 10px;
    text-align: left;
    font-weight:normal;
    width: 200px;
}
.fld-standardheader{
    text-align:left;
    font-size:1em;
    margin:0px
}
.corpheader{
    text-align:left;
    font-size: 24px;
    font-weight: bold;
    color:black;
}
.rightheader{
    text-align:right;
    color:black;
}
.header01{
    text-align:center;
    font-size: 24px;
    font-weight: bold;
    color:black;
}

@media print
{    
    div#suiteBar {
        /* SharePoint のヘッダーを印刷時非表示*/
        display: none;
    }
    input{
        /* ボタン系コントロールを印刷時非表示*/
        display: none;
    }
    .ms-descriptiontext{
        /* 作成日時、作成者、更新日時、更新日を印刷時非表示*/
        display: none;
    }
}

fld_QuotationDescDemo.css

.ffd-repeatrowtable{
    margin: 1px;
    border-collapse: collapse;
    border-spacing: 1px;
    width:100%;
}
.ffd_footer,    
.ffd_header {
    border: 1px solid #ddd;
    padding-left: 3px;
    padding-right: 3px;
    padding-top:2px;
    padding-bottom:2px;
    background-color: #f5f5f5;
    white-space: nowrap;
}

.ffd_repeatrow {
    border: 1px solid #ddd;
    padding-left: 3px;
    padding-right: 3px;
}
.ffd_textbox {

}
.ffd_select {

}
.ffd_repatarea{
    border: 1px solid #ddd;
    text-align:center;
    width: 50px;
}
.rowTool{
    cursor:pointer;
}

.ffd-repeatrowtable > tbody > tr > td:nth-child(1){
    min-width:200px;
}

フォームレイアウトデザイナーの設定

リストでフォームレイアウトデザイナー機能を有効にし、XML設定ファイルをインポートします。

上記手順で作成したリストのビューを表示し、リボンの[リスト]タブにある[リストの設定]をクリックします。
リストの設定画面が表示されるので、[全般設定]セクションの [[SP改]フォームレイアウトデザイナー設定]をクリックします。
フォームレイアウトデザイナーの設定画面が表示されたら、[このリストでフォームレイアウトデザイナーを有効にする]のチェックボックスを「オン」にします。
フォームレイアウトデザイナーの設定ファイル「作業依頼印刷リスト.1.0.0.0.xml」を次のようにインポートします。
設定画面下部にある[インポート]ボタンをクリックすると[インポート]ダイアログが表示されるので、「FLD_見積書作成リスト.1.0.0.0.xml」を指定して[インポート]ボタンをクリックします。
※「FLD_見積書作成リスト.1.0.0.0.xml」は、「QuotationDemo.zip」に格納されています。

※ルート以外のマスターページギャラリーに「fld_QuotationDemo.css」をアップロードした場合には、「その他スタイル(CSSファイルのURL):」を変更してください。
既定では、「/_catalogs/masterpage/fld_QuotationDemo.css」が指定されています。
XMLの設定ファイルがインポートされたことを確認し、設定画面下部にある[保存]ボタンをクリックします。

補足：フォームレイアウトデザイナーの設定内容

設定項目

コンテンツタイプ：　アイテム
表示フォームのレイアウトを全てのフォームで適用：　OFF

表示フォームの設定

スタイル
スタイルを選択：その他スタイル
CSSファイルのURL：/_catalogs/masterpage/fld_QuotationDemo.css
設定画面（↓クリックで拡大表示）

表示フォームの設定項目

No.	タイプ		設定内容
1	フィールド値	テキスト	`<div class="corpheader"><span>`
2	フィールド値	会社名	なし
3	フィールド値	テキスト	御中`</span></div>`
4	フィールド値	テキスト	`<div class="rightheader">`No.
5	フィールド値	見積No	なし
6	フィールド値	テキスト	`</div>`
7	フィールド値	テキスト	`<div class="rightheader">`
8	フィールド値	見積日	なし
9	フィールド値	テキスト	`</div>`
10	フィールド値	テキスト	`</div class="rightheader">株式会社 ○○○</div> </div class="rightheader">代表取締役 ○○ ○○</div> </div class="rightheader">東京都新宿区 ○○ ○-○-○</div> </div class="rightheader">TEL 03-1111-1111</div> </div class="rightheader">FAX 03-2222-2222</div>`
11	フィールド値	テキスト	`<div class="header02">参考資料</div>`
12	フィールド値	テキスト	`<div class="header01"><span>御見積書</span></div>`
13	フィールド値	件名	なし
14	フィールド値	期間	なし
15	フィールド値	期間	なし
16	フィールドタイトル	予定納期	なし
17	フィールド値	予定納期	なし
18	フィールドタイトル	支払条件	なし
19	フィールド値	支払条件	なし
20	フィールドタイトル	見積有効期限	なし
21	フィールド値	見積有効期限	なし
22	フィールド値	テキスト	以下の通り、御見積申し上げます。
23	フィールド値	見積内容	なし
24	フィールド値	テキスト	＜備考＞
25	フィールド値	備考	なし
26	フィールド値	ボタン	ボタンタイトル：印刷 onclick：printbuttonClick(); JavaScript： `function printbuttonClick(){ window.print(); }`
27	フィールド値	テキスト	`<div class="rightheader">以上</div>`

新しいフォームの設定

スタイル
スタイルを選択：その他スタイル
CSSファイルのURL：/_catalogs/masterpage/fld_QuotationDemo.css
設定画面（↓クリックで拡大表示）

新しいフォームの設定項目

No.	タイプ		設定内容
1	フィールド値	テキスト	`<table><tbody><tr> <td> <h3 class="fld-standardheader"><nobr>会社名<span class="ms-accentText" title="これは必須フィールドです。"> *</span></nobr></h3> </td><td>`
2	フィールド値	会社名	なし
3	必須検証設定	会社名必須	タイトル：　会社名必須対象フィールド：　会社名エラーメッセージ：　「会社名」を入力して下さい。
4	フィールド値	テキスト	`</td><td>御中</td> </tr></tbody></table>`
5	フィールド値	テキスト	`<div class="rightheader">No.自動採番</div>`
6	フィールド値	テキスト	`<div class="rightheader"> <table><tbody><tr> <td> <h3 class="fld-standardheader"><nobr>見積日<span class="ms-accentText" title="これは必須フィールドです。"> *</span></nobr></h3> </td><td>`
7	フィールド値	見積日
8	必須検証設定	見積日必須	タイトル：　見積日必須対象フィールド：　見積日エラーメッセージ：　「見積日」を入力して下さい。
9	フィールド値	テキスト	`</td> </tr></tbody></table> </div>`
10	フィールド値	テキスト	`<div class="rightheader">株式会社 ○○○</div> <div class="rightheader">代表取締役 ○○ ○○</div> <div class="rightheader">東京都新宿区 ○○ ○-○-○</div> <div class="rightheader">TEL 03-1111-1111</div> <div class="rightheader">FAX 03-2222-2222</div>`
11	フィールド値	テキスト	`<div class="header01"><span>御見積書</span></div>`
12	フィールドタイトル	件名	なし
13	フィールド値	件名	なし
14	必須検証設定	件名必須	タイトル：件名必須対象フィールド：件名エラーメッセージ：「件名」を入力して下さい。
15	フィールドタイトル	期間	なし
16	フィールド値	期間	なし
17	必須検証設定	期間必須	タイトル：期間必須対象フィールド：期間エラーメッセージ：「期間」を入力して下さい。
18	フィールドタイトル	予定納期	なし
19	フィールド値	予定納期	なし
20	必須検証設定	予定納期必須	タイトル：　予定納期必須対象フィールド：　予定納期エラーメッセージ：　「予定納期」を入力して下さい。
21	フィールドタイトル	支払条件	なし
22	フィールド値	支払条件	なし
23	必須検証設定	支払条件必須	タイトル：支払条件必須対象フィールド：支払条件エラーメッセージ：「支払条件」を入力して下さい。
24	フィールドタイトル	見積有効期限	なし
25	フィールド値	見積有効期限	なし
26	必須検証設定	見積有効期限必須	タイトル：見積有効期限必須対象フィールド：見積有効期限エラーメッセージ：「見積有効期限」を入力して下さい。
27	フィールド値	タイトル	以下の通り、御見積申し上げます。
28	フィールド値	見積内容	なし
29	フィールド値	タイトル	＜備考＞
30	フィールド値	備考	なし
31	フィールド値	タイトル	＜詳細＞
32	フィールド値	合計	なし
33	フィールド値	小計	なし
34	フィールド値	消費税	なし
35	フィールドタイトル	予定開始日	なし
36	フィールド値	予定開始日	なし
37	フィールドタイトル	予定終了日	なし
38	フィールド値	予定終了日	なし
39	比較検証設定	予定期間比較	タイトル：　予定期間比較対象フィールド：　予定開始日比較フィールド：　予定終了日タイプ：　日付演算子：　より小さいエラーメッセージ：　「予定開始日」と「予定終了日」の期間が不正です。

編集フォームの設定

スタイル
スタイルを選択：その他スタイル
CSSファイルのURL：/_catalogs/masterpage/fld_QuotationDemo.css
設定画面（↓クリックで拡大表示）

編集フォームの設定項目

No.	タイプ		設定内容
1	フィールド値	テキスト	`<table><tbody><tr> <td> <h3 class="fld-standardheader"><nobr>会社名<span class="ms-accentText" title="これは必須フィールドです。"> *</span></nobr></h3> </td><td>`
2	フィールド値	会社名	なし
3	必須検証設定	会社名必須	タイトル：　会社名必須対象フィールド：　会社名エラーメッセージ：　「会社名」を入力して下さい。
4	フィールド値	テキスト	`</td><td>御中</td> </tr></tbody></table>`
5	フィールド値	テキスト	`<div class="rightheader">No.`
6	フィールド値	見積No	なし
7	フィールド値	テキスト	`</div>`
8	フィールド値	テキスト	`<div class="rightheader"> <table><tbody><tr> <td> <h3 class="fld-standardheader"><nobr>見積日<span class="ms-accentText" title="これは必須フィールドです。"> *</span></nobr></h3> </td><td>`
9	フィールド値	見積日	なし
10	必須検証設定	見積日必須	タイトル：　見積日必須対象フィールド：　見積日エラーメッセージ：　「見積日」を入力して下さい。
11	フィールド値	テキスト	`</td> </tr></tbody></table> </div>`
12	フィールド値	テキスト	`<div class="rightheader">株式会社 ○○○</div> <div class="rightheader">代表取締役 ○○ ○○</div> <div class="rightheader">東京都新宿区 ○○ ○-○-○</div> <div class="rightheader">TEL 03-1111-1111</div> <div class="rightheader">FAX 03-2222-2222</div>`
13	フィールド値	テキスト	`<div class="header01"><span>御見積書</span></div>`
14	フィールドタイトル	件名	なし
15	フィールド値	件名	なし
16	必須検証設定	件名必須	タイトル：件名必須対象フィールド：件名エラーメッセージ：「件名」を入力して下さい。
17	フィールドタイトル	期間	なし
18	フィールド値	期間	なし
19	必須検証設定	期間必須	タイトル：期間必須対象フィールド：期間エラーメッセージ：「期間」を入力して下さい。
20	フィールドタイトル	予定納期	なし
21	フィールド値	予定納期	なし
22	必須検証設定	予定納期必須	タイトル：　予定納期必須対象フィールド：　予定納期エラーメッセージ：　「予定納期」を入力して下さい。
23	フィールドタイトル	支払条件	なし
24	フィールド値	支払条件	なし
25	必須検証設定	支払条件必須	タイトル：支払条件必須対象フィールド：支払条件エラーメッセージ：「支払条件」を入力して下さい。
26	フィールドタイトル	見積有効期限	なし
27	フィールド値	見積有効期限	なし
28	必須検証設定	見積有効期限必須	タイトル：見積有効期限必須対象フィールド：見積有効期限エラーメッセージ：「見積有効期限」を入力して下さい。
29	フィールド値	タイトル	以下の通り、御見積申し上げます。
30	フィールド値	見積内容	なし
31	フィールド値	タイトル	＜備考＞
32	フィールド値	備考	なし
33	フィールド値	タイトル	＜詳細＞
34	フィールド値	合計	なし
35	フィールド値	小計	なし
36	フィールド値	消費税	なし
37	フィールドタイトル	予定開始日	なし
38	フィールド値	予定開始日	なし
39	フィールドタイトル	予定終了日	なし
40	フィールド値	予定終了日	なし
41	比較検証設定	予定期間比較	タイトル：　予定期間比較対象フィールド：　予定開始日比較フィールド：　予定終了日タイプ：　日付演算子：　より小さいエラーメッセージ：　「予定開始日」と「予定終了日」の期間が不正です。
42	フィールドタイトル	承認者	なし
43	フィールド値	承認者	なし

リストフィールドデザイナーの設定

リストでリストフィールドデザイナー機能を有効にし、[繰り返し列の設定]セクションで、XML設定ファイルをインポートします。
また、[ユーザーの表示変更]セクションで、ユーザー列の表示を印鑑画像表示に変更します。

上記手順で作成したリストのビューを表示し、リボンの[リスト]タブにある[リストの設定]をクリックします。
リストの設定画面が表示されるので、[全般設定]セクションの [[SP改]リストフィールドデザイナー設定]をクリックします。
リストフィールドデザイナーの設定画面が表示されたら、[このリストでリストフィールドデザイナーを有効にする]のチェックボックスを「オン」にします。
リストフィールドデザイナーの設定ファイル「LFD_見積書作成リスト.1.0.0.0.xml」を次のようにインポートします。
設定画面下部にある[インポート]ボタンをクリックすると[インポート]ダイアログが表示されるので、「LFD_見積書作成リスト.1.0.0.0.xml」を指定して[インポート]ボタンをクリックします。
※「LFD_見積書作成リスト.1.0.0.0.xml」は、「QuotationDemo.zip」に格納されています。

※ルート以外のマスターページギャラリーに「fld_QuotationDescDemo.css」をアップロードした場合には、「その他スタイル(CSSファイルのURL):」を変更してください。
既定では、「/_catalogs/masterpage/fld_QuotationDescDemo.css」が指定されています。
[繰り返し列の設定]セクションで、XMLの設定ファイルがインポートされたことを確認します。
次に、リストフィールドデザイナー設定画面の[ユーザー列の表示変更]セクションで、以下の手順でユーザー列[承認者]の表示を印鑑画像表示に変更します。
なお、印鑑画像表示を行うためには、任意のライブラリ上に[ドメイン_アカウント名.拡張子]の画像をあらかじめアップロードしておく必要があります。
1. [ユーザー列の表示変更]セクションの[承認者]列で、[このフィールドで表示変更を有効にする]チェックボックスを「オン」にします。
2. [サイトの選択]で、印鑑画像を格納しているライブラリのサイトを指定ます。
3. [ライブラリ選択]で、印鑑画像を格納しているライブラリを指定します。
4. [画像ファイル拡張子選択]で、印鑑画像の拡張子を指定します。
5. [画像が存在しない場合]で、「ユーザー名で表示」を指定します。
リストフィールドデザイナー設定画面下部にある[保存]ボタンをクリックします。

補足：リストフィールドデザイナーの設定内容

設定項目：　繰り返し列の設定

スタイル設定（CSSファイルのURL）：/_catalogs/masterpage/fld_QuotationDescDemo.css
列：　見積内容
このフィールドで繰り返し列を有効にする：　ON
設定画面（↓クリックで拡大表示）
- [繰り返し列の設定]セクションの設定画面（↓クリックで拡大表示）
- 繰り返し行設定：「項目テキスト」のテキストボックス設定画面
- 繰り返し行設定：「単価テキスト」のテキストボックス設定画面
- 繰り返し行設定：「数量テキスト」のテキストボック設定画面
- 繰り返し行設定：「金額集計」の集計設定画面
- フッター設定：「小計集計」の集計設定画面
- フッター設定：「消費税集計」の集計設定画面
- フッター設定：「合計集計」の集計設定画面
[ヘッダー設定]の設定項目

No. タイプ設定内容

1 テキスト項目

2 テキスト単価

3 テキスト数量

4 テキスト金額

[繰り返し行設定]の設定項目

No. タイプ設定内容

テキストボックス

項目

値

タイトル

項目テキスト

入力タイプ

フリーテキスト

入力時設定

項目	値
必須にする	はい
最大文字数	255
IMEの設定	コントロールなし

テキストボックス

項目

値

タイトル

単価テキスト

入力タイプ

数値テキスト

入力時設定

項目	値
必須にする	はい
最小値
最大値
小数点以下桁数	0

表示時設定

項目	値
パーセンテージで表示	いいえ
カンマ区切りで表示	はい
先頭文字	\
末尾文字
マイナス時に赤文字表示	いいえ

テキストボックス

項目

値

タイトル

数量テキスト

入力タイプ

数値テキスト

入力時設定

項目	値
必須にする	はい
最小値
最大値
小数点以下桁数	2

表示時設定

項目	値
パーセンテージで表示	いいえ
カンマ区切りで表示	はい
先頭文字
末尾文字
マイナス時に赤文字表示	いいえ

集計

設定項目設定内容

タイトル金額集計

変数
（繰り返し行項目）

変数名	項目	集計する値項目
P1	単価テキスト	値
P2	数量テキスト	値

数式 return P1*P2;

結果表示形式

標準結果表示設定

項目	値
小数点以下桁数	0
パーセンテージ表示	いいえ
カンマ区切りで表示	はい
先頭文字	\
末尾文字
マイナス時に赤文字表示	いいえ

[フッター行設定]の設定項目

No. タイプ設定内容

1 テキストボックス小計

集計

設定項目設定内容

タイトル小計集計

変数
（繰り返し行項目）

変数名

項目

集計する値項目

合計

数式 return P1;

結果表示形式

標準結果表示設定

項目	値
小数点以下桁数	0
パーセンテージ表示	いいえ
カンマ区切りで表示	はい
先頭文字	\
末尾文字
マイナス時に赤文字表示	いいえ

結果を指定の列に
設定

小計

指定したフィールドの各フォーム	表示状態
表示フォーム	非表示
新規フォーム	非表示
編集フォーム	非表示

3 テキストボックス消費税(8%)

集計

設定項目設定内容

タイトル消費税集計

変数
（フッター行項目）

変数名	項目	集計する値項目
P1	小計集計	集計値

数式 return P1*0.08;

結果表示形式

標準結果表示設定

項目	値
小数点以下桁数	0
パーセンテージ表示	いいえ
カンマ区切りで表示	はい
先頭文字	\
末尾文字
マイナス時に赤文字表示	いいえ

結果を指定の列に
設定

消費税

指定したフィールドの各フォーム	表示状態
表示フォーム	非表示
新規フォーム	非表示
編集フォーム	非表示

5 テキストボックス合計

集計

設定項目設定内容

タイトル合計集計

変数
（フッター行項目）

変数名	項目	集計する値項目
P1	小計集計	集計値

数式 return P1*0.08;

結果表示形式

標準結果表示設定

項目	値
小数点以下桁数	0
パーセンテージ表示	いいえ
カンマ区切りで表示	はい
先頭文字	\
末尾文字
マイナス時に赤文字表示	いいえ

結果を指定の列に
設定

合計

指定したフィールドの各フォーム	表示状態
表示フォーム	非表示
新規フォーム	非表示
編集フォーム	非表示

※リストビューで表示する項目を「見積No」、「件名」、「会社名」、「見積日」、「見積有効期限」、「小計」、「消費税」、「合計」、「承認者」で設定した場合、以下のように表示されます。

JSリンクの設定

表示フォーム・新規フォーム・編集フォーム、およびリストビューのJSリンクに、JavaScriptファイルを指定します。

フォームの設定

リストのビューを表示し、リボンの[リスト]タブにある[フォーム Web パーツ]⇒[既定の新しいフォーム]をクリックします。
「既定の新しいフォーム（NewForm.aspx）」の編集画面が表示されたら、見積書作成リストWebパーツ右上の▼をクリックし、[Webパーツの編集]をクリックします。
画面右側にWebパーツのツールウィンドウが表示されるので、[その他]セクションの[JS リンク]にJavaScriptファイルをアップロードした左記のURL（上記手順では、マスターページギャラリーへアップロード）を指定し、[OK]ボタンをクリックします。
例) ~sitecollection/_catalogs/masterpage/fld_QuotationDemo.js
リボンの[ページ]タブで[編集の終了]をクリックします。
「既定の表示フォーム（DispForm.aspx）」と「既定の編集フォーム（Edit.aspx）」も同様の手順でJSリンクを設定します。

リストビューの設定

リストのビューを表示し、画面右上の歯車アイコン⇒[ページの編集]をクリックします。
リストビューの編集画面が表示されたら、リストビューWebパーツ右上の▼をクリックし、[Webパーツの編集]をクリックします。
画面右側にWebパーツのツールウィンドウが表示されるので、[その他]セクションの[JS リンク]にJavaScriptファイルをアップロードした左記のURL（上記手順では、マスターページギャラリーへアップロード）を指定し、[OK]ボタンをクリックします。
例) ~sitecollection/_catalogs/masterpage/fld_QuotationDemo.js
リボンの[ページ]タブで[編集の終了]をクリックします。
リストビューが複数ある場合には、すべてのリストビューに同様の手順でJSリンクを設定します。

このページの先頭へ

見積書作成リスト

手順の流れ

前提条件

事前準備

リストの作成

JavaScriptファイルとCSSファイルのアップロード

補足：アップロードするJavaScriptとCSSの内容

フォーム レイアウト デザイナーの設定

補足：フォーム レイアウト デザイナーの設定内容

設定項目

表示フォームの設定

新しいフォームの設定

編集フォームの設定

リスト フィールド デザイナーの設定

補足：リスト フィールド デザイナーの設定内容

設定項目： 繰り返し列の設定

JSリンクの設定

フォームの設定

リストビューの設定

フォームレイアウトデザイナーの設定

補足：フォームレイアウトデザイナーの設定内容

リストフィールドデザイナーの設定

補足：リストフィールドデザイナーの設定内容

設定項目：　繰り返し列の設定