[帳票編]印刷ヘッダー/フッター

##印刷ヘッダー/フッターの利用方法についての例
メソッド：
setHeaderCenter(),setFooterCenter(),setHeaderLeft(),
setFooterLeft(),setHeaderRight(),setFooterRight()
###ステップ1：テーブルと画面の作成	
###ステップ2：帳票テンプレートの作成
###ステップ3：関数を新規作成	
###ステップ4：印刷結果

###ステップ1：テーブルと画面の作成
データベースにテーブルを作成する
(定義インポート＞定義を張り付けて作成)
SQL文を張り付けて、実行ボタンをクリックしテーブルを作成する。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/f287f835-2094-77a1-c89d-09c3458d96c9.png)	
SQL文：

```		
CREATE TABLE `m_student1` (	
  `STUDENT_ID` varchar(10) NOT NULL,	
  `STUDENT_FAMILY_NM` varchar(20) DEFAULT NULL,	
  `STUDENT_FIRST_NM` varchar(20) DEFAULT NULL,	
  `STUDENT_FULL_NM_KN` varchar(40) DEFAULT NULL,	
  `SEX` varchar(1) DEFAULT NULL,	
  `STUDENT_SCORE` varchar(3) DEFAULT NULL,	
  `STUDENT_SUBJECT` varchar(5) NOT NULL,	
  `FIRST_REG_DTM` datetime DEFAULT NULL,	
  `FIRST_REG_ID` varchar(50) DEFAULT NULL,	
  `LAST_UPDATE_DTM` datetime DEFAULT NULL,	
  `LAST_UPDATE_ID` varchar(50) DEFAULT NULL,	
  PRIMARY KEY (`STUDENT_ID`,`STUDENT_SUBJECT`)	
) ENGINE=InnoDB DEFAULT CHARSET=utf8;	
```
下図の通りにテーブル名称と項目名称を編集してください。
データベース反映を選んでください。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/8c3a92b1-0aed-d6f7-21ae-88e2bf67877e.png)

###印刷用画面を2つ作成
1.印刷関数ボタンを押し、生徒ID条件によってSQL文のSELECTでデータを取得し、EXCELに出力して印刷できるようにします。
画面：印刷関数（画面作成＞画面レイアウト作成＞新規）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/91254e6a-8a25-37bb-2fb6-85aabc58a0a9.png)
#####1-1画面名（印刷関数）、管理ID（1）、TextBox項目数とButton項目数を入力
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/71dc8739-ef02-5ca2-594f-bd615e9a401f.png)
#####1-2「保存して次へ」（フォルダに追加）
作成した画面を選択表示する際のフォルダ（メニュー）の所属先を指定します。
#####1-3フォルダ名を1つ選択して登録する
フォルダが無い場合は、新規でフォルダを作成し所属させます。
#####1-4「画面デザイン画面」
項目のラベル名を設定します。
対象項目にマウスをあてて右クリックのメニューから「項目定義」を選択します。
項目：
・生徒ID入力指定欄（ラベル名は図のdragB3枠）
・「印刷関数」ボタン（図のdragB1枠）
※項目名をドラッグするとレイアウト位置を変更できます。

保存アイコン（フロッピーディスクの図）をクリックし作業内容を保存します。
保存後、閉じるアイコン（×印）にて編集画面を閉じます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/c8b5d908-5546-1345-8ec3-51d396952355.png)

####2．印刷項目作成・編集画面
（画面作成＞画面項目定義＞新規）
※「新規」ボタンは、上部の「検索条件（虫眼鏡）」をクリックすると表示されます。
ステップ1で作成したテーブルを指定して各項目を入力編集する画面です。
#####2-1（画面項目定義＞画面項目定義新規＞画面自動作成タブ）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/31056aa1-a257-9762-2b00-2aed14a6ad61.png)
#####2-2項目指定
・画面名（印刷関数画面）、管理ID（1）を入力
・テーブル（M_STUDENT1）のチェックボックスを指定
・画面に表示する項目を指定しチェック（図では全項目）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/3d47987b-a206-d851-2d1f-d3b4b8f6c96e.png)
#####2-3「保存して次へ」（フォルダに追加）
作成した画面を選択表示する際のフォルダ（メニュー）の所属先を指定します。
#####2-4フォルダ名を1つ選択して登録する
フォルダが無い場合は、新規でフォルダを作成し所属させます。
#####2-5画面項目定義画面上部の「画面レイアウト設計へ遷移」アイコンをクリック。
自動配置された画面の編集を行います。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/5d39610c-1d47-facb-1896-8951a342effe.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/f902011d-679b-72a0-796c-85540e30e1d3.png)
※左側のメインメニューの画面レイアウト作成から、対象画面「印刷関数画面」の
「編集」ボタンからも表示できます。

科目のプロパティはdroplistで「0:数学;1:英語;2:国語;」という3つの値があります。
・科目のプロパティは固定の選択リストから選ぶ方式を設定します。
・「科目（図のdragB14）」項目を右クリックし「項目定義」を選択します。
・項目定義画面右上の「表示種類」を「DropdownList」に設定します。
・項目定義>DBタブに「リスト」項目が表示されます。「リスト=リスト値マスタから」を選択します。
・リスト値マスタ情報枠が表示されるので、「0:数学;1:英語;2:国語;」という3つの固定値を
設定します（区切り記号　番号はコロン[:]、リスト値はセミコロン[;]）。
・「保存」ボタンで設定値を登録します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/2866cde9-ea11-7471-dd33-a443c740dabf.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/8edeb4bf-3e71-d04d-6c86-7206b34aae27.png)



#####2-6動作環境画面の権限設定
・作成した画面は、「メニュー：セキュリティ＞フォルダ/コンテンツ設定」画面にて操作するユーザのIDや属するグループ単位に表示や編集の制限をかけています。
・左画面はメニューフォルダや画面単位の区分け設定です。「印刷関数画面」は所属するフォルダの設定権限により下位継承されるので、フォルダ右横にチェックします
・画面右側のユーザグループやユーザ名の権限（新規、更新、削除、表示）にて動作環境のユーザ（ログインID）が画面に情報を入力保存できるようにし「権限更新」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/f36d755f-9b89-74f2-900b-a526af1c1cee.png)

#####2-7生徒情報テーブルに成績を入力保存
・システム動作環境用のIDにてログインし、データ入力画面（印刷関数画面）から作成したテーブルに情報を入力保存します（サンプルの入力情報コードの値を参照）。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/d758b597-8c11-4831-e41c-fc1cd5583613.png)


```
INSERT INTO `m_student1` VALUES ('K0001', '柴田', '次郎', '柴田次郎', '男', '78', '0', '2018-12-03 12:02:48', '', '2018-12-06 16:22:30', 'sun1');						
INSERT INTO `m_student1` VALUES ('K0001', '柴田', '次郎', '柴田次郎', '男', '88', '1', '2018-12-03 12:02:48', '', '2018-12-06 16:24:33', 'sun1');						
INSERT INTO `m_student1` VALUES ('K0001', '柴田', '次郎', '柴田次郎', '男', '67', '2', '2018-12-03 12:02:48', '', '2018-12-06 16:24:56', 'sun1');						
INSERT INTO `m_student1` VALUES ('k0002', '柴田', '二郎', '柴田二郎', '男', '99', '0', '2018-12-03 12:12:52', 'sun1', '2018-12-06 16:25:41', 'sun1');						
INSERT INTO `m_student1` VALUES ('k0002', '柴田', '二郎', '柴田二郎', '男', '100', '1', '2018-12-03 12:13:14', 'sun1', '2018-12-06 16:26:10', 'sun1');						
INSERT INTO `m_student1` VALUES ('k0002', '柴田', '二郎', '柴田二郎', '男', '60', '2', '2018-12-03 12:13:25', 'sun1', '2018-12-06 16:26:36', 'sun1');

```


##ステップ2：帳票テンプレートの作成 
帳票用のExcelテンプレートを下記のリンクからダウロードすることができます。
　[成績表_帳票印刷ヘーダ/フッター.xlsx](https://github.com/saasforce/excel/blob/master/jp/%E6%88%90%E7%B8%BE%E8%A1%A8_%E5%B8%B3%E7%A5%A8%E5%8D%B0%E5%88%B7%E3%83%98%E3%83%BC%E3%83%80%E3%83%BB%E3%83%95%E3%83%83%E3%82%BF%E3%83%BC.xlsx)


####新テンプレート指定
（帳票＞帳票テンプレート＞新規）
・画面「ステップ1：」枠にて「管理ID」を入力後、アップロードする
Excel帳票テンプレート定義ファイルを指定します。
・更新：画面下の「更新」ボタンを押し、アップロードを完了します。
・ファイルIDをメモ
「検索条件」枠の「検索」ボタンを押すと画面が更新されアップロードした帳票テンプレートのファイルIDを確認できます。ファイルIDをメモして関数の定義で使います。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/2fa9cc21-148c-db44-3466-d3ddbc139cdd.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/e36b4d4f-1dbf-2fcc-de47-f07187cae02f.png)

##ステップ3：関数を新規作成（ExcelDataBean関数のコード確認）

```javascript:header/fotter_sample
//1.SQL文でデータを取得する
// データを検索する方式： select x1, x2, y1, y2 from table where 条件1
// 配列aに入れる
//2.select文でy轴のデータを取得し、 条件は1と同じ
//データを検索する方式： select distinct y1, y2 from table where 条件1
// 配列bに入れる
//データをデータベースから取得する
var cy;
//StringBuilder文字列を連結する
var strSqlc = new StringBuilder();
//生徒ID
var NIANDU1 = getObj('txt2'); 
//グローバル変数
var excelDataBean = null;
//局部変数
var sheeBean = null;
//エクセル印刷
var excelPrint = getExcelPrint();
var rowDataList = null;
var row = null;
try {
    //データがある場合
    strSqlc.append("SELECT STUDENT_ID,STUDENT_FULL_NM_KN,SEX,STUDENT_SUBJECT,STUDENT_SCORE FROM M_STUDENT1 ");
    strSqlc.append("where 1 = 1");	
   //idを判断する
    if (NIANDU1 != null && NIANDU1 != "") {
        strSqlc.append(" AND STUDENT_ID = '").append(NIANDU1).append("'");
    }
　　//ＩＤによってランキングする
    strSqlc.append(" ORDER BY STUDENT_ID ");

    cy = exequeryarrylist(strSqlc.toString());

    excelDataBean = new ExcelDataBean();
    //データがある場合
    if (cy != null && cy.size() > 0) {
        // list初期化
        rowDataList = new ArrayList();

        sheeBean = new ExcelDataBean();

        var conditionMap = new HashMap ();
　　　　//ループでデータの取得
        for (var i = 0; i < cy.size(); i++) {
            
            row1 = new ArrayList();

            row = cy.get(i);
            
            // 生徒ID
            row1.add(row.get(0));
            
            // 姓名
            if(nullOrBlank(row.get(1))){
                row1.add("");
            } else {
    　　　 // 姓名　           
                row1.add(row.get(1));
            }
            
            // 性別
            if(nullOrBlank(row.get(2))){
                row1.add("");
            } else {
              // 性別
                row1.add(row.get(2));
            }
            // 科目
            if(nullOrBlank(row.get(3))){
                row1.add("");
            } else {
                // 科目
                row1.add(row.get(3));
            } 
           
            // 成績
            if(nullOrBlank(row.get(4))){
                row1.add("");
            } else {
                // 成績
                row1.add(row.get(4));
            }
            
            rowDataList.add(row1);
        }
        
        //テンプレートのヘッダ部分をコピーする
        sheeBean.addCopyItem("A1", "A5");

        //指定するセルに値を設定する（ヘッダの利用が多い）
        sheeBean.addItem("A2", "成績書");

        //セルタイプの設定
        conditionMap.put(0, new ExcelCellBean(0, 0, "string"));
        //セルタイプの設定 
        conditionMap.put(1, new ExcelCellBean(0, 1, "string"));
        //セルタイプの設定
        conditionMap.put(2, new ExcelCellBean(0, 2, "string"));
        //セルタイプの設定 
        conditionMap.put(3, new ExcelCellBean(0, 3, "string"));
        //セルタイプの設定 
        conditionMap.put(4, new ExcelCellBean(0, 4, "number"));
        
        //データを指定する
        var listBean = sheeBean.addList("A5", rowDataList, conditionMap);

        //シートを追加する
        excelDataBean.addSheet("成績書", sheeBean);
        
        //ご自由に選んでください。
        //帳票中央ヘッダを指定する
　　　  excelDataBean.setHeaderCenter("14級1組");

　　　　//帳票中央フッターを指定する
        excelDataBean.setFooterCenter("%page% / %numPages%");
        
　　　　//帳票左ヘッダを指定する
　　　　//excelDataBean.setHeaderLeft("14級1組");
　　　　
        //帳票左フッターを指定する
       //excelDataBean.setFooterLeft("%page% / %numPages%");
        
    　　//帳票右ヘッダを指定する
　　　　//excelDataBean.setHeaderRight("14級1組");
　　　　
        //帳票右フッターを指定する
        //excelDataBean.setFooterRight("%page% / %numPages%");

        excelPrint.setExcelDataBean(excelDataBean);
　　　　//アップロードテンプレートファイルIDを入力する 
        excelPrint.setTemplateID(19);
        JsonObj = excelPrint.print("19");
    } else {
        //エラーメッセージを設定する
        excelDataBean.setErrorMsg("データは存在しない。");
        excelPrint.setTemplateID(19);
        excelPrint.setExcelDataBean(excelDataBean);
        JsonObj = excelPrint.print("19");
    }
} catch (e) {
trace(e);
    ActStr += "alert('" + e + "');";
}

```
関数定義：
(ツール＞ユーザー定義関数＞新規)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/0f45ca41-afac-b929-1104-07232095474c.png)
・関数名称を入力
・利用範囲と関数利用画面を選択
・実行場所はサーバーを選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/eaee792b-0a6c-d8a8-cc89-1b3b572aa843.png)
関数編集画面で、コードを入力します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/b51d12b1-05d6-5fca-421f-3d471db81faa.png)
3行目のgetObj()の パラメータは下図の右側表示された生徒IDです。ご注意ください。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/2394cffc-a178-cc58-8aae-3c3e9e9820f1.png)
コード下の部分setTemplateID()の パラメータは前にメモしたファイルIDです。
コードが編集した後、保存ボタンをクリックし関数を保存します。
(画面作成＞画面レイアウト作成＞印刷関数編集)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/ee69255a-a9d3-5ad9-4f32-891b3dc69f23.png)
印刷関数ボタンを右クリックし（コード表示）、前に定義した関数を選び、編集ボタンをクリックする。
次に編集ボタンをクリックし、画面で関数コードを編集してください。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/f5cdb85d-8312-7903-b6a8-1b3fa9dbf44a.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/be8cf883-e787-63de-0a1b-9205e05e5998.png)

「関数編集」タブを開き、サンプルのSQLコードを編集することができます。
「SQL構文検証」ボタンにより、SQL構文の実行結果を検証できます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/39aff891-97d9-90bc-3131-5e7713301421.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/7428dc76-0f61-54f2-56ef-f7cd42519417.png)
不明なところがあればdevelop doc をクリックすると参照でき「ExcelDataBean説明書」があります。不明な方法をコピーし左側のExcelDataBeanをクリック、Ctrl+Fで検索することができます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/d39f8afd-ce55-e8d9-66a7-fb9674be29e7.png)

#####このサンプルに使っているメソッドは以下の通りです。(リンクをクリックすると説明書に遷移します)
・[setHeaderCenter](http://www.saasforce.co.jp/help/jpn/fundoc/com/wonderfulfly/saasforce/business/edit/inout/data/ExcelDataBean.html#setHeaderCenter(java.lang.String)): 帳票中央ヘッダーを指定する
・[setFooterCenter](http://www.saasforce.co.jp/help/jpn/fundoc/com/wonderfulfly/saasforce/business/edit/inout/data/ExcelDataBean.html#setFooterCenter(java.lang.String)): 帳票中央フッターを指定する
・[setHeaderLeft](http://www.saasforce.co.jp/help/jpn/fundoc/com/wonderfulfly/saasforce/business/edit/inout/data/ExcelDataBean.html#setHeaderLeft(java.lang.String)): 帳票左ヘッダーを指定する
・[setFooterLeft](http://www.saasforce.co.jp/help/jpn/fundoc/com/wonderfulfly/saasforce/business/edit/inout/data/ExcelDataBean.html#setFooterLeft(java.lang.String)): 帳票左フッターを指定する
・[setHeaderRight](http://www.saasforce.co.jp/help/jpn/fundoc/com/wonderfulfly/saasforce/business/edit/inout/data/ExcelDataBean.html#setHeaderRight(java.lang.String)): 帳票右ヘッダーを指定する
・[setFooterRight](http://www.saasforce.co.jp/help/jpn/fundoc/com/wonderfulfly/saasforce/business/edit/inout/data/ExcelDataBean.html#setFooterRight(java.lang.String)): 帳票右フッターを指定する
##ステップ4：印刷結果（画面からテストデータを入力して、印刷関数ボタンをクリック）
印刷関数ボタンを押すと、Excelファイルがダウンロードされますので、内容を確認して印刷できるようになります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/cd66c43c-0773-739f-412b-8e9d1e942df3.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/107b35ae-2b35-b465-d7ad-ed697b661761.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/451ea398-70f5-9e00-4402-1ae3d1f94f26.png)