Email-HTML String, Create ImageList<\/div>
Assembles HTML text for email that can list multiple images. Sets image URLs in the img tag and arranges them. It is used in cases where you want to share images published on a web server or when you want to strengthen the check system.<\/div><\/div>\n\n\n
<\/span>Configs<\/div>
\n
- \n
- <\/i><\/span> A1: Set Image URLs in each line (eg https:\/\/example.com\/a.png<\/a> ) *<\/span>#{EL}<\/sup><\/span><\/li>\n
- <\/i><\/span> A2: Set Display Width of Images (e.g. “300px”)#{EL}<\/sup><\/span><\/li>\n
- <\/i><\/span> B1: Set Note (Line breaks are automatically converted to br)#{EL}<\/sup><\/span><\/li>\n
- <\/i><\/span> C1: If to display footer link, Set ${var[applicationRoot]}#{EL}<\/sup><\/span><\/li>\n
- D: Select STRING DATA that stores Email-HTML (update) *<\/span><\/li>\n<\/ul>\n<\/div><\/div>\n\n\n
<\/span>Script (click to open)<\/div>\n\n\n\n\/\/ GraalJS Script (engine type: 2)\n\n\/\/\/\/\/\/\/\/ START "main()" \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\nmain();\nfunction main(){ \n\n\/\/\/\/ == Config Retrieving \/ \u5de5\u7a0b\u30b3\u30f3\u30d5\u30a3\u30b0\u306e\u53c2\u7167 ==\nconst strImageUrls = configs.get( "StrConfA1" ); \/\/\/ REQUIRED\n if( strImageUrls === "" ){\n throw new Error( "\\n AutomatedTask ConfigError:" +\n " Config {A1: ImageUrls} is empty \\n" );\n }\nlet strImageWidth = configs.get( "StrConfA2" ); \/\/ NotRequired\n if( strImageWidth === "" ){\n engine.log( " AutomatedTask ConfigWarning: " +\n " {A2: ImageWidth} is empty (default '300px' applied)" );\n strImageWidth = "300px";\n }\nlet strAbstract = configs.get( "StrConfB1" ); \/\/ NotRequired\n strAbstract = encodeHTML( strAbstract ).replace(\/\\n\/g, '<br>\\n');\n if( strAbstract === "" ){\n engine.log( " AutomatedTask ConfigWarning: " +\n " {B1: Abstract} is empty" );\n }\nlet strApplicationRoot = configs.get( "StrConfC1" ); \/\/ NotRequired\nconst strPocketHtml = configs.getObject( "SelectConfD" ); \/\/\/ REQUIRED\n\n\n\n\/\/\/\/ == Data Retrieving \/ \u30ef\u30fc\u30af\u30d5\u30ed\u30fc\u30c7\u30fc\u30bf\u306e\u53c2\u7167 ==\n\/\/ (Nothing. Retrieved via Expression Language in Config Retrieving)\n\n\n\/\/\/\/ == Calculating \/ \u6f14\u7b97 ==\n\n\n\n\n\/\/\/ Build HTML String\nlet strBlockHeader = `<!DOCTYPE HTML PUBLIC "-\/\/W3C\/\/DTD HTML 4.01 Transitional\/\/EN" "http:\/\/www.w3.org\/TR\/html4\/loose.dtd">\n<head> \n<meta http-equiv="Content-Type" content="text\/html; charset=UTF-8">\n<meta http-equiv="Content-Style-Type" content="text\/css">\n<meta name="viewport" content="width=device-width, initial-scale=1.0">\n<title>Image List<\/title>\n<\/head>\n<body bgcolor="#ffffff" style="background-color:#ffffff; margin:0 auto; padding:0; width:100%">\n`;\n\n\/\/ for Note\nlet strBlockAbstract = `<div style="margin:0 auto 30px 0px; padding:10px;\n display:inline-block; border:medium solid #009900; background-color:#ffffff">\n ${strAbstract}\n<\/div>\n`;\n\n\/\/ for ImageTags\nlet strBlockImages = "<div style=\\"margin:0; padding:5px; background-color:#eeeeee\\">"; \/\/ start\n\/\/ Regular Expression - Named Capturing group - ES2018\nlet strReUri = "^((?<protocol>[^:\/?#]+):)?"; \/\/ end with ":", eg. "https:", "http:",,\n strReUri += "(\/\/(?<host>[^\/?#]*))?"; \/\/ start with "\/\/", not include "\/" "?" "#"\n strReUri += "(?<pathname>[^?#]*)"; \/\/ not include "?" "#"\n strReUri += "(\\\\?(?<query>[^#]*))?"; \/\/ start with "?", not include "#"\n strReUri += "(#(?<anchor>.*))?"; \/\/ start with "#"\nconst regUri = new RegExp( strReUri );\nconst arrImageUrls = strImageUrls.split("\\n");\nfor( let i = 0; i < arrImageUrls.length; i++ ){\n if( regUri.test( arrImageUrls[i] ) ){\n strBlockImages += ' <a href="' + arrImageUrls[i] + '"><img src="' + arrImageUrls[i] + '"';\n strBlockImages += ' alt="image-' + i + '"';\n strBlockImages += ' style="vertical-align:top; margin:5px; max-width:' + strImageWidth + '"><\/a>\\n';\n }else{\n engine.log( " AutomatedTask ConfigWarning:" +\n " Not URL (skipped): " + arrImageUrls[i] );\n }\n}\nstrBlockImages += '<\/div>\\n'; \/\/ end\n\n\/\/ for FooterLink\nconst strProcessInstanceId = processInstance.getProcessInstanceId() + "";\nconst strProcessInstanceTitle = processInstance.getProcessInstanceTitle() + "";\nlet strBlockFooter = `<div style="margin:30px auto 0px 20px">\n <span style="color:#009900">p${strProcessInstanceId}<\/span><br>\n <span style="padding-left:20px; font-weight:bold">${strProcessInstanceTitle}<\/span>\n<\/div>\n<div style="margin:10px auto 10px 20px">\n<a href="${strApplicationRoot}PE\/Workitem\/list?processInstanceId=${strProcessInstanceId}"\n style="display:inline-block; font-weight:bold; border-radius:8px; padding:8px 16px;\n color:#ffffff; background:#009900; border:solid 4px #009900">Desktop View<\/a>\n<a href="${strApplicationRoot}SP\/PE\/ProcessInstance\/view?processInstanceId=${strProcessInstanceId}"\n style="display:inline-block; font-weight:bold; border-radius:8px; padding:8px 16px;\n color:#ffffff; background:#009900; border:solid 4px #009900">Mobile View<\/a> \n<\/div>\n`;\n\n\/\/\/ Assembles\nlet strHtml = strBlockHeader;\n if( strAbstract !== "" ){\n strHtml += strBlockAbstract;\n }\n strHtml += strBlockImages;\n if( strApplicationRoot !== "" ){\n strHtml += strBlockFooter;\n }\n strHtml += "<\/body><\/html>";\n\n\n\/\/\/\/ == Data Updating \/ \u30ef\u30fc\u30af\u30d5\u30ed\u30fc\u30c7\u30fc\u30bf\u3078\u306e\u4ee3\u5165 ==\nengine.setData( strPocketHtml, strHtml );\n\n} \/\/\/\/\/\/\/\/ END "main()" \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n\n\nfunction encodeHTML( str ){\n return str.replace(\/&\/g, '&')\n .replace(\/<\/g, '<')\n .replace(\/>\/g, '>')\n .replace(\/"\/g, '"')\n .replace(\/'\/g, ''');\n}\n\n\n\n\/*\nNotes:\n- When a token reaches the automated step, the code for HTML mail is automatically generated.\n - The generated code can be set in "Message Sending Intermediate Event (Email)" (v13.1) as it is.\n - https:\/\/support.questetra.com\/bpmn-icons\/throwing-message-intermediate-event-email\/\n - It is also effective to add a human step in downstream to add decorative tags such as strong and span.\n- Each URL is set to the `href` attribute of the `img` tag.\n - The URL must be a website accessible to email recipients.\n - Strings that do not start with `http(s)` will be skipped.\n - Before being set, the URL is validated by a regular expression.\nAPPENDIX\n- The generated HTML code is not guaranteed to be displayed properly in all mailers.\n- Set the display width according to the expected number of images and mailer.\n - For work that checks 10 or more images in Desktop, a width of 300px or less is recommended.\n - For work that checks 2 or 3 images in Desktop, a width of about 600px is recommended.\nNotes-ja:\n- \u6848\u4ef6\u304c\u81ea\u52d5\u51e6\u7406\u5de5\u7a0b\u306b\u5230\u9054\u3057\u305f\u969b\u3001HTML\u30e1\u30fc\u30eb\u7528\u306e\u30b3\u30fc\u30c9\u304c\u81ea\u52d5\u7684\u306b\u751f\u6210\u3055\u308c\u307e\u3059\u3002\n - \u751f\u6210\u3055\u308c\u305f\u30b3\u30fc\u30c9\u306f\u3001\u305d\u306e\u307e\u307e\u300e\u30e1\u30c3\u30bb\u30fc\u30b8\u9001\u4fe1\u4e2d\u9593\u30a4\u30d9\u30f3\u30c8\uff08\u30e1\u30fc\u30eb\uff09\u300f\uff08v13.1\uff09\u306b\u30bb\u30c3\u30c8\u3067\u304d\u307e\u3059\u3002\n - https:\/\/support.questetra.com\/ja\/bpmn-icons\/throwing-message-intermediate-event-email\/\n- \u3059\u3079\u3066\u306e URL \u304c\u305d\u308c\u305e\u308c\u3001`img` \u30bf\u30b0\u306e `href` \u5c5e\u6027\u306b\u30bb\u30c3\u30c8\u3055\u308c\u307e\u3059\u3002\n - URL \u306f\u30e1\u30fc\u30eb\u53d7\u4fe1\u8005\u304c\u30a2\u30af\u30bb\u30b9\u3067\u304d\u308bWeb\u30b5\u30a4\u30c8\u3067\u306a\u3051\u308c\u3070\u306a\u308a\u307e\u305b\u3093\u3002\n - `http(s)` \u3067\u59cb\u307e\u3089\u306a\u3044\u6587\u5b57\u5217\u306a\u3069\u306f\u3001\u30b9\u30ad\u30c3\u30d7\u3055\u308c\u307e\u3059\u3002\n - \u30bb\u30c3\u30c8\u3055\u308c\u308b\u524d\u306b\u3001URL \u306e\u59a5\u5f53\u6027\u306f\u6b63\u898f\u8868\u73fe\u306b\u3088\u3063\u3066\u691c\u8a3c\u3055\u308c\u307e\u3059\u3002\nAPPENDIX-ja\n- \u751f\u6210\u3055\u308c\u308bHTML \u30b3\u30fc\u30c9\u306f\u3001\u5168\u3066\u306e\u30e1\u30fc\u30e9\u3067\u6b63\u5e38\u306b\u8868\u793a\u3055\u308c\u308b\u3053\u3068\u304c\u4fdd\u8a3c\u3055\u308c\u3066\u3044\u308b\u8a33\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002\n- \u60f3\u5b9a\u3055\u308c\u308b\u753b\u50cf\u6570\u3084\u30e1\u30fc\u30e9\u306b\u5fdc\u3058\u3066\u3001\u8868\u793a\u5e45\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002\n - 10\u70b9\u4ee5\u4e0a\u306e\u753b\u50cf\u3092Desktop\u74b0\u5883\u3067\u30c1\u30a7\u30c3\u30af\u3059\u308b\u696d\u52d9\u3067\u3042\u308c\u3070\u3001300px \u4ee5\u4e0b\u306e\u5e45\u304c\u63a8\u5968\u3055\u308c\u307e\u3059\u3002\n - \uff12\uff5e\uff13\u70b9\u306e\u753b\u50cf\u3092Desktop\u74b0\u5883\u3067\u30c1\u30a7\u30c3\u30af\u3059\u308b\u696d\u52d9\u3067\u3042\u308c\u3070\u3001600px \u7a0b\u5ea6\u306e\u5e45\u3092\u6301\u305f\u305b\u3066\u3082\u826f\u3044\u3068\u8a00\u3048\u307e\u3059\u3002\n*\/\n\n\n<\/code><\/pre><\/div>\n\n\n<\/div><\/div>\n\n\n\n<\/a><\/figure>\n\n\n\n
<\/i> Download<\/h3>\n\n\n\n
- \n
- Email-Html-String-Create-ImageList-2021.xml<\/a><\/li>\n\n\n\n
- Email-Html-String-Create-ImageList-2023.xml<\/a>\n
- \n
- 2023-08-08 (C) Questetra, Inc. (MIT License)<\/li>\n\n\n\n
- for “GraalJS standard (engine-type 3)” on v15.0 or above<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
2021-06-21 (C) Questetra, Inc. (MIT License)
https:\/\/support.questetra.com\/addons\/email-html-string-create-simplenotice-2021\/<\/a>
<\/i> The Addon-import feature is available with Professional<\/strong><\/span> edition.<\/p>\n\n\n<\/div>\n\n\n\n<\/i> Notes<\/h3>\n\n\n\n
- \n
- When a token reaches the automated step, the code for HTML mail is automatically generated.\n
- \n
- The generated code can be set in “Message Sending Intermediate Event (Email)” (v13.1) as it is.<\/li>\n\n\n\n
- https:\/\/support.questetra.com\/bpmn-icons\/throwing-message-intermediate-event-email\/<\/a><\/li>\n\n\n\n
- It is also effective to add a human step in downstream to add decorative tags such as strong and span.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- Each URL is set to the
href<\/code> attribute of theimg<\/code> tag.\n- \n
- The URL must be a website accessible to email recipients.<\/li>\n\n\n\n
- Strings that do not start with
http(s)<\/code> will be skipped.<\/li>\n\n\n\n- Before being set, the URL is validated by a regular expression.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
<\/i> Capture<\/h3>\n\n\n\n
![\"Assembles](\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2021\/06\/Email-Html-String-Create-ImageList-2021-capture-en.png?resize=1200%2C675&ssl=1\")
<\/a><\/figure>\n\n\n\n![\"Assembles](\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2021\/06\/Email-Html-String-Create-ImageList-2021-config-en.png?resize=1201%2C1033&ssl=1\")
<\/a><\/figure>\n\n\n\n<\/i> Appendix<\/h3>\n\n\n\n
- \n
- The generated HTML code is not guaranteed to be displayed properly in all mailers.<\/li>\n\n\n\n
- Set the display width according to the expected number of images and mailer.\n
- \n
- For work that checks 10 or more images in Desktop, a width of 300px or less is recommended.<\/li>\n\n\n\n
- For work that checks 2 or 3 images in Desktop, a width of about 600px is recommended.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
<\/i> See also<\/h3>\n\n\n\n
- Before being set, the URL is validated by a regular expression.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
- When a token reaches the automated step, the code for HTML mail is automatically generated.\n
- Email-Html-String-Create-ImageList-2023.xml<\/a>\n
- <\/i><\/span> A2: Set Display Width of Images (e.g. “300px”)#{EL}<\/sup><\/span><\/li>\n
![\"\"\/](\"https:\/\/example.com\/a.png\")
<\/a><\/figure>\n\n\n\n