사용자가 Gmail을 읽을 때 카드 기반 인터페이스를 제공할 뿐 아니라 Gmail을 확장하는 Google Workspace 부가기능 사용자가 새 메일을 작성하거나 할 수 있습니다. 이렇게 하면 Google Workspace 부가기능에서 사용자의 이메일 작성 작업을 자동화할 수 있습니다.
부가기능 Compose UI에 액세스
부가기능의 Compose UI를 보는 방법에는 두 가지가 있습니다. 첫 번째 방법은 답장을 쓰지 않을 수 있습니다. 두 번째 초안을 작성하는 동안 부가기능을 시작할 수 있습니다.
어느 경우든 부가기능이 해당하는 부가기능에 정의된 Compose 트리거 함수 매니페스트에 해당합니다. Compose 트리거 함수가 Compose의 Compose UI 빌드 Gmail이 사용자에게 표시합니다.
Compose 부가기능 빌드
다음과 같은 일반적인 단계에 따라 부가기능에 편지쓰기 기능을 추가할 수 있습니다.
gmail.composeTrigger추가 부가기능 스크립트 프로젝트에 대한 필드 매니페스트 매니페스트를 업데이트하여 포함할 범위 구성 작업에 필요한 리소스입니다- 다음과 같은 경우 Compose UI를 빌드하는 Compose 트리거 함수를 구현합니다.
있습니다 Compose 트리거 함수는 단일 호출 또는
Card객체 또는 객체를 구성하는Card객체 Compose 작업을 위한 Compose UI입니다. - 사용자의 응답에 반응하는 데 필요한 관련 콜백 함수를 구현합니다.
Compose UI 상호작용을 포함합니다. 이러한 함수는 구성 작업 자체가 아닙니다.
(편지쓰기 UI만 표시됨) 이러한 포드는
서로 다른 요소들이 작동하면서 발생하는 작업을 제어하는
Compose UI가 선택됩니다. 예를 들어 버튼이 포함된 UI 카드
일반적으로 사용자가 클릭할 때 실행되는 연결된 콜백 함수가 있습니다.
해당 버튼을 클릭합니다. 초안 메시지를 업데이트하는 위젯의 콜백 함수
콘텐츠는
UpdateDraftActionResponse드림 객체를 지정합니다.
Compose 트리거 함수
부가기능의 Compose UI는 부가기능의 메시지와 동일한 방식으로 빌드됩니다. UI: Apps Script 카드 서비스를 사용하여 카드를 입력하고 위젯을 추가합니다.
이때
gmail.composeTrigger.selectActions[].runFunction 드림
매니페스트 파일에 정의되어 있습니다 구성 트리거 함수는 다음을 반환해야 합니다.
단일 Card 객체 또는
Card 객체의 배열
구성 UI를 구성하는 역할을 합니다. 이러한 함수는
컨텍스트 트리거 함수를 사용하여
같은 방식으로 카드를 빌드해야 합니다.
Compose 트리거 이벤트 객체
작성 작업을 선택하면 해당하는 작성 트리거가 실행됩니다. 함수에 전달하고 이 함수에 이벤트 객체를 전달합니다. 매개변수로 전달하세요. 이벤트 객체는 부가기능 컨텍스트에 관한 정보를 전달할 수 있습니다. 트리거 함수로 작성 중인 초안이 생성됩니다
이벤트 객체 구조를 참고하세요.
를 참조하세요. 정보
가
gmail.composeTrigger.draftAccess 드림
매니페스트 필드에 포함
gmail.composeTrigger.draftAccess매니페스트 필드가NONE이거나 포함되지 않은 경우 이벤트 객체에 만들 수 있습니다.gmail.composeTrigger.draftAccess인 경우METADATA로 설정되면 이벤트 객체가 작성 트리거 함수에 전달됩니다. 작성 중인 이메일의 수신자 목록으로 채워집니다.
활성 초안에 콘텐츠 삽입
일반적으로 Google Workspace 부가기능의 Compose UI는 메시지 작성에 도움이 되는 사용자 옵션과 제어 기능을 제공합니다. 이러한 사용 사례의 경우 사용자가 UI에서 선택하면 부가기능이 선택 항목을 해석합니다. 이에 따라 현재 작업 중인 이메일 초안을 업데이트합니다.
현재 임시보관된 이메일을 더 쉽게 업데이트할 수 있도록 카드 서비스가 제공됩니다. 다음 클래스로 확장되었습니다.
ContentType: 변경할 수 있는 HTML이나 변경할 수 없는 HTML (Gmail 사용자가 편집할 수 없음) 또는 일반 텍스트 콘텐츠를 포함할 수 있습니다.UpdateDraftActionResponse: 다음을 나타냅니다. 현재 초안 이메일을 업데이트하는 작업에 대한 응답을 제공합니다.UpdateDraftActionResponseBuilder: A 빌더UpdateDraftActionResponse객체입니다.UpdateDraftBodyAction: 다음을 나타냅니다. 현재 초안 이메일의 본문을 업데이트하는 작업입니다.UpdateDraftBodyType: 본문이 변경되는 방식을 정의하는 enum입니다.UpdateDraftSubjectAction: 다음을 나타냅니다. 현재 초안 이메일의 제목 필드를 업데이트하는 작업을 실행합니다.UpdateDraftToRecipientsAction: 다음을 나타냅니다. 현재 초안 이메일의 수신자를 업데이트하는 작업을 수행합니다.UpdateDraftCcRecipientsAction: 다음을 나타냅니다. 현재 초안 이메일의 참조 수신자를 업데이트하는 작업을 실행합니다.UpdateDraftBccRecipientsAction: 다음을 나타냅니다. 현재 초안 이메일의 숨은참조 수신자를 업데이트하는 작업을 수행합니다.
일반적으로 부가기능 Compose UI에는 또는 '삽입' 사용자에게 표시되는
클릭하여 UI에서 선택을 완료했음을 표시하고
선택사항이 작성 중인 이메일에 추가할 수 있습니다. 이 항목을 추가하려면
상호작용이 있는 경우: 위젯에는
연결된 Action 객체를
위젯이
있습니다. 이러한 콜백 함수를 구현해야 합니다. 각 콜백 함수는
빌드된
UpdateDraftActionResponse 드림
현재 초안 이메일에 적용할 변경사항을 자세히 설명합니다.
예 1
다음 코드 스니펫은 현재 이메일 초안의 제목과 받는사람, 참조, 숨은참조 수신자를 업데이트하는 편지쓰기 UI를 만드는 방법을 보여줍니다.
/**
* Compose trigger function that fires when the compose UI is
* requested. Builds and returns a compose UI for inserting images.
*
* @param {event} e The compose trigger event object. Not used in
* this example.
* @return {Card[]}
*/
function getComposeUI(e) {
return [buildComposeCard()];
}
/**
* Build a card to display interactive buttons to allow the user to
* update the subject, and To, Cc, Bcc recipients.
*
* @return {Card}
*/
function buildComposeCard() {
var card = CardService.newCardBuilder();
var cardSection = CardService.newCardSection().setHeader('Update email');
cardSection.addWidget(
CardService.newTextButton()
.setText('Update subject')
.setOnClickAction(CardService.newAction()
.setFunctionName('applyUpdateSubjectAction')));
cardSection.addWidget(
CardService.newTextButton()
.setText('Update To recipients')
.setOnClickAction(CardService.newAction()
.setFunctionName('updateToRecipients')));
cardSection.addWidget(
CardService.newTextButton()
.setText('Update Cc recipients')
.setOnClickAction(CardService.newAction()
.setFunctionName('updateCcRecipients')));
cardSection.addWidget(
CardService.newTextButton()
.setText('Update Bcc recipients')
.setOnClickAction(CardService.newAction()
.setFunctionName('updateBccRecipients')));
return card.addSection(cardSection).build();
}
/**
* Updates the subject field of the current email when the user clicks
* on "Update subject" in the compose UI.
*
* Note: This is not the compose action that builds a compose UI, but
* rather an action taken when the user interacts with the compose UI.
*
* @return {UpdateDraftActionResponse}
*/
function applyUpdateSubjectAction() {
// Get the new subject field of the email.
// This function is not shown in this example.
var subject = getSubject();
var response = CardService.newUpdateDraftActionResponseBuilder()
.setUpdateDraftSubjectAction(CardService.newUpdateDraftSubjectAction()
.addUpdateSubject(subject))
.build();
return response;
}
/**
* Updates the To recipients of the current email when the user clicks
* on "Update To recipients" in the compose UI.
*
* Note: This is not the compose action that builds a compose UI, but
* rather an action taken when the user interacts with the compose UI.
*
* @return {UpdateDraftActionResponse}
*/
function applyUpdateToRecipientsAction() {
// Get the new To recipients of the email.
// This function is not shown in this example.
var toRecipients = getToRecipients();
var response = CardService.newUpdateDraftActionResponseBuilder()
.setUpdateDraftToRecipientsAction(CardService.newUpdateDraftToRecipientsAction()
.addUpdateToRecipients(toRecipients))
.build();
return response;
}
/**
* Updates the Cc recipients of the current email when the user clicks
* on "Update Cc recipients" in the compose UI.
*
* Note: This is not the compose action that builds a compose UI, but
* rather an action taken when the user interacts with the compose UI.
*
* @return {UpdateDraftActionResponse}
*/
function applyUpdateCcRecipientsAction() {
// Get the new Cc recipients of the email.
// This function is not shown in this example.
var ccRecipients = getCcRecipients();
var response = CardService.newUpdateDraftActionResponseBuilder()
.setUpdateDraftCcRecipientsAction(CardService.newUpdateDraftCcRecipientsAction()
.addUpdateToRecipients(ccRecipients))
.build();
return response;
}
/**
* Updates the Bcc recipients of the current email when the user clicks
* on "Update Bcc recipients" in the compose UI.
*
* Note: This is not the compose action that builds a compose UI, but
* rather an action taken when the user interacts with the compose UI.
*
* @return {UpdateDraftActionResponse}
*/
function applyUpdateBccRecipientsAction() {
// Get the new Bcc recipients of the email.
// This function is not shown in this example.
var bccRecipients = getBccRecipients();
var response = CardService.newUpdateDraftActionResponseBuilder()
.setUpdateDraftBccRecipientsAction(CardService.newUpdateDraftBccRecipientsAction()
.addUpdateToRecipients(bccRecipients))
.build();
return response;
}
예 2
다음 코드 스니펫은 이미지를 삽입하는 Compose UI를 빌드하는 방법을 보여줍니다. 현재 초안 이메일에 붙여넣습니다.
/**
* Compose trigger function that fires when the compose UI is
* requested. Builds and returns a compose UI for inserting images.
*
* @param {event} e The compose trigger event object. Not used in
* this example.
* @return {Card[]}
*/
function getInsertImageComposeUI(e) {
return [buildImageComposeCard()];
}
/**
* Build a card to display images from a third-party source.
*
* @return {Card}
*/
function buildImageComposeCard() {
// Get a short list of image URLs to display in the UI.
// This function is not shown in this example.
var imageUrls = getImageUrls();
var card = CardService.newCardBuilder();
var cardSection = CardService.newCardSection().setHeader('My Images');
for (var i = 0; i < imageUrls.length; i++) {
var imageUrl = imageUrls[i];
cardSection.addWidget(
CardService.newImage()
.setImageUrl(imageUrl)
.setOnClickAction(CardService.newAction()
.setFunctionName('applyInsertImageAction')
.setParameters({'url' : imageUrl})));
}
return card.addSection(cardSection).build();
}
/**
* Adds an image to the current draft email when the image is clicked
* in the compose UI. The image is inserted at the current cursor
* location. If any content of the email draft is currently selected,
* it is deleted and replaced with the image.
*
* Note: This is not the compose action that builds a compose UI, but
* rather an action taken when the user interacts with the compose UI.
*
* @param {event} e The incoming event object.
* @return {UpdateDraftActionResponse}
*/
function applyInsertImageAction(e) {
var imageUrl = e.parameters.url;
var imageHtmlContent = '<img style=\"display: block\" src=\"'
+ imageUrl + '\"/>';
var response = CardService.newUpdateDraftActionResponseBuilder()
.setUpdateDraftBodyAction(CardService.newUpdateDraftBodyAction()
.addUpdateContent(
imageHtmlContent,
CardService.ContentType.MUTABLE_HTML)
.setUpdateType(
CardService.UpdateDraftBodyType.IN_PLACE_INSERT))
.build();
return response;
}