2021/09/03

MANUAL

FAQ:メール送信APIを使用して添付ファイル付きのメールを送信したい

## 概要 「[メール送信API](/manual/api-mail)」を使用して「[添付ファイル項目](/manual/table-management-attachments)」(AttachmentsA)に登録されたファイルを添付してメールを送信するサンプルコードです。 ## 制限事項 1. Internet Explorerでは動作しません。 ## 前提条件 1. メールの送信設定が必要です。 1. 「Pleasanter.net」では「スタンダードプラン」のご契約が必要です。 1. 設定を行うには「サイトの管理権限」が必要です。 ## 対応バージョン 1. プリザンター 1.2.4.0 以降 1. .NET Framweork版 0.50.267 以降 ## 動作イメージ 送信処理は、拡張HTMLで設置した送信ボタンのクリック時に実行されます。To:、Cc:、Bcc:、件名、本文はそれぞれ該当する項目(同じ表示名の項目)の値がセットされます。 ![image](/binaries/83375964512b4927bbd7876a63d46e80) ## 操作手順 1. テーブルを作成してください 1. 「[スクリプト](/manual/table-management-script)」を新規作成し、以下のスクリプトの内容を記載してください。 出力先には「編集」をチェックして追加ボタンをクリックします。 1. 「[エディタ](/manual/table-editor)」から、以下のサンプルコードにあわせて、添付ファイルAを有効化してください。 1. 添付ファイルAの詳細設定で「[拡張HTML](/manual/table-management-extended-html)」タブを開き、以下のHTMLを記載し、更新ボタンを押してください。 1. [+新規作成]ボタンから新たにレコードを作成してください。 1. 添付ファイルIに任意のファイルを登録し、作成ボタンをクリックしてください。 1. 送信ボタンをクリックし、メールが送信されることを確認してください。 ##### HTML ``` <button id="SendOutgoingMail" type="button" class="clearfix add-btn ui-button ui-corner-all ui-widget"><span class="ui-button-icon ui-icon ui-icon-mail-closed"></span><span class="ui-button-icon"> </span>送信</button> ```` ##### JavaScript ``` $p.ex.sendMailWithAttachments = function () { const toString = 'To:'; const ccString = 'Cc:'; const bccString = 'Bcc:'; const titleString = '件名'; const bodyString = '本文'; const mailFormaterElementName = 'メールフォーマット'; const errorFormChanged = '送信前に更新ボタンを押してレコードの最新の内容を保存してください'; const errorGetMail = 'メールデータ取得に失敗しました'; const errorSendMail = 'メール送信処理に失敗しました'; const errorSelectedMailFormat = '選択したメールフォーマットデータの取得に失敗しました/n進捗状況が変更されませんので営サポまでお声がけください'; let postAttachmentsHash = []; if ($p.formChanged == 'undefined' || $p.formChanged) { alert(errorFormChanged); return; } if (window.confirm('以下の内容でメールを送信します')) { // 各項目のデータを取得 let to = $p.getControl(toString).val(); let cc = $p.getControl(ccString).val(); let bcc = $p.getControl(bccString).val(); let title = $p.getControl(titleString).val(); let body = $p.getControl(bodyString).val(); let attachments = []; let id = $p.id(); let apiSendMailUrl = $p.apiSendMailUrl(id); let isOkResponseData = function(data) { let isOk = true; if(data == null || data == undefined || data.Response == null || data.Response == undefined || data.Response.Data[0] == null || data.Response.Data[0] == undefined) { isOk = false; } return isOk; } let isEmpty = function(str) { let isEmpty = false; if(str == null || str == undefined || str.trim().length <= 0) { isEmpty = true; } return isEmpty; } $p.apiGet({ 'id': id, 'done': function (data) { if (!isOkResponseData(data)) { alert(errorGetMail); return; } // メールに添付する添付ファイルを格納する項目を定義 let attachmentsI = data.Response.Data[0].AttachmentsI; let attachmentList = JSON.parse(attachmentsI); let createAttachments = async function () { return new Promise((attachmentsResolve, attachmentsReject) => { if (attachmentList.length == 0) { attachmentsResolve(); } try { (async () => { for (let i = 0; i < attachmentList.length; i++) { await new Promise((getResolve, reject) => { postAttachmentsHash[i] = { 'Guid': attachmentList[i].Guid, 'Deleted': 1, }; let url = '/binaries/' + attachmentList[i].Guid + '/download'; let xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.setRequestHeader('Content-Type','application/json'); xhr.responseType = 'arraybuffer'; xhr.onload = function (oEvent) { if (xhr.readyState == 4 && xhr.status == 200) { let bytes = new Uint8Array(xhr.response); let binaryString = ''; for (let i = 0; i < bytes.byteLength; i++) { binaryString += String.fromCharCode(bytes[i]); } let base64 = window.btoa(binaryString); let obj = {}; obj.Name = attachmentList[i].Name; obj.Base64 = base64; obj.ContentType = xhr.getResponseHeader('content-type'); attachments[i] = obj; getResolve(); if (i == attachmentList.length - 1) { attachmentsResolve(); } } } xhr.send(); }); } })(); } catch (error) { attachmentsReject(error); } }) }; createAttachments().then(function (value) { let postData = { To: to, Cc: cc, Bcc: bcc, Title: isEmpty(title) ? ' ' : title, Body: isEmpty(body) ? ' ' : body, Attachments: attachments }; console.log(postData); $.ajax({ contentType: 'application/json', url: apiSendMailUrl, type: 'post', async: false, cache: false, data: JSON.stringify(postData), contentType: 'application/json', dataType: 'json' }) .done(function (json, textStatus, jqXHR) { }) .fail(function (jqXHR, textStatus, errorThrown) { alert(errorSendMail); }) .always(function () { }) }) }, 'fail': function (data) { alert(errorGetMail); }, 'always': function (data) { }, 'async': false }); } } // メール送信ボタンが押されたら処理を実行 $(document).on('click', "#SendOutgoingMail", function () { $p.ex.sendMailWithAttachments(); }) ``` ## 関連情報 <div id="ManualList"><ul><li><a href="/manual/table-editor">テーブル機能:レコードのエディタ画面</a><span>2021/05/05 up</span></li></ul></article> <ul><li><a href="/manual/table-management-attachments">テーブルの管理:項目:添付ファイル</a><span>2021/05/09 up</span></li></ul></article> <ul><li><a href="/manual/table-management-editor">テーブルの管理:エディタ</a><span>2021/05/09 up</span></li> <li><a href="/manual/table-management-editor-columns">テーブルの管理:エディタ:エディタの項目の設定</a><span>2021/05/22 up</span></li> <li><a href="/manual/table-management-extended-html">テーブルの管理:エディタ:項目の詳細設定:拡張HTML</a><span>2021/06/10 up</span></li></ul></article> <ul><li><a href="/manual/table-management-script">テーブルの管理:スクリプト</a><span>2021/05/02 up</span></li></ul></article> <ul><li><a href="/manual/api-mail">開発者向け機能:API:メール:メール送信</a><span>2021/08/30 up</span></li></ul></article></div><input id="SearchTextHidden" type="hidden" value="" />
このページをシェアする