위젯은 다음 중 하나 이상을 제공하는 UI 요소입니다.
- 다른 위젯의 구조(예: 카드 및 섹션,
- 사용자에 대한 정보(예: 텍스트, 이미지, 또는
- 작업 어포던스(예: 버튼, 텍스트 입력란, 체크박스)
카드 섹션에 추가된 위젯 집합은 전반적인 설정할 수 있습니다. 위젯 모양과 기능이 웹과 모바일 장치에서 동일합니다. 이 참조 문서 은 위젯 세트를 빌드하는 여러 방법을 설명합니다.
위젯 유형
부가기능 위젯은 일반적으로 3가지 그룹: 구조적 위젯 정보 위젯, 사용자 상호작용 위젯 등이 있습니다.
구조적 위젯
구조적 위젯은 다른 위젯을 위한 컨테이너와 구성을 제공함 사용됩니다.
- 버튼 세트: A 하나 이상의 텍스트 또는 이미지 버튼 모음으로, 그룹화된 가로 행입니다.
- 카드: 단일 컨텍스트 하나 이상의 카드 섹션이 포함된 카드입니다. 사용자가 어떻게 이동할 수 있는지 정의 다른 카드 간에도 카드 탐색.
- 카드 헤더: 헤더를 찾습니다. 카드 헤더에는 제목, 부제목 및 이미지 카드 작업 및 보편적 액션은 카드 헤더의 확장 또는 축소가 가능합니다.
- 카드 섹션: A 수집된 위젯 그룹으로 나누어 다른 카드 섹션에서 가로줄과 섹션 머리글(선택사항)을 포함할 수 있습니다. 각 카드에는 하나 이상의 카드 섹션이 있어야 합니다. 카드에는 카드나 카드 헤더를 추가할 수 없습니다. 섹션으로 이동합니다.
이러한 기본적인 구조적 위젯 외에도 사용할 수 있는 Google Workspace 부가기능 Card Service를 사용하여 현재 카드와 겹치는 구조를 만듭니다. 고정 바닥글 및 미리보기 카드:
고정 바닥글
카드 하단에 고정된 행의 버튼을 추가할 수 있습니다. 이 행 카드 콘텐츠와 함께 이동하거나 스크롤하지 않습니다.
다음 코드 발췌 부분은 고정 바닥글의 예를 정의하여 카드에 추가하는 방법을 보여줍니다.
var fixedFooter = CardService.newFixedFooter()
.setPrimaryButton(
CardService.newTextButton()
.setText("Primary")
.setOpenLink(CardService.newOpenLink()
.setUrl("https://www.google.com")))
.setSecondaryButton(
CardService.newTextButton()
.setText("Secondary")
.setOnClickAction(
CardService.newAction()
.setFunctionName(
"secondaryCallback")));
var card = CardService.newCardBuilder()
// (...)
.setFixedFooter(fixedFooter)
.build();
카드 미리보기
새로운 문맥 콘텐츠를 를 여는 등의 사용자 동작에 의해 트리거됩니다. 새 문맥 콘텐츠를 즉시 표시할 수도 있고 (기본 동작) 또는 하단에 카드 미리보기 알림을 표시합니다. 있습니다. 사용자가 뒤로 를 클릭하는 경우 홈페이지로 돌아가 문맥 트리거가 활성화되면 사용자가 해당 광고를 찾는 데 도움이 되는 엿보기 카드가 표시됩니다. 다시 한 번 생각해 보세요
새로운 문맥 콘텐츠를 사용할 수 있을 때 미리보기 카드를 표시하는 대신
새 문맥 콘텐츠를 즉시 표시하고,
.setDisplayStyle(CardService.DisplayStyle.PEEK)(으)로
CardBuilder
클래스에 대해 자세히 알아보세요. 미리보기 카드는 단일 카드 객체가
문맥 트리거 환불되지 않은 경우에는 반환된 카드로 즉시
현재 카드
미리보기 카드의 헤더를 맞춤설정하려면 다음을 사용하여 .setPeekCardHeader() 메서드를 추가합니다.
표준 CardHeader
객체를 지정합니다. 기본적으로 미리보기 카드 헤더에는
에는 부가기능의 이름만 포함됩니다.
다음 코드는 Cats Google Workspace 부가기능 빠른 시작 미리보기 카드로 사용자에게 새로운 문맥 콘텐츠에 관해 알리고 맞춤설정 미리보기 카드의 헤더를 클릭하여 선택한 Gmail 메일을 표시합니다. 스레드의 대상입니다.
var peekHeader = CardService.newCardHeader()
.setTitle('Contextual Cat')
.setImageUrl('https://www.gstatic.com/images/
icons/material/system/1x/pets_black_48dp.png')
.setSubtitle(text);
. . .
var card = CardService.newCardBuilder()
.setDisplayStyle(CardService.DisplayStyle.PEEK)
.setPeekCardHeader(peekHeader);
정보 위젯
정보 위젯은 사용자에게 정보를 표시합니다.
- 이미지: 이미지 귀하가 제공하는 호스팅되고 공개적으로 액세스 가능한 URL로 표시됩니다.
- DecoratedText: A 문자 메시지 상단 및 하단과 같은 다른 요소와 페어링할 수 있는 콘텐츠 문자열입니다. 텍스트 라벨, 이미지 또는 아이콘을 가져올 수 있습니다 DecoratedText 위젯은 Button 또는 위젯 전환 추가된 스위치 전환 버튼이나 체크박스일 수 있습니다. 콘텐츠 텍스트 사용할 수 있는 HTML 서식 위쪽 및 하단 라벨은 일반 텍스트를 사용해야 합니다.
- 텍스트 단락: A 텍스트 단락에는 HTML 형식 요소.
사용자 상호작용 위젯
사용자 상호작용 위젯을 사용하면 있습니다. 다음에 대한 작업 응답으로 이러한 위젯을 구성할 수 있습니다. 다른 카드 표시, URL 열기, 알림 표시, 이메일 초안 작성, 기타 Apps Script 기능을 실행할 수 있습니다. 자세한 내용은 양방향 카드 빌드 가이드: 확인하세요.
- 카드 작업: 메뉴 부가기능 헤더 막대 메뉴에 있는 항목을 찾습니다. 헤더 막대 메뉴에서는 범용 작업으로 정의된 항목 포함 부가기능이 정의하는 모든 카드에 표시됩니다.
- 날짜/시간 선택 도구: 위젯 사용자가 날짜나 시간 또는 둘 다를 선택할 수 있습니다. 자세한 내용은 날짜 및 시간 선택 도구 참조하세요.
- 이미지 버튼: A 텍스트 대신 이미지를 사용하는 버튼을 사용합니다. 여러 개 중 하나를 사용하여 사전 정의된 아이콘이나 URL로 표시되는 공개 호스팅 이미지를 사용할 수 있습니다.
- 선택 입력: 옵션 모음을 나타내는 입력 필드입니다. 선택 입력 위젯 체크박스, 라디오 버튼 또는 드롭다운 선택 상자로 표시할 수 있습니다.
- 스위치: 전환 버튼 위젯에 추가합니다. 스위치는 DecoratedText 위젯에서 사용할 수 있습니다. 기본적으로 전환 스위치로 표시되지만 체크박스를 대신 사용하세요.
- 텍스트 버튼: A 텍스트 라벨이 있는 버튼을 클릭합니다. 텍스트의 배경색 채우기를 지정할 수 있습니다. 기본 설정은 투명입니다. 또한 할 수 있습니다
- 텍스트 입력: 텍스트 입력합니다. 위젯에는 제목 텍스트, 힌트 텍스트, 여러 줄 텍스트가 포함될 수 있습니다. 위젯은 텍스트 값이 변경될 때 작업을 트리거할 수 있습니다.
- 그리드: 다중 열 항목 컬렉션을 나타내는 레이아웃입니다. 이미지, 제목, 부제목, 다양한 맞춤설정 옵션(예: 테두리) 자르기 스타일을 설정할 수 있습니다.
체크박스 DecoratedText개
DecoratedText를 정의할 수 있습니다.
버튼이나 바이너리 전환 버튼 대신 체크박스가 연결된 위젯
전환 스위치와 마찬가지로 체크박스의 값은
액션 이벤트 객체
Action
이 DecoratedText에 첨부됨
작성자:
setOnClickAction(action)를 탭합니다.
메서드를 사용하여 축소하도록 요청합니다.
다음 코드 발췌 부분은 DecoratedText 체크박스 정의 방법을 보여줍니다.
위젯을 추가하여 카드에 추가할 수 있습니다.
var decoratedText = CardService.newDecoratedText()
// (...)
.setSwitch(CardService.newSwitch()
.setFieldName('form_input_switch_key')
.setValue('switch_is_on')
.setControlType(
CardService.SwitchControlType.CHECK_BOX));
날짜 및 시간 선택도구
사용자가 시간, 날짜 또는 둘 다를 선택할 수 있는 위젯을 정의할 수 있습니다.
setOnChangeAction()를 사용하여 위젯 핸들러 함수를
선택기의 값이 변경될 때 실행됩니다.
다음 코드 발췌 부분은 날짜 전용 선택 도구(시간 전용 선택 도구)를 정의하는 방법을 선택한 다음 카드에 추가할 수 있는 날짜/시간 선택 도구가 있습니다.
var dateOnlyPicker = CardService.newDatePicker()
.setTitle("Enter a date")
.setFieldName("date_field")
// Set default value as May 24 2019. Either a
// number or string is acceptable.
.setValueInMsSinceEpoch(1558668600000)
.setOnChangeAction(CardService.newAction()
.setFunctionName("handleDateChange"));
var timeOnlyPicker = CardService.newTimePicker()
.setTitle("Enter a time")
.setFieldName("time_field")
// Set default value as 23:30.
.setHours(23)
.setMinutes(30)
.setOnChangeAction(CardService.newAction()
.setFunctionName("handleTimeChange"));
var dateTimePicker = CardService.newDateTimePicker()
.setTitle("Enter a date and time")
.setFieldName("date_time_field")
// Set default value as May 24 2019 03:30 AM UTC.
// Either a number or string is acceptable.
.setValueInMsSinceEpoch(1558668600000)
// EDT time is 4 hours behind UTC.
.setTimeZoneOffsetInMins(-4 * 60)
.setOnChangeAction(CardService.newAction()
.setFunctionName("handleDateTimeChange"));
다음은 날짜/시간 선택 도구 위젯 핸들러 함수의 예입니다. 이 핸들러에 의해 선택된 날짜-시간을 나타내는 문자열을 ID가 'myDateTimePickerWidgetID'인 날짜-시간 선택 도구 위젯의 사용자
function handleDateTimeChange(event) {
var dateTimeInput =
event.commonEventObject.formInputs["myDateTimePickerWidgetID"];
var msSinceEpoch = dateTimeInput.msSinceEpoch;
var hasDate = dateTimeInput.hasDate;
var hasTime = dateTimeInput.hadTime;
// The following requires you to configure the add-on to read user locale
// and timezone.
// See https://developers.google.com/workspace/add-ons/how-tos/access-user-locale
var userTimezoneId = event.userTimezone.id;
// Format and log the date-time selected using the user's timezone.
var formattedDateTime;
if (hasDate && hasTime) {
formattedDateTime = Utilities.formatDate(
new Date(msSinceEpoch), userTimezoneId, "yyy/MM/dd hh:mm:ss");
} else if (hasDate) {
formattedDateTime = Utilities.formatDate(
new Date(msSinceEpoch), userTimezoneId, "yyy/MM/dd")
+ ", Time unspecified";
} else if (hasTime) {
formattedDateTime = "Date unspecified, "
+ Utilities.formatDate(
new Date(msSinceEpoch), userTimezoneId, "hh:mm a");
}
if (formattedDateTime) {
console.log(formattedDateTime);
}
}
다음 표는 데스크톱 및 모바일의 선택 도구 선택 UI 예를 보여줍니다. 기기에서 사용할 수 있습니다. 이 옵션을 선택하면 날짜 선택 도구가 월 기준 캘린더 UI를 열어 사용자가 새 날짜를 빠르게 선택할 수 있습니다.
사용자가 데스크톱 기기에서 시간 선택 도구를 선택하면 드롭다운 메뉴가 열립니다. 사용자가 선택할 수 있는 30분 단위로 구분된 시간 목록이 있습니다. 사용자가 특정 시간을 입력할 수도 있습니다. 휴대기기에서 시간 선택 도구가 내장된 모바일 '시계'를 엽니다. 시간 선택기를 탭합니다.
| 데스크톱 | 모바일 |
|---|---|
|
|
|
|
그리드
그리드 위젯을 사용하여 항목을 다중 열 레이아웃으로 표시합니다. 각 항목은 이미지, 제목 및 부제목을 표시할 수 있습니다 추가 구성 옵션을 사용하여 다음을 수행할 수 있습니다. 그리드 항목의 이미지를 기준으로 텍스트의 위치를 설정합니다.
매개변수로 반환되는 식별자를 사용하여 그리드 항목을 구성할 수 있습니다. 그리드에 정의된 작업으로 전달됩니다.
var gridItem = CardService.newGridItem()
.setIdentifier("item_001")
.setTitle("Lucian R.")
.setSubtitle("Chief Information Officer")
.setImage(imageComponent);
var cropStyle = CardService.newImageCropStyle()
.setImageCropType(CardService.ImageCropType.RECTANGLE_4_3);
var imageComponent = CardService.newImageComponent()
.setImageUrl("https://developers.google.com/workspace/
images/cymbal/people/person1.jpeg")
.setCropStyle(cropStyle)
var grid = CardService.newGrid()
.setTitle("Recently viewed")
.addItem(gridItem)
.setNumColumns(2)
.setOnClickAction(CardService.newAction()
.setFunctionName("handleGridItemClick"));
텍스트 서식 지정
일부 텍스트 기반 위젯은 간단한 텍스트 HTML 서식을 지원할 수 있습니다. 설정 시 텍스트 콘텐츠를 추가하려면 해당 HTML 태그만 포함하면 됩니다.
지원되는 태그와 그 목적은 다음과 같습니다. 표:
| 형식 | 예 | 렌더링된 결과 |
|---|---|---|
| 굵게 | "This is <b>bold</b>." |
이 부분은 굵게 표시되어 있습니다. |
| 기울임꼴 | "This is <i>italics</i>." |
기울임꼴입니다. |
| 밑줄 | "This is <u>underline</u>." |
밑줄입니다. |
| 취소선 | "This is <s>strikethrough</s>." |
이는 |
| 글꼴 색상 | "This is <font color=\"#FF0000\">red font</font>." |
빨간색 글꼴입니다. |
| 하이퍼링크 | "This is a <a href=\"https://www.google.com\">hyperlink</a>." |
하이퍼링크입니다. |
| 시간 | "This is a time format: <time>2023-02-16 15:00</time>." |
시간 형식은 입니다. |
| 줄바꿈 | "This is the first line. <br> This is a new line." |
이것이 첫 번째 줄입니다. 새로운 줄이므로 |