[StaticTable編](2)基本的な操作

##このサンプルはStaticTableの基本的な操作方法です。

###ステップ1：Static Tableの表示をする画面と関数を作成します。
###ステップ2：Static Tableの表示を確認します。

##ステップ1：Static Tableの表示をする画面と関数を作成します。

#####1-1．＜画面＞ー＜画面レイアウト作成＞を開き、「新規」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/2ad269fa-a708-ffa5-6dfb-df6da665ccc3.png)

#####1-2．「画面名」にStaticTableを入力、「管理ID」にStaticTableを入力し、ボタンタイプの項目数に1を入力、「保存して次へ」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/c1d28fb4-5525-4697-d5d1-04ddf841fa66.png)

#####1-3．「フォルダ追加管理」ダイアログボックスが表示されます。画面の登録対象フォルダを選択して「登録」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/0696c585-5950-a724-0bc5-8979201ae1b9.png)

#####1-4．＜画面＞－＜画面レイアウト作成＞を開き、画面レイアウト設計「StaticTable」行の「編集」ボタンをクリック、「画面レイアウト設計」画面を表示します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/bc5d1549-3c92-2408-65b4-2142494fe1f1.png)

#####1-5．「画面デザイン」画面が表示されます。この画面で項目の移動、変更などが自由に行えます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/6b0a9017-dc77-dedd-22a9-20cfe4ac4b5d.png)
「閉じる」ボタンを右クリックし、削除を左クリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/b1d0842e-3ba2-e306-95bf-cb06d8cb44c8.png)
「btn2」ボタンを右クリック。「項目定義」をクリックし項目名「btn2」を「検索」に変更します。「保存」ボタンをクリックし変更を保存します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/fb5a0525-0b98-ed30-f8ec-e5e5fb67ecb8.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/8c832c77-b456-a46d-01cf-8c170da77b76.png)
ツールバーで「項目追加」ボタンをクリック。項目名と項目IDを入力して「表示種類」に「表」を選びます。「保存」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/81c06545-68e9-cd09-9b8d-940ead57bd80.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/602b1ce1-64b5-243a-d334-3768adece7c9.png)
表設定を行います。「表データ件数」に「複数件」を選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/52a54c19-1e5c-9ac8-b15a-2755a75434f6.png)


作成した表に3列を追加します。「ITEM1」を左クリックし選択します。「ITEM1」を右クリックし「列の挿入」を左クリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/8f0d8764-e45b-52be-fb0b-d2b176d69c2c.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/e0eb3f67-3be5-79fe-9534-715c9e471a4b.png)

「ITEM1」を左クリックし選択します。「ITEM1」を右クリックし「コントロール設定」を左クリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/8bf60b3f-b829-cf90-88fb-686b7f69911e.png)
「項目名」を入力し、「保存」ボタンをクリックします。ほかのタイトルも同じように設定します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/c0eea6db-8a62-ca84-42e1-aa2eb87621d5.png)
下図の通り設定します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/61fa9699-2fba-0c4f-5bd8-a26bc7ee5975.png)

3行目の「ITEM1」を左クリックし選択します。「ITEM1」を右クリックし「行削除」を左クリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/bf88cd41-c637-341d-f91c-f7dacf7f28a7.png)
削除した後「社員ID」下のセル「ITEM1」をダブルクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/ea7848b2-1f54-378d-cfa9-7e4849f263cc.png)
キーボードの「Backspace」で値を削除します。同じ行のセルも削除します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/d8b8242b-a197-2a6b-ecc6-8a67cfb27380.png)

「給料」下のセルを左クリックし選択し、セルを右クリックし「コントロール設定」を左クリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/f000097c-76cc-8781-c58c-d363c2d0c4cf.png)
項目名を入力、「書式設定->横寄せ」に「右」を選んで保存します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/e87e97bc-a320-7a3b-46cb-7c1a0d282e3b.png)
キーボードの「Backspace」で「項目名1」を削除します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/b4cba367-43de-8ad5-be49-e1d643257e96.png)

ツールバーで
「項目追加」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/7fed8149-4a6d-95d6-9901-8e8a58efe716.png)
項目名を入力し、「表示種類」に「Textbox」を選びます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/560565c6-7c57-5387-0141-deedbd9989d2.png)
自由に項目の移動、変更などができます。最後に「保存」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/a7bc9c59-c685-c384-afb3-af592c33e109.png)
#####1-6．関数作成
```javascript:statictable_sample1
var st1 = getStaticTable("static4");
var strSql = new StringBuilder();
var param = [1];
var al = null;
var row = null;
var userID = getObj('txt36'); 
var background = "d6e6ff";
var fontcolor = "000000";
var week = "";
var yakushoku;
var stopFlg = false;
try {
    strSql.setLength(0);
    strSql.append(
        "SELECT ID, NAME, DEPT, AGE, SALARY FROM EMPLOYEE"
    );
    //検索条件:社員ID
    if (userID != null && userID != "") {
        strSql.append(" WHERE ID  LIKE '%" + userID + "%'");
    }
    strSql.append(" ORDER BY ID");
    // 日報承認データ取得
    al = exequeryarrylist(strSql.toString());
    if (al != null && al.size() > 0) {
        var list = new ArrayList();
        for (var i = 0; i < al.size(); i++) {
            var maptimuzhou = new HashMap();
            var keibItemBean = new ItemBean();
            row = al.get(i);
            keibItemBean = new ItemBean();
            keibItemBean.setValue(row.get(0));
            keibItemBean.setBackground(background);
            keibItemBean.setFontColor(fontcolor);
            // 社員ID
            maptimuzhou.put("lbl15", keibItemBean);
            keibItemBean = new ItemBean();
            keibItemBean.setValue(row.get(1));
            keibItemBean.setBackground(background);
            keibItemBean.setFontColor(fontcolor);
            // 社員名
            maptimuzhou.put("lbl17", keibItemBean);
            keibItemBean = new ItemBean();
            keibItemBean.setValue(row.get(2));
            keibItemBean.setBackground(background);
            keibItemBean.setFontColor(fontcolor);
            // 所属
            maptimuzhou.put("lbl35", keibItemBean);
            keibItemBean = new ItemBean();
            keibItemBean.setValue(row.get(3));
            keibItemBean.setBackground(background);
            keibItemBean.setFontColor(fontcolor);
            // 年齢
            maptimuzhou.put("lbl29", keibItemBean);
            keibItemBean = new ItemBean();
            keibItemBean.setValue(row.get(4));
            keibItemBean.setBackground(background);
            keibItemBean.setFontColor(fontcolor);
            // 給料
            maptimuzhou.put("lbl23", keibItemBean);
            list.add(maptimuzhou);
        　　//list.add(maptimuzhou);
        } 
      　　//表のすべての項目情報を設定
        　st1.setData(list);
        　ActStr += "" + JsUtil.saasforce_item2js(st1, true, null);
    } else {
        var list = new ArrayList();
        var map = new HashMap();
        list.add(map);
        ActStr = "alert('該当データは存在しません。');";
    }
} catch (e) {
    trace(e);
    ActStr = "alert('検索時エラーが発生しました。システム管理者にご連絡してください。[" + e + "]');";
}
```

＜ツール＞－＜ユーザー定義関数＞の画面を開き、中央上の「検索条件」ボタンをクリックします。左から2番目「新規」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/e0e312a6-913e-cd19-aaab-ef994c4333ec.png)
「プロパティ定義」画面にて、「関数名称」を入力、「利用範囲」に「詳細画面利用関数」を選択、「関数利用画面」に「P00005-StaticTable」を選択し、「処理方式」に「同期処理」をチェック、「実行場所」に「サーバー」をチェックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/0a2605b4-2a67-4838-0236-f0cb83e5e752.png)
「関数編集」画面にて、関数をコピーします。関数コードのgetObject()の引数は関数デザイン画面の表「項目ID」と同じです。 maptimuzhou.put()の引数「lbl15」はタイトル「社員ID」下の項目IDと同じです。maptimuzhou.put()他の引数も同じように設定します。「保存」ボタンをクリックし、「関数ID」が取得できます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/d5dc852d-432f-154a-a20d-9afdccfda476.png)
＜画面＞－＜画面レイアウト作成＞の画面を開き、「StaticTable」行の「編集」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/d67ab6d5-694b-0373-ac10-7a543915d1d4.png)
「画面デザイン」にて、検索ボタンを右クリックし、コード表示を左クリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/e71ce109-af49-fffb-ece2-e0313ebb30ea.png)
「関数タイプ」に「詳細画面利用関数」を選択、関数名称が自動に表示されます。「保存」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/b5792123-eecc-fb8f-6c6e-007e3b965120.png)
##ステップ2：Static Tableの表示を確認します。
運用環境にログインします。StaticTable画面を開いて、「検索」ボタンをクリックし、登録したデータを検索できます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/9578b178-80d1-6c79-45f3-504ac4a5d223.png)