หลังจากใช้ MySQL: return json format กันเป็นแล้วเรามาลองใช้กับ joget แทนที่จะต้องไปเขียน beanshell ให้ยุ่งยาก (พลาดง่ายๆ อีกตะหาก) ดูจริงๆ แล้วสามารถใช้กับหน้าเว็บทั้งหมดไม่ใช่แค่ joGet เพราะมันคือ javascript พื้นฐาน
เปิดฟอร์มที่ต้องการมา
- สร้าง section ขึ้นมา โดยกำหนด Load Binder เป็น JDBC Binder และ SQL SELECT Query ใส่ query ที่ต้องการ เช่น[code language=”sql” title=”Load Binder for optionsList”]SELECT
CONCAT(‘[‘,
GROUP_CONCAT(JSON_OBJECT(‘label’, name, ‘value’, appId)),
‘]’) AS optionsList
FROM
jwdb.app_app
ORDER BY name ASC[/code] - ลาก Hidden Field มาตั้ง id เป็น optionsList ใน section ที่สร้างไว้
- เขียน javascript ดึงค่ามาจาก string json ที่เก็บไว้ใน input ชื่อ optionsList โดยใช้ JSON.parse() เผื่อความปลอดภัย ควรใช้ JSON.parse() ใน try catch เพราะว่าถ้า json ที่ได้ผิดปกติจะสามารถควบคุมได้ ลาก Custom HTML มาแล้วใส่ code[code language=”html” title=”JSON.parse() example”]<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>[/code]
สามารถ copy form ตัวอย่างได้จาก json[code language=”javascript” title=”Form:JSON Parse”]{
"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": ""
}
}
]
}[/code]