作業依頼印刷リスト

[SP改]フォーム レイアウト デザイナーを利用して、SharePoint 2016のリストフォームを紙の帳票のようにレイアウトします。
また、表示フォームを帳票のまま印刷する機能や、添付ファイルを追加するためのボタン等の追加を行います。

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

▼新規フォーム画面例

▼表示フォーム画面例と印刷プレビュー画面

手順の流れ

[SP改]フォーム レイアウト デザイナーを使って「作業依頼印刷リスト」を作成する手順の流れは以下の通りです。

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

前提条件

• 使用するSP改製品
  [SP改]フォーム レイアウト デザイナー
  
  
  • [SP改]フォーム レイアウト デザイナーのWSPファイル（ソリューションファイル）はインストール・展開済みで、利用するサイトコレクションの機能も有効化されているものとします。
    ※無料トライアルはこちらからお申込み下さい。
  • [SP改]フォーム レイアウト デザイナーのWSPファイルおよびインストール手順が記載された管理者マニュアルは、[SP改]フォーム レイアウト デザイナーのパッケージに含まれています。
    ※こちらからもご参照いただけます。
• 必要な知識
  HTML、JavaScript
• 実現している機能
  • 表示/新規/編集フォームを紙の帳票のようなレイアウトに変更
  • IEからそのままのレイアウトで印刷（JavaScript / CSS）
  • 添付ファイル追加ボタン（JavaScript）
  • 表示/新規/編集フォームでそれぞれ異なる列を表示

事前準備

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

リストの作成

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

1. [カスタムリスト]テンプレートでリスト（アプリ）を作成します。
2. 以下の列を作成します。
   

   列名	列内部名	種類	その他設定	必須
   タイトル	title	1行テキスト	最大文字数：255	〇
   締切日	fld_timelimit	日付と時刻	日付と時刻
   状態	fld_status	選択肢	ドロップダウン 選択項目： 未対応 対応中 保留 完了	〇
   担当者	fld_owner	ユーザーまたはグループ	ユーザーのみ
   確認者	fld_confirmuser	ユーザーまたはグループ	ユーザーのみ

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

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

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

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

• fld_RequestDemo.css
  

  .formlayoutdiv {
  
  }
  .fld-formtable{
      width: 100%;
      z-index: 0;
      border-collapse:collapse;
  }
  table.fld-formtable > tbody > tr > th{
      background-color: #f3f3f3;
      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
  }
  
  .header01{
      text-align:center;
      font-size: 24px;
      font-weight: bold;
      color:green;
  }
  
  .header02{
      border-left: 10px solid green;
      border-bottom: 1px solid green;
      padding: 2px 10px 2px 10px;
      white-space: nowrap;
      font-size: 14px;
      color:green;
  }
  
  .accepttable{
      z-index: 0;
      border-collapse:collapse;
      margin-left : auto ;
      margin-right : 0 ;
  }
  
  table.accepttable > tbody > tr > th{
      background-color: #f3f3f3;
      padding:5px 10px 5px 10px;
      font-weight:normal;
      color:blak;
      white-space:nowrap;
      border: 1px solid #ddd;
      min-width: 50px;
  }
  table.accepttable > tbody > tr > td{
      background-color: #ffffff;
      padding:5px 10px 5px 10px;
      font-weight:normal;
      border: 1px solid #ddd;
      min-width: 50px;
      min-height:50px;
  }
  
  @media print
  {    
      div#suiteBar {
          /* SharePoint のヘッダーを印刷時非表示*/
          display: none;
      }
      input{
          /* ボタン系コントロールを印刷時非表示*/
          display: none;
      }
      .ms-descriptiontext{
          /* 作成日時、作成者、更新日時、更新日を印刷時非表示*/
          display: none;
      }
  }.

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

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

1. 上記手順で作成したリストのビューを表示し、リボンの[リスト]タブにある[リストの設定]をクリックします。
   
2. リストの設定画面が表示されるので、[全般設定]セクションの [[SP改]フォーム レイアウト デザイナー設定]をクリックします。
   
3. フォーム レイアウト デザイナーの設定画面が表示されたら、[このリストでフォーム レイアウト デザイナーを有効にする]のチェックボックスを「オン」にします。
   
4. フォーム レイアウト デザイナーの設定ファイル「作業依頼印刷リスト.1.0.0.0.xml」を次のようにインポートします。
   設定画面下部にある[インポート]ボタンをクリックすると[インポート]ダイアログが表示されるので、「作業依頼印刷リスト.1.0.0.0.xml」を指定して[インポート]ボタンをクリックします。
   ※「作業依頼印刷リスト.1.0.0.0.xml」は、「RequestDemoDemo.zip」に格納されています。
   
   ※ルート以外のマスターページギャラリーに「fld_RequestDemo.css」をアップロードした場合には、「その他スタイル(CSSファイルのURL):」を変更してください。
   既定では、「/_catalogs/masterpage/fld_Request.css」が指定されています。
5. XMLの設定ファイルがインポートされたことを確認し、設定画面下部にある[保存]ボタンをクリックします。

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

設定項目

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

表示フォームの設定

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

  No.	タイプ		設定内容
  1	フィールド値	テキスト	<div class="header01"><span>作業依頼</span></div> <br/><br/>
  2	フィールド値	テキスト	<div class="header02">タイトル</div>
  3	フィールド値	テキスト	なし
  4	フィールド値	テキスト	<div class="header02">依頼内容</div>
  5	フィールド値	テキスト	<div style="min-height:50px; min-width:700px;>
  6	フィールド値	テキスト	なし
  7	フィールド値	テキスト	</div>
  8	フィールド値	テキスト	<div class="header02">状態</div>
  9	フィールド値	状態	なし
  10	フィールド値	テキスト	<div class="header02">締切日</div>
  11	フィールド値	締切日	なし
  12	フィールド値	テキスト	<div class="header02">参考資料</div>
  13	フィールド値	添付ファイル	なし
  14	フィールド値	テキスト	<div class="header02">担当者</div>
  15	フィールド値	担当者	なし
  16	フィールド値	ボタン	ボタンタイトル：印刷 onclick：printbuttonClick(); JavaScript： function printbuttonClick(){ window.print(); }
  17	フィールド値	テキスト	<table class="accepttable"><tbody> <tr><th>確認者</th></tr> <tr><td>
  18	フィールド値	確認者	なし
  19	フィールド値	テキスト	</td></tr></tbody></tabele>

新しいフォームの設定

• スタイル
  スタイルを選択：その他スタイル
  CSSファイルのURL：/_catalogs/masterpage/fld_RequestDemo.css
• 設定画面（↓クリックで拡大表示）
  
• 新しいフォームの設定項目
  

  No.	タイプ		設定内容
  1	フィールド値	テキスト	<div class="header01"><span>作業依頼</span></div> <br/><br/>
  2	フィールド値	テキスト	<div class="header02">タイトル</div>
  3	フィールド値	テキスト	なし
  4	必須検証設定	タイトル必須	タイトル：タイトル必須 対象フィールド：タイトル エラーメッセージ：「タイトル」を入力して下さい。
  5	フィールド値	テキスト	<div class="header02">依頼内容</div>
  6	フィールド値	依頼内容	なし
  7	フィールド値	テキスト	<div class="header02">状態</div>
  8	フィールド値	状態	なし
  9	フィールド値	テキスト	<div class="header02">締切日</div>
  10	フィールド値	締切日	なし
  11	フィールド値	テキスト	<div class="header02">参考資料</div>
  12	フィールド値	ボタン	ボタンタイトル：ファイル追加 onclick：buttonClick(); JavaScript： function buttonClick(){ UploadAttachment(); }
  13	フィールド値	添付ファイル	なし

編集フォームの設定

• スタイル
  スタイルを選択：その他スタイル
  CSSファイルのURL：/_catalogs/masterpage/fld_RequestDemo.css
• 設定画面（↓クリックで拡大表示）
  
• 編集フォームの設定項目
  

  No.	タイプ		設定内容
  1	フィールド値	テキスト	<div class="header01"><span>作業依頼</span></div> <br/><br/>
  2	フィールド値	テキスト	<div class="header02">タイトル</div>
  3	フィールド値	タイトル	なし
  4	必須検証設定	タイトル必須	タイトル：タイトル必須 対象フィールド：タイトル エラーメッセージ：「タイトル」を入力して下さい。
  5	フィールド値	テキスト	<div class="header02">依頼内容</div>
  6	フィールド値	依頼内容	なし
  7	フィールド値	テキスト	<div class="header02">状態</div>
  8	フィールド値	状態	なし
  9	フィールド値	テキスト	<div class="header02">締切日</div>
  10	フィールド値	締切日	なし
  11	フィールド値	テキスト	<div class="header02">参考資料</div>
  12	フィールド値	ボタン	ボタンタイトル：ファイル追加 onclick：buttonClick(); JavaScript： function buttonClick(){ UploadAttachment(); }
  13	フィールド値	添付ファイル	なし
  14	フィールド値	テキスト	<div class="header02">担当者</div>
  15	フィールド値	担当者	なし
  16	フィールド値	テキスト	<div class="header02">確認者</div>
  17	フィールド値	確認者	なし

このページの先頭へ

© 2015 ANK Co.,Ltd.