[帳票編]印刷レイアウト位置の設定

##印刷レイアウト位置の設定についての例
メソッド：setVerticallyCenter(),setHorizontallyCenter()
###ステップ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%E4%BD%8D%E7%BD%AE.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:site_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 != "") {	
　　　//StringBuilder文字列を連接する	
        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.setVerticallyCenter(true);	
	
        //印刷帳票が水平中央を指定する	
        excelDataBean.setHorizontallyCenter(true);	
	
        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)

#####このサンプルに使っているメソッドは以下の通りです。(リンクをクリックすると説明書に遷移します)
1.[setVerticallyCenter](http://www.saasforce.co.jp/help/jpn/fundoc/com/wonderfulfly/saasforce/business/edit/inout/data/ExcelDataBean.html#setVerticallyCenter(boolean)): 印刷帳票が縦中央を指定する
2.[setHorizontallyCenter](http://www.saasforce.co.jp/help/jpn/fundoc/com/wonderfulfly/saasforce/business/edit/inout/data/ExcelDataBean.html#setHorizontallyCenter(boolean)): 印刷帳票が水平中央を指定する
##ステップ4：印刷結果（画面からテストデータを入力して、印刷関数ボタンをクリック）
印刷関数ボタンを押すと、Excelファイルがダウンロードされますので、内容を確認して印刷できるようになります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/e8c73705-547d-6cce-8315-c3d5f63c6085.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/ea865344-3464-a634-98ac-bb3c760d9475.png)