Category Archive Joget

Byphunsanit

JoGet: Bean Shell Create Json

วิธีดีที่สุดในการให้ข้อมูลจำนวนมากให้ javascript คือรูปแบบ json ไม่เว้นแม้แต่ใน JoGet เพราะถึงแม้จะสามารถดึงข้อมูลจาก input หรือ grid ได้ แต่มันจะถูกบันทึกลง database ไปด้วยแถมดูรก

วิธีที่ดีอีกวิธีคือให้ beanshell ใน section ดึงข้อมูลจาก query แล้วแสดงออกมาใน input ตัวเดียว

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import javax.sql.DataSource;
import org.joget.apps.app.service.AppUtil;
import org.joget.apps.form.model.Element;
import org.joget.apps.form.model.FormData;
import org.joget.apps.form.model.FormRow;
import org.joget.apps.form.model.FormRowSet;
import org.joget.apps.form.service.FormUtil;
import org.joget.commons.util.LogUtil;
import org.json.simple.JSONObject;

public FormRowSet load(Element element, String username, FormData formData) {

 FormRowSet rows = new FormRowSet();

 Connection con = null;
 try {
  DataSource ds = (DataSource) AppUtil.getApplicationContext().getBean("setupDataSource");
  con = ds.getConnection();

  sql = "SELECT appId, appVersion, name FROM jwdb.app_app WHERE published = 1;";
  //LogUtil.info("Bean Shell Create Json", "sql = " + sql);

  if (!con.isClosed()) {
   PreparedStatement stmt = con.prepareStatement(sql);
   ResultSet rs = stmt.executeQuery();

   /* create json */
   JSONObject json = new JSONObject();
   while (rs.next()) {
    JSONObject item = new JSONObject();

    item.put("appVersion", rs.getObject("appVersion"));
    item.put("name", rs.getObject("name"));

    json.put(rs.getObject("appId"), item);
   }

   /* add json to input */
   FormRow row = new FormRow();
   rows.add(row);
   row.put("json", json.toString());
  }

 } catch (Exception e) {
  LogUtil.error(getClassName(), e, "Bean Shell Create Json");
 } finally {
  try {
   if (con != null) {
    con.close();
   }
  } catch (SQLException e) {}
 }

 return rows;
}

return load(element, primaryKey, formData);

ตัวอย่างฟอร์ม

{
    "className": "org.joget.apps.form.model.Form",
    "properties": {
        "noPermissionMessage": "",
        "loadBinder": {
            "className": "org.joget.apps.form.lib.WorkflowFormBinder",
            "properties": {}
        },
        "name": "Bean Shell Create Json",
        "description": "",
        "postProcessorRunOn": "both",
        "permission": {
            "className": "",
            "properties": {}
        },
        "id": "BeanShellCreateJson",
        "postProcessor": {
            "className": "",
            "properties": {}
        },
        "storeBinder": {
            "className": "org.joget.apps.form.lib.WorkflowFormBinder",
            "properties": {}
        },
        "tableName": "prototypes"
    },
    "elements": [
        {
            "elements": [
                {
                    "elements": [
                        {
                            "className": "org.joget.apps.form.lib.TextArea",
                            "properties": {
                                "readonly": "",
                                "validator": {
                                    "className": "",
                                    "properties": {}
                                },
                                "workflowVariable": "",
                                "id": "json",
                                "label": "JSON",
                                "placeholder": "",
                                "rows": "10",
                                "value": "",
                                "cols": "100",
                                "readonlyLabel": ""
                            }
                        }
                    ],
                    "className": "org.joget.apps.form.model.Column",
                    "properties": {
                        "width": "100%"
                    }
                }
            ],
            "className": "org.joget.apps.form.model.Section",
            "properties": {
                "readonly": "",
                "loadBinder": {
                    "className": "org.joget.apps.form.lib.BeanShellFormBinder",
                    "properties": {
                        "useAjax": "",
                        "cacheIdlePause": "120",
                        "cacheInterval": "",
                        "script": "import java.sql.Connection;\nimport java.sql.PreparedStatement;\nimport java.sql.ResultSet;\nimport java.sql.SQLException;\nimport javax.sql.DataSource;\nimport org.joget.apps.app.service.AppUtil;\nimport org.joget.apps.form.model.Element;\nimport org.joget.apps.form.model.FormData;\nimport org.joget.apps.form.model.FormRow;\nimport org.joget.apps.form.model.FormRowSet;\nimport org.joget.apps.form.service.FormUtil;\nimport org.joget.commons.util.LogUtil;\nimport org.json.simple.JSONObject;\n\npublic FormRowSet load(Element element, String username, FormData formData) {\n\n FormRowSet rows = new FormRowSet();\n\n Connection con = null;\n try {\n  DataSource ds = (DataSource) AppUtil.getApplicationContext().getBean(\"setupDataSource\");\n  con = ds.getConnection();\n\n  sql = \"SELECT appId, appVersion, name FROM jwdb.app_app WHERE published = 1;\";\n  //LogUtil.info(\"Bean Shell Create Json\", \"sql = \" + sql);\n\n  if (!con.isClosed()) {\n   PreparedStatement stmt = con.prepareStatement(sql);\n   ResultSet rs = stmt.executeQuery();\n\n   /* create json */\n   JSONObject json = new JSONObject();\n   while (rs.next()) {\n    JSONObject item = new JSONObject();\n\n    item.put(\"appVersion\", rs.getObject(\"appVersion\"));\n    item.put(\"name\", rs.getObject(\"name\"));\n\n    json.put(rs.getObject(\"appId\"), item);\n   }\n\n   /* add json to input */\n   FormRow row = new FormRow();\n   rows.add(row);\n   row.put(\"json\", json.toString());\n  }\n\n } catch (Exception e) {\n  LogUtil.error(getClassName(), e, \"Bean Shell Create Json\");\n } finally {\n  try {\n   if (con != null) {\n    con.close();\n   }\n  } catch (SQLException e) {}\n }\n\n return rows;\n}\n\nreturn load(element, primaryKey, formData);"
                    }
                },
                "permissionReadonly": "",
                "permission": {
                    "className": "",
                    "properties": {}
                },
                "comment": "",
                "id": "section1",
                "label": "Bean Shell Create Json",
                "storeBinder": {
                    "className": "",
                    "properties": {}
                },
                "readonlyLabel": ""
            }
        }
    ]
}

Byphunsanit

javascript: string to JSON.parse()

หลังจากใช้ MySQL: return json format กันเป็นแล้วเรามาลองใช้กับ joget แทนที่จะต้องไปเขียน beanshell ให้ยุ่งยาก (พลาดง่ายๆ อีกตะหาก) ดูจริงๆ แล้วสามารถใช้กับหน้าเว็บทั้งหมดไม่ใช่แค่ joGet เพราะมันคือ javascript พื้นฐาน

เปิดฟอร์มที่ต้องการมา

  1. สร้าง section ขึ้นมา โดยกำหนด Load Binder เป็น JDBC Binder และ SQL SELECT Query ใส่ query ที่ต้องการ เช่น
    SELECT
        CONCAT('[',
                GROUP_CONCAT(JSON_OBJECT('label', name, 'value', appId)),
                ']') AS optionsList
    FROM
        jwdb.app_app
    ORDER BY name ASC
  2. ลาก Hidden Field มาตั้ง id เป็น optionsList ใน section ที่สร้างไว้
  3. เขียน javascript ดึงค่ามาจาก string json ที่เก็บไว้ใน input ชื่อ optionsList โดยใช้ JSON.parse() เผื่อความปลอดภัย ควรใช้ JSON.parse() ใน try catch เพราะว่าถ้า json ที่ได้ผิดปกติจะสามารถควบคุมได้ ลาก Custom HTML มาแล้วใส่ code
    <table class="table table-striped" id="tableA">
        <thead>
            <tr>
                <th scope="col" style="width:20px;">#</th>
                <th scope="col">Name</th>
                <th scope="col">Value</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <script>
        $(document).ready(function () {
    
            let html = new Array();
            let no = 0;
            let optionsList = $('#optionsList');
            try {
                let temp = JSON.parse(optionsList.val());
    
                if (temp.length > 0) {
                    $.each(temp, function (index, value) {
                        no++;
                        html.push('<tr><th scope="row">' + no + '</th><td>' + value.label + '</td><td>' + value.value + '</td><tr>');
                    });
                }
                if (html.length == 0) {
                    html = '<tr><th scope="row">-</th><td>-</td><td>-</td><tr>';
                } else {
                    html = html.join("\n");
                }
            } catch (e) {
                console.log(e.message);
                html = '<h1>Error!!</h1>';
            }
            $('#tableA > tbody').html(html);
    
        });
    </script>

สามารถ copy form ตัวอย่างได้จาก json

{
    "className": "org.joget.apps.form.model.Form",
    "properties": {
        "noPermissionMessage": "",
        "loadBinder": {
            "className": "org.joget.apps.form.lib.WorkflowFormBinder",
            "properties": {}
        },
        "name": "JSON Parse",
        "description": "",
        "postProcessorRunOn": "both",
        "permission": {
            "className": "",
            "properties": {}
        },
        "id": "JSONParse",
        "postProcessor": {
            "className": "",
            "properties": {}
        },
        "storeBinder": {
            "className": "org.joget.apps.form.lib.WorkflowFormBinder",
            "properties": {}
        },
        "tableName": "prototypes"
    },
    "elements": [
        {
            "elements": [
                {
                    "elements": [
                        {
                            "className": "org.joget.apps.form.lib.HiddenField",
                            "properties": {
                                "useDefaultWhenEmpty": "",
                                "workflowVariable": "",
                                "id": "optionsList",
                                "value": ""
                            }
                        }
                    ],
                    "className": "org.joget.apps.form.model.Column",
                    "properties": {
                        "width": "100%"
                    }
                }
            ],
            "className": "org.joget.apps.form.model.Section",
            "properties": {
                "readonly": "",
                "loadBinder": {
                    "className": "org.joget.plugin.enterprise.JdbcLoadBinder",
                    "properties": {
                        "jdbcDatasource": "default",
                        "sql": "SELECT \n    CONCAT('[',\n            GROUP_CONCAT(JSON_OBJECT('label', name, 'value', appId)),\n            ']') AS optionsList\nFROM\n    jwdb.app_app\nORDER BY name ASC"
                    }
                },
                "permissionReadonly": "",
                "permission": {
                    "className": "",
                    "properties": {}
                },
                "comment": "",
                "id": "section1",
                "label": "",
                "storeBinder": {
                    "className": "",
                    "properties": {}
                },
                "readonlyLabel": ""
            }
        },
        {
            "elements": [
                {
                    "elements": [
                        {
                            "className": "org.joget.apps.form.lib.CustomHTML",
                            "properties": {
                                "autoPopulate": "",
                                "id": "field2",
                                "label": "",
                                "value": "<table class=\"table table-striped\" id=\"tableA\">\n    <thead>\n        <tr>\n            <th scope=\"col\" style=\"width:20px;\">#</th>\n            <th scope=\"col\">Name</th>\n            <th scope=\"col\">Value</th>\n        </tr>\n    </thead>\n    <tbody>\n    </tbody>\n</table>\n<script>\n    $(document).ready(function () {\n\n        let html = new Array();\n        let no = 0;\n        let optionsList = $('#optionsList');\n        try {\n            let temp = JSON.parse(optionsList.val());\n\n            if (temp.length > 0) {\n                $.each(temp, function (index, value) {\n                    no++;\n                    html.push('<tr><th scope=\"row\">' + no + '</th><td>' + value.label + '</td><td>' + value.value + '</td><tr>');\n                });\n            }\n            if (html.length == 0) {\n                html = '<tr><th scope=\"row\">-</th><td>-</td><td>-</td><tr>';\n            } else {\n                html = html.join(\"\\n\");\n            }\n        } catch (e) {\n            console.log(e.message);\n            html = '<h1>Error!!</h1>';\n        }\n        $('#tableA > tbody').html(html);\n\n    });\n</script>"
                            }
                        }
                    ],
                    "className": "org.joget.apps.form.model.Column",
                    "properties": {
                        "width": "100%"
                    }
                }
            ],
            "className": "org.joget.apps.form.model.Section",
            "properties": {
                "readonly": "",
                "loadBinder": {
                    "className": "",
                    "properties": {}
                },
                "permissionReadonly": "",
                "permission": {
                    "className": "",
                    "properties": {}
                },
                "comment": "",
                "id": "section2",
                "label": "Options List",
                "storeBinder": {
                    "className": "",
                    "properties": {}
                },
                "readonlyLabel": ""
            }
        }
    ]
}

Byphunsanit

MySQL: return json format

mysql ก็ support json เพราะว่าเดี๋ยวนี้อะไรๆ ก็แลกเปลี่ยนข้อมูลกันโดยใช้ json ถ้าสามารถ query จาก mysql ให้ result ออกมาเป็น json เลย ก็สะดวกที่จะไม่ต้องใช้ java หรือ beanshell ใน joget แปลงผลลัพธ์ให้ยุ่งยาก แค่มี input ซักตัวก็สามารถนำมันไปใช้ได้เลย

เริ่มจากการที่เขียน query ตามปกติเพื่อเลือกข้อมูลที่ต้องการ เช่น

SELECT
    *
FROM
    snippets.province
ORDER BY PROVINCE_NAME ASC;

จะเห็นว่ามี column PROVINCE_ID, PROVINCE_CODE, PROVINCE_NAME และ GEO_ID ทีนี้จะแปลง ให้เป็นรูปแบบ json array โดยใช้ JSON_OBJECT วิธีการใช้คือ

SELECT JSON_OBJECT('name1', value1, 'name2', value2, 'name3', value3);

คือ

SELECT
    JSON_OBJECT('PROVINCE_ID',
            PROVINCE_ID,
            'PROVINCE_CODE',
            PROVINCE_CODE,
            'PROVINCE_NAME',
            PROVINCE_NAME,
            'GEO_ID',
            GEO_ID) AS json
FROM
    snippets.province
ORDER BY PROVINCE_NAME ASC;

ค่าค่อยดูเป็น json ขึ้นมาหน่อย แต่มันยังอยู่คนละแถว ไม่เป็นไรมีตัวช่วย

SELECT
    CONCAT('[',
            GROUP_CONCAT(JSON_OBJECT('PROVINCE_ID',
                        PROVINCE_ID,
                        'PROVINCE_CODE',
                        PROVINCE_CODE,
                        'PROVINCE_NAME',
                        PROVINCE_NAME,
                        'GEO_ID',
                        GEO_ID)),
            ']') AS json
FROM
    snippets.province
ORDER BY PROVINCE_NAME ASC;

แค่นี้ก็ได้ result เป็น json สมใจ อ่านตัวอย่างการใช้ได้ที่ javascript: string to JSON.parse()

Byphunsanit

joGet: Pending Process Activity and Assignees

ต้องการสร้าง List ใน joGet เพิ่อที่จะได้ดูสถานะและเข้าไปดู form ใน process ตามขั้นตอนต่างๆ ใน workflow

ทำได้โดยใช้ความรู้ 2 เรื่องคือ

การใช้ query เพิ่อดู process activity

process ที่กำลังอยู่ระหว่างสถานะต่างๆ จะถูกบันทึกลงใน database สามารถ query มาดูได้โดยใช้ตัวอย่าง เช่น

SELECT
a.*,
sact.Name AS activityName,
GROUP_CONCAT(DISTINCT sass.ResourceId
SEPARATOR ', ') AS assignee
FROM
app_fd_hr_expense_claim a
JOIN
SHKActivities sact ON a.id = sact.ProcessId
JOIN
SHKActivityStates ssta ON ssta.oid = sact.State
INNER JOIN
SHKAssignmentsTable sass ON sact.Id = sass.ActivityId
WHERE
ssta.KeyValue = 'open.not_running.not_started'
GROUP BY a.id

ตามตัวอย่างใน List Pending Activity and Assignees อย่าลืมเปลี่ยนตาราง a เป็นตารางที่ใช้ใน process จริงๆ

การใช้ link ไปยังฟอร์มตาม activity
ลิงค์ของ joget จะอยู่ในรูปแบบ /jw/web/userview/ {app id} / {userview id} /_/ {process_id} ?_action=assignmentView

ตัวอย่าง list ที่เสร็จแล้ว

{"id":"activity_and_assignees","name":"Activity And Assignees","pageSize":"0","order":"","orderBy":"","showPageSizeSelector":"true","pageSizeSelectorOptions":"10,20,30,40,50,100","buttonPosition":"bottomLeft","checkboxPosition":"left","useSession":"false","hidePageSize":"true","description":"","rowActions":[{"name":"Data List Hyperlink Action","className":"org.joget.apps.datalist.lib.HyperlinkDataListAction","label":"Hyperlink","type":"text","id":"rowAction_0","properties":{"href":"\/jw\/web\/userview\/vehicle\/carpark\/_\/car_park_registration?_action=assignmentView","target":"_self","hrefParam":"activityId","hrefColumn":"activityId","label":"Run Process","confirmation":"","visible":"","rules":[]}}],"actions":[],"filters":[],"binder":{"className":"org.joget.plugin.enterprise.JdbcDataListBinder","properties":{"jdbcDatasource":"default","sql":"SELECT \n    a.*,\n    sass.activityId,\n    sact.Name AS activityName,\n    GROUP_CONCAT(DISTINCT sass.ResourceId\n        SEPARATOR ', ') AS assignee\nFROM\n    app_fd_cars AS a\n        JOIN\n    SHKActivities AS sact ON a.id = sact.ProcessId\n        JOIN\n    SHKActivityStates AS ssta ON ssta.oid = sact.State\n        INNER JOIN\n    SHKAssignmentsTable AS sass ON sact.Id = sass.ActivityId\nWHERE\n    ssta.KeyValue = 'open.not_running.not_started'\nGROUP BY a.id","primaryKey":"id"}},"columns":[{"id":"column_0","label":"id","displayLabel":"id","name":"id"},{"id":"column_1","label":"c_licensePlate","displayLabel":"c_licensePlate","name":"c_licensePlate"},{"id":"column_2","label":"c_brand","displayLabel":"c_brand","name":"c_brand"},{"id":"column_3","label":"c_approve","displayLabel":"c_approve","name":"c_approve"},{"id":"column_4","label":"activityName","displayLabel":"activityName","name":"activityName"},{"id":"column_5","label":"assignee","displayLabel":"assignee","name":"assignee"}]}

นอกจากนี้ยังสามารถหาตัวอย่างได้จาก app Process Monitor Utility ได้อีกด้วย

Byphunsanit

joGet: editable input

ต้องการให้ user ต้องคลิก Click to Edit เพื่อที่จะแก้ไขข้อมูล ที่เป็นข้อมูลที่สำคัญๆ เพื่อป้องกันการบันทึกข้อมูลโดยไม่ตั้งใจ

เพื่อที่จะสามารถ reused code นี้ไปใช้ในฟอร์มอื่นๆ จึงเขียนไว้ในไฟล์กลาง

/*
pitt phunsanit
editable input
version 1
*/
function clickToEdit(inputs) {
$.each(inputs, function(key, value) {
let id = value + "EditFlag";
let input = FormUtil.getField(value);

input
.attr("readonly", true)
.closest(".form-cell")
.append(
'<label style="display: inline;"><input id="' +
id +
'" name="' +
id +
'" type="checkbox" value="Y"> Click to Edit</label>'
);
$("#" + id).on("change", function() {
if ($(this).prop("checked") == true) {
input.prop("readonly", false);
} else {
input.prop("readonly", true);
}
});
});
}

การใช้งานเพียงแค่เรียกใช้ function ถ้าต้องการให้คลิกเพื่อแก้ไข input id firstname, surname, middlename ก็เขียน JavaScript ตามตัวอย่าง

<script src="/jw/assets/scripts.js"></script>
<script>
$(document).ready(function () {

clickToEdit(['firstname', 'surname', 'middlename']);

});
</script>
Byphunsanit

joGet: AJAX Subform reload

ตัวอย่างการสร้าง ajax subform ในเรื่อง joGet: AJAX Subform มีโจทย์มาว่า input ที่ผูกกับซับฟอร์มถูกเปลี่ยนค่าจาก javascript ก็คิดว่าค่าใน subform จะเปลี่ยนตามไปด้วย แต่มันกลับไม่เปลี่ยนตาม เพราะ input ค่าเปลี่ยนก็จะทำให้มันโหลดข้อมูลมาใหม่ได้ไม่ยาก แต่มันไม่ทำงาน ลองศึกษาไฟล์ /jw/plugin/org.joget.plugin.enterprise.AjaxSubForm/js/jquery.ajaxsubform.js ดูก็พบว่ามันมีการสั่ง .off เอา event เก่าออกไปก่อน ทำให้แค่เปลี่ยนค่าเฉยๆ มันจะไม่ทำงาน

การสั่ง reload / refresh ajax subform โดยใช้ javascript ทำได้โดย

<button class="btn btn-info" id="refreshBtn" type="button">Reload form</button>
<script>
$(document).ready(function() {

$('#refreshBtn').on('click', function() {

let field1 = FormUtil.getField('field1');
field1.val('72817b0c-ac1430db-671b8000-37df4c8d');
field1.trigger('change');

});

});
</script>

แบบนี้เมื่อนเปลี่ยนค่า field1 subform จะถูกเปลี่ยนค่าตามไปด้วยแล้ว ลองดัดแปลงให้เหมาะกับงานดูนะครับ

Byphunsanit

joGet: AJAX Subform

AJAX Subform เป็น Form Element ที่ joget เตรียมไว้ให้สามารถใช้ ajax ดึงข้อมูลฟอร์มที่มีมาแสดงได้แบบไม่จำเป็นต้องโหลดทั้งหน้าใหม่ เหมือนระบบที่เราเขียนด้วยตัวเอง

การใช้งานทำได้ง่ายๆ โดยการ

    1. ในหน้า Form Builder ลาก AJAX Subform มาจากด้านซ้ายมือ
    2. คลิก Edit ไอค่อน
    3. กรอกข้อมูล
      ID
      id ของ ajax subform เช่น ajaxSubform
      Form
      เลือกฟอร์มที่ต้องการนำมาแทรกไว้ในหน้านี้
    4. คลิก Next >
    5. ติ๊ก
      Reload Subform when Parent Field value change?
      ติ๊กเพื่อจะให้ ajax ทำงานโหลด ฟอร์มใหม่เมื่อ input ที่ผูกไว้ เปลี่ยนค่า
    6. ผูกฟอร์มทั้งสองไว้ด้วยกัน
      Parent Field to keep Subform ID
      id input ในฟอร์มหลัก ที่จะใช้ลิงค์ให้ sub form ถูกดึงมาแทนที่โดยใช้ ajax
      Subform Field to keep Parent ID
      เป็น input ที่อยู่ใน subform ถ้าไม่มี การ load subform มาจาก server ก็ยังทำงานได้ตามปกติ

ทีนี้มาศึกษาการทำงานกันดูบ้าง

      1. joGet จะแทรกไฟล์ /jw/plugin/org.joget.plugin.enterprise.AjaxSubForm/js/jquery.ajaxsubform.js เพิ่มเข้ามาจากปกติ
      2. จะถูกเรียกใช้โดย javascript ที่เพิ่มเข้ามา เช่น
        <script type="text/javascript">
        $(document).ready(function() {
        $("#ajaxSubform_ajaxsubform_928").ajaxSubForm({
        contextPath: "/jw",
        id: "ajaxSubform",
        label: "",
        formDefId: "sendEmail",
        readOnly: "",
        readOnlyLabel: "",
        noframe: "",
        ajax: "true",
        parentSubFormId: "field1",
        prefix: "",
        hideEmpty: "",
        appId: "prototypes",
        appVersion: "1",
        processId: "",
        nonce: "%EF%BF%BD%00%3B%7D%28%EF%BF%BD%EF%BF%BD%EF%BF%BD",
        collapsible: "",
        collapsibleLabelExpanded: "Hide Details",
        collapsibleLabelCollapsed: "View Details",
        collapsibleExpanded: "true",
        collapsibleNoLoad: ""
        });
        });
        </script>

เมื่อไล่ดู code แล้วมันคือ plugin ที่ extended มาจาก jQuery ajax ตามปกติ ส่ง request ไปยัง /jw/web/json/plugin/org.joget.plugin.enterprise.AjaxSubForm/service โดยส่ง formDefId มีค่าเป็น form id ของ subform, parentSubFormId คือ field ในฟอร์มหลักที่ใช้ผูกกับซับฟอร์ม และจะคืนค่ากลับมาเป็น html ของฟอร์ม ในอนาคตคงได้ใช้เรียก ajax ไปโดยไม่ต้องสร้าง subform ก่อน

อ่านเพิ่มเติม

Byphunsanit

JoGet: Save PDF From Jasper Report

ตัวอย่างการ save pdf file ที่สร้างมาจาก JasperReports ก่อนที่จะส่งให้ user ทางอีเมล์ เพื่อที่ฝ่ายที่เกี่ยวข้องจะได้นำไฟล์มาตรวจสอบความถูกต้องในภายหลังว่ารีพอร์ตที่เป็น pdf ไฟล์ที่ส่งไปมีเนื่้อหายังไงจากไฟล์ที่บันทึกเอาไว้

เราสามารถทำได้โดยใช้ plugin Bean Shell Tool ตามตัวอย่าง

import java.util.HashMap;
import java.util.Map;
import javax.sql.DataSource;
import net.sf.jasperreports.engine.JRException;
import net.sf.jasperreports.engine.JRExporterParameter;
import net.sf.jasperreports.engine.JasperExportManager;
import net.sf.jasperreports.engine.JasperFillManager;
import net.sf.jasperreports.engine.data.JRBeanCollectionDataSource;
import net.sf.jasperreports.engine.export.JRXlsExporter;
import org.joget.apps.app.service.AppUtil;

public Object execute() {

/* get parameters from outside activity tools box */
String id = "#variable.id#";

String documentRoot = "C:\\Joget-v5-Enterprise\\apache-tomcat-8.0.20\\webapps\\jw\\";

/* connection to default datasource */
DataSource ds = (DataSource) AppUtil.getApplicationContext().getBean("setupDataSource");
con = ds.getConnection();

/* load JasperReports template */
String sourceFileName = documentRoot + "assets\\JasperReports\\app.jasper";

Map parameters = new HashMap();

/* send parameters to jasper report */
parameters.put("id", id);

/* genrate pdf file and save to local directory */
printFileName = JasperFillManager.fillReportToFile(sourceFileName, parameters, con);
if (printFileName != null) {
JasperExportManager.exportReportToPdfFile(printFileName, documentRoot + "datas\\policies\\" + id + ".pdf");
}

return null;
}

//call execute method
return execute();

อธิบายการทำงาน จะเรียกใช้ beanshell เข้าไปเรียก class เดียวกับที่ joget ใช้ จึงมั่นใจได้ว่ารีพอร์ตที่ออกมาจะเหมือนกับที่ joget ใช้จริงๆ โดยจะอ่านไฟล์ .jasper มาจาก “C:\Joget-v5-Enterprise\apache-tomcat-8.0.20\webapps\jw\assets\JasperReports\app.jasper” จากนั้นจะสรุปออกมาเป็นไฟล์ .jrprint เอาไว้ใน “C:\Joget-v5-Enterprise\apache-tomcat-8.0.20\webapps\jw\assets\JasperReports\” เหมือนกัน แต่ชื่อไฟล์อาจจะต่างกันโดยจะตั้งตาม atrbut name ที่อยู่ใน tag jasperReport และสร้างไฟล์ pdf เก็บไว้ที่ “C:\Joget-v5-Enterprise\apache-tomcat-8.0.20\webapps\jw\datas\policies” ตาม ที่กำหนดไว้ที่ใน JasperExportManager.exportReportToPdfFile

เพราะว่าไฟล์ใน “C:\Joget-v5-Enterprise\apache-tomcat-8.0.20\webapps\jw” สามารถเรียกดูได้จาก url จึงควรระวังเรื่อง Information leakage เอาไว้ด้วย

Byphunsanit

joGet: ฟอร์มส่งอีเมล์

ตัวอย่างฟอร์มส่งอีเมล์โดยใน joget ผู้ใช้สามารถแนบไฟล์เพิ่มเติม เลือกไฟล์จากที่มีโดยจะมีตัวอย่างไฟล์ที่จะแนบไปด้วย ให้เห็นก่อนตัดสินใจส่งอีเมล์

สร้างฟอร์มที่จะส่งอีเมล์ได้โดยใช้ json

{"className":"org.joget.apps.form.model.Form","properties":{"id":"sendEmail","loadBinder":{"className":"org.joget.apps.form.lib.WorkflowFormBinder","properties":{}},"tableName":"prototypes","description":"","name":"Send Email","postProcessorRunOn":"both","storeBinder":{"className":"org.joget.apps.form.lib.WorkflowFormBinder","properties":{}},"postProcessor":{"className":"","properties":{}},"permission":{"className":"","properties":{}},"noPermissionMessage":""},"elements":[{"elements":[{"elements":[{"className":"org.joget.apps.form.lib.TextField","properties":{"id":"mailTo","workflowVariable":"mailTo","readonlyLabel":"","maxlength":"","encryption":"","validator":{"className":"org.joget.apps.form.lib.DefaultValidator","properties":{"message":"","custom-regex":"","mandatory":"true","type":"email"}},"value":"","label":"To","readonly":"","size":""}},{"className":"org.joget.apps.form.lib.TextField","properties":{"id":"mailCc","readonlyLabel":"","workflowVariable":"mailCc","maxlength":"","encryption":"","validator":{"className":"","properties":{}},"value":"","label":"CC","readonly":"","size":""}},{"className":"org.joget.apps.form.lib.TextField","properties":{"id":"mailBcc","readonlyLabel":"","workflowVariable":"mailBcc","maxlength":"","encryption":"","validator":{"className":"","properties":{}},"value":"","label":"BCC","readonly":"","size":""}},{"className":"org.joget.apps.form.lib.TextField","properties":{"id":"mailSubject","workflowVariable":"mailSubject","readonlyLabel":"","maxlength":"","encryption":"","validator":{"className":"org.joget.apps.form.lib.DefaultValidator","properties":{"message":"","custom-regex":"","mandatory":"true","type":""}},"value":"","label":"Subject","readonly":"","size":""}},{"className":"org.joget.apps.form.lib.TextArea","properties":{"id":"mailMessage","workflowVariable":"mailMessage","readonlyLabel":"","cols":"20","validator":{"className":"org.joget.apps.form.lib.DefaultValidator","properties":{"message":"","custom-regex":"","mandatory":"true","type":""}},"value":"","label":"Message","readonly":"","rows":"5"}},{"className":"org.joget.apps.form.lib.FileUpload","properties":{"id":"mailAttach1","fileType":"","validator":{"className":"","properties":{}},"label":"Attach","attachment":"","multiple":"","readonly":"","maxSize":"","maxSizeMsg":"File size limit exceeded","fileTypeMsg":"Invalid file type","permissionType":"","size":""}},{"className":"org.joget.apps.form.lib.HiddenField","properties":{"id":"mailAttachName1","workflowVariable":"mailAttachName1","value":"","useDefaultWhenEmpty":""}},{"className":"org.joget.apps.form.lib.HiddenField","properties":{"id":"mailAttachPath1","workflowVariable":"mailAttachPath1","value":"","useDefaultWhenEmpty":""}},{"className":"org.joget.apps.form.lib.HiddenField","properties":{"id":"mailAttachName2","workflowVariable":"mailAttachName2","value":"","useDefaultWhenEmpty":""}},{"className":"org.joget.apps.form.lib.HiddenField","properties":{"id":"mailAttachPath2","workflowVariable":"mailAttachPath2","value":"","useDefaultWhenEmpty":""}},{"className":"org.joget.apps.form.lib.HiddenField","properties":{"id":"mailAttachName3","workflowVariable":"mailAttachName3","value":"","useDefaultWhenEmpty":""}},{"className":"org.joget.apps.form.lib.HiddenField","properties":{"id":"mailAttachPath3","workflowVariable":"mailAttachPath3","value":"","useDefaultWhenEmpty":""}},{"className":"org.joget.apps.form.lib.HiddenField","properties":{"id":"mailAttachName4","workflowVariable":"mailAttachName4","value":"","useDefaultWhenEmpty":""}},{"className":"org.joget.apps.form.lib.HiddenField","properties":{"id":"mailAttachPath4","workflowVariable":"mailAttachPath4","value":"","useDefaultWhenEmpty":""}},{"className":"org.joget.apps.form.lib.CustomHTML","properties":{"id":"sendEmailTemplateA","autoPopulate":"","value":"<link href=\"\/jw\/plugin\/org.joget.plugin.enterprise.RichTextEditorField\/css\/jquery.richtext.css\" rel=\"stylesheet\" \/>\n<script src=\"\/jw\/js\/tiny_mce\/jquery.tinymce.js\"><\/script>\n<script src=\"\/jw\/plugin\/org.joget.plugin.enterprise.RichTextEditorField\/js\/jquery.richtext.js\"><\/script>\n<script src=\"\/jw\/assets\/scripts.js\"><\/script>\n<b>File Attached :: <\/b>\n<div class=\"accordion\" id=\"accordionA\"><\/div>\n<script>\n    $(document).ready(function() {\n\n        let mailMessage = $('#mailMessage');\n\n        let message = 'Dear'
+\n            '<br><br>The quick brown fox jumps over the lazy dog<br>' +\n            '<br><br>regard' +\n            '<br><br>Pitt Phunsanit';\n\n        mailMessage.val(message);\n        mailMessage.richtext({\n            \"contextPath\": \"\/jw\"\n        });\n\n        emailAttachment([{\n                \"name\": \"JasperReport 1\",\n                \"url\": \"#request.scheme#:\/\/#request.serverName#:#request.serverPort#\/jw\/web\/json\/plugin\/org.joget.plugin.enterprise.JasperReportsMenu\/service?action=report&appId=prototypes&appVersion=1&key=_&menuId=JasperReport1&type=pdf&userviewId=prototypes\"\n            },\n            {\n                \"name\": \"JasperReport 2\",\n                \"url\": \"#request.scheme#:\/\/#request.serverName#:#request.serverPort#\/jw\/web\/json\/plugin\/org.joget.plugin.enterprise.JasperReportsMenu\/service?action=report&appId=prototypes&appVersion=1&key=_&menuId=JasperReport2&type=pdf&userviewId=prototypes\"\n            },\n            {\n                \"name\": \"JasperReport 3\",\n                \"url\": \"#request.scheme#:\/\/#request.serverName#:#request.serverPort#\/jw\/web\/json\/plugin\/org.joget.plugin.enterprise.JasperReportsMenu\/service?action=report&appId=prototypes&appVersion=1&key=_&menuId=JasperReport3&type=pdf&userviewId=prototypes\"\n            },\n            {\n                \"name\": \"JasperReport 4\",\n                \"url\": \"#request.scheme#:\/\/#request.serverName#:#request.serverPort#\/jw\/web\/json\/plugin\/org.joget.plugin.enterprise.JasperReportsMenu\/service?action=report&appId=prototypes&appVersion=1&key=_&menuId=JasperReport4&type=pdf&userviewId=prototypes\"\n            }\n        ]);\n\n    });\n<\/script>","label":""}}],"className":"org.joget.apps.form.model.Column","properties":{"width":"100%"}}],"className":"org.joget.apps.form.model.Section","properties":{"id":"SendEmail","loadBinder":{"className":"","properties":{}},"visibilityControl":"","regex":"","visibilityValue":"","storeBinder":{"className":"","properties":{}},"label":"Send Email","permission":{"className":"","properties":{}}}}]}

การทำงานจะมี 2 ส่วนคือ ส่วนที่เรียกใช้ function สำเร็จรูป

<link href="/jw/plugin/org.joget.plugin.enterprise.RichTextEditorField/css/jquery.richtext.css" rel="stylesheet" />
<script src="/jw/js/tiny_mce/jquery.tinymce.js"></script>
<script src="/jw/plugin/org.joget.plugin.enterprise.RichTextEditorField/js/jquery.richtext.js"></script>
<script src="/jw/assets/scripts.js"></script>
<b>File Attached :: </b>
<div class="accordion" id="accordionA"></div>
<script>
$(document).ready(function() {

let mailMessage = $('#mailMessage');

let message = 'Dear' +
'<br><br>The quick brown fox jumps over the lazy dog<br>' +
'<br><br>regard' +
'<br><br>Pitt Phunsanit';

mailMessage.val(message);
mailMessage.richtext({
"contextPath": "/jw"
});

emailAttachment([{
"name": "JasperReport 1",
"url": "#request.scheme#://#request.serverName#:#request.serverPort#/jw/web/json/plugin/org.joget.plugin.enterprise.JasperReportsMenu/service?action=report&appId=prototypes&appVersion=1&key=_&menuId=JasperReport1&type=pdf&userviewId=prototypes"
},
{
"name": "JasperReport 2",
"url": "#request.scheme#://#request.serverName#:#request.serverPort#/jw/web/json/plugin/org.joget.plugin.enterprise.JasperReportsMenu/service?action=report&appId=prototypes&appVersion=1&key=_&menuId=JasperReport2&type=pdf&userviewId=prototypes"
},
{
"name": "JasperReport 3",
"url": "#request.scheme#://#request.serverName#:#request.serverPort#/jw/web/json/plugin/org.joget.plugin.enterprise.JasperReportsMenu/service?action=report&appId=prototypes&appVersion=1&key=_&menuId=JasperReport3&type=pdf&userviewId=prototypes"
},
{
"name": "JasperReport 4",
"url": "#request.scheme#://#request.serverName#:#request.serverPort#/jw/web/json/plugin/org.joget.plugin.enterprise.JasperReportsMenu/service?action=report&appId=prototypes&appVersion=1&key=_&menuId=JasperReport4&type=pdf&userviewId=prototypes"
}
]);

});
</script>
  • let message จะสร้างเนื้อหาอีเมล์เป็น template ให้ก่อน user จะได้ไม่ต้องเขียนเองใหม่ทุกครั้ง
  • .richtext() ทำหน้าที่เปลี่ยน textarea เป็น rich text box แทนที่จะใช้ rich text box ของ joGet เอง เพราะจะไม่มีที่ผูก workflow Variable ได้ (งงกับการออกแบบ tools ของพี่แกจริงๆ)
  • emailAttachment() จะสร้างส่วน ui ให้ user เลือกที่จะแนบไฟล์หรือไม่แนบไฟล์และแสดง preview pdf ให้ดูก่อนที่จะส่งอีเมล์ออกไป

และส่วน javascript ที่แยกออกไปเพื่อใช้ซ้ำในฟอร์มอื่นๆ

/*
pitt phunsanit
email attachment preview
version 1
*/
function emailAttachment(lists) {
let accordionA = $("#accordionA");
let expaned = "";

$.each(lists, function(a, item) {
let itemNo = a + 1;

$("#mailAttachName" + itemNo).val(item.name);
$("#mailAttachPath" + itemNo).val(item.url);

let id = "attach" + itemNo;

if (a == 0) {
expaned = " in";
} else {
expaned = "";
}

let card =
'<div class="accordion-group">' +
'<div class="accordion-heading">' +
'<input checked style="float: left; margin: 10px 10px 0 10px;" type="checkbox" value="' +
itemNo +
'">' +
'<a class="accordion-toggle" data-parent="#accordionA" data-toggle="collapse"  href="#' +
id +
'" style="margin: 0px 10px; width: 80%;">' +
item.name +
'</a><a class="fa fa-download" href="' +
item.url +
'" style="float: right; font-size: 30px; margin: -32px 20px;" target="_blank"></a></div>' +
'<div class="accordion-body collapse' +
expaned +
'" id="' +
id +
'"><div class="accordion-inner">' +
'<iframe frameborder="0" height="842" id="attachIframe" src="' +
item.url +
'" width="100%"></iframe>' +
"</div></div></div>" +
"</div>";
accordionA.append(card);
});

accordionA.on("change", 'input[type="checkbox"]', function() {
let checkbox = $(this);

let itemNo = checkbox.val();

let mailAttachName = $("#mailAttachName" + itemNo);
let mailAttachPath = $("#mailAttachPath" + itemNo);
if (checkbox.is(":checked")) {
mailAttachPath.prop("disabled", false);
mailAttachName.prop("disabled", false);
} else {
mailAttachPath.prop("disabled", true);
mailAttachName.prop("disabled", true);
}
});
}

เรื่องที่เกี่ยข้อง

Byphunsanit

joGet: ส่งอีเมล์ด้วย Email Tool

อีเมล์ Email Tool เป็น plugin ที่สามารถ add เข้าไปใน process เพื่อส่งอีเมล์ได้จากข้อมูลใน process

การ configurationg

  1. เริ่มจากการ SMTP server โดย joGet จะไม่มีติดมาให้ ตัวทีติดตั้งง่ายที่สุดน่าจะเป็น Mercury Mail Transport System ที่ติดมากับ XAMPP
  2. กรอกข้อมูลการติดต่อ SMTP SERVER โดยควรจะใช้ Environment Variable Hash Variable เพราะเวลาเปลี่ยน smtp server จะได้ไม่ต้องมาไล่แก้ที่ละกล่องเช่น
    SMTP Host
    #envVariable.smtpHost# แทน smtp server ที่จะ connection เข้าไปใช้
    SMTP Port
    #envVariable.smtpPort# โดยปกติจะใช้ 25, 79, 105, 106, 110, 143, 224 แล้วแต่จะเซ้ตไว้แบบไหน
    Security
    บางระบบไม่ต้องเซ็ต
    SMTP Username
    #envVariable.smtpUsername# แทน smtp username
    SMTP Password
    #envVariable.smtpPort# แทนรหัสผ่าน smtp

    ทดลองการติดต่อกับ smtp server โดยคลิก Send Test Email ถ้าเห็น alert “Test email is sent.” ถือว่าการส่งอีเมล์ได้แล้ว

  3. คลิก next>
  4. กรอกรายละเอียดของอีเมล์ที่จะส่ง โดยใช้ Workflow Variable Hash Variable ในการส่งค่ามาจากฟอร์มอื่นๆ เช่น หรือจะใส่ค่าลงไปตรงๆก็ได้
    From *
    #variable.mailFrom# แทนจะส่งโดยใช้อีเมล์อะไร บาง smtp server จะบังคับด้วยว่าอีเมล์ตัวไหนจึงจะส่งข้อมูลได้
    To (Specific email address)
    #variable.mailTo# แทนผู้รับ
    To (Participant ID)
    #variable.mailTo# แทนผู้รับแต่ละคน จะส่งได้พร้อมกันหลายคนโดยแบ่งด้วย ;
    CC
    #variable.mailCc# แทนผู้รับแบบสำเนา (Carbon copy) ส่งได้พร้อมกันหลายคนโดยแบ่งด้วย ;
    BCC
    #variable.mailBcc# แทนผู้รับแบบสำเนาลับ (Blind carbon copy) ส่งได้พร้อมกันหลายคนโดยแบ่งด้วย ;
    Subject
    #variable.mailSubject# แทนชื่อเรื่องอีเมล์
    Message
    #variable.mailMessage# แทนเนื้ออีเมล์
    HTML Content?
    ถ้าติ๊กไว้ จะส่งอีเมล์โดยบอกว่าเนื้อหาเป็น html ไม่ใช่ plain text
  5. คลิก next>
  6. ส่วนไฟล์แนบ (Attachments)
    • ส่งไฟล์จากฟอร์ม
      Form
      ฟอร์มที่จะใช้แนบไฟล์มา
      Form Upload Fields
      คือ id ของ input ที่จะส่งไฟล์มา มีได้หลาย input เช่น mailAttach1, mailAttach2, mailAttach3, mailAttach4
    • ส่งไฟล์จากไฟล์พาร์ทสามารถส่งได้หลายไฟล์เหมือนกัน
      Path
      #variable.mailAttachPath1, #variable.mailAttachPath2#, #variable.mailAttachPath3#, #variable.mailAttachPath4# แทน file path
      Type
      มี 2 แบบคือ

      System Path
      file path ที่เก็บไฟล์เอาไว้ เช่น C:\Joget-v5-Enterprise\apache-tomcat-8.0.20\webapps\jw\images\cover.jpg
      URL
      url ที่สามาร���ดูไฟล์ เช่น http://localhost:8080/jw/images/cover.jpg
      File Name
      #variable.mailAttachName1#, #variable.mailAttachName2#, #variable.mailAttachName3#, #variable.mailAttachName1# แทนชื่อไฟล์ที่จะแสดงตอนที่ส่งเมล์ไปให้ผู้รับ

เท่านี้ก็สามารถใช้ ่ joGet ส่งอีเมล์ได้แล้ว

เรื่องที่เกี่ยข้อง