作業依頼印刷リスト

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

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

▼新規フォーム画面例

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

補足：アップロードする 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;
      }
  }.

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

設定項目

• コンテンツタイプ：　アイテム
• 表示フォームのレイアウトを全てのフォームで適用：　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.