ตัวอย่างฟอร์มส่งอีเมลโดยใน 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 ได้
- 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) ;
}
}) ;
}
เรื่องที่เกี่ยข้อง