見積書作成リスト

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

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

▼新規フォーム画面例新規フォーム

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

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

手順の流れ

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

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

前提条件

事前準備

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

リストの作成

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

  1. [カスタムリスト]テンプレートでリスト(アプリ)を作成します。
  2. 以下の列を作成します。
    列名 列内部名 種類 その他設定 必須
    会社名 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 日付と時刻 日付のみ  
  3. リストの設定画面から、以下の手順でコンテンツタイプ名を変更します。
    1. [全般設定]セクションの[詳細設定]画面で、[コンテンツ タイプ]の[コンテンツ タイプの管理を許可する]に「はい」を指定します。
    2. [コンテンツ タイプ]セクションで、コンテンツ タイプの[アイテム]をクリックします。
    3. [リスト コンテンツ タイプ]画面で、[設定]セクションの[名前と説明]をクリックし、[名前]を[アイテム]から「見積書」 に変更します。

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

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

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

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

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

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

  1. 上記手順で作成したリストのビューを表示し、リボンの[リスト]タブにある[リストの設定]をクリックします。
    リボン
  2. リストの設定画面が表示されるので、[全般設定]セクションの [[SP改]フォーム レイアウト デザイナー設定]をクリックします。
    全般設定
  3. フォーム レイアウト デザイナーの設定画面が表示されたら、[このリストでフォーム レイアウト デザイナーを有効にする]のチェックボックスを「オン」にします。
    機能の有効化
  4. フォーム レイアウト デザイナーの設定ファイル「作業依頼印刷リスト.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」が指定されています。
  5. XMLの設定ファイルがインポートされたことを確認し、設定画面下部にある[保存]ボタンをクリックします。

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

設定項目

表示フォームの設定

新しいフォームの設定

編集フォームの設定

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

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

  1. 上記手順で作成したリストのビューを表示し、リボンの[リスト]タブにある[リストの設定]をクリックします。
    リボン
  2. リストの設定画面が表示されるので、[全般設定]セクションの [[SP改]リスト フィールド デザイナー設定]をクリックします。
    全般設定
  3. リスト フィールド デザイナーの設定画面が表示されたら、[このリストでリスト フィールド デザイナーを有効にする]のチェックボックスを「オン」にします。
    機能の有効化
  4. リスト フィールド デザイナーの設定ファイル「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」が指定されています。
  5. [繰り返し列の設定]セクションで、XMLの設定ファイルがインポートされたことを確認します。
  6. 次に、リストフィールドデザイナー設定画面の[ユーザー列の表示変更]セクションで、以下の手順でユーザー列[承認者]の表示を印鑑画像表示に変更します。
    なお、印鑑画像表示を行うためには、任意のライブラリ上に[ドメイン_アカウント名.拡張子]の画像をあらかじめアップロードしておく必要があります。
    1. [ユーザー列の表示変更]セクションの[承認者]列で、[このフィールドで表示変更を有効にする]チェックボックスを「オン」にします。
    2. [サイトの選択]で、印鑑画像を格納しているライブラリのサイトを指定ます。
    3. [ライブラリ選択]で、印鑑画像を格納しているライブラリを指定します。
    4. [画像ファイル拡張子選択]で、印鑑画像の拡張子を指定します。
    5. [画像が存在しない場合]で、「ユーザー名で表示」を指定します。
  7. リストフィールドデザイナー設定画面下部にある[保存]ボタンをクリックします。

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

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

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

リストビュー



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

フォームの設定

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

リストビューの設定

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

このページの先頭へ