หน้านี้ได้รับการแปลโดย Cloud Translation API

วิดเจ็ต

วิดเจ็ตเป็นองค์ประกอบ UI ที่เรียบง่ายซึ่งมีองค์ประกอบอย่างน้อย 1 อย่างดังต่อไปนี้

โครงสร้างสําหรับวิดเจ็ตอื่นๆ เช่น การ์ดและส่วนต่างๆ
ข้อมูลต่อผู้ใช้ เช่น ข้อความและรูปภาพ หรือ
ความสามารถของการดําเนินการ เช่น ปุ่ม ช่องป้อนข้อความ หรือช่องทําเครื่องหมาย

ชุดวิดเจ็ตที่เพิ่มไปยังส่วนการ์ดจะกําหนด UI ส่วนเสริมโดยรวม วิดเจ็ตมีหน้าตาและฟังก์ชันเดียวกันทั้งบนเว็บและอุปกรณ์เคลื่อนที่ เอกสารอ้างอิงจะอธิบายวิธีการต่างๆ ในการสร้างชุดวิดเจ็ต

ใช้ชุดออกแบบส่วนเสริมของ Google Workspace

ผู้ออกแบบสามารถใช้ชุดการออกแบบ UI ของส่วนเสริม Google Workspace ที่มีใน Figma เพื่อช่วยประหยัดเวลาในการออกแบบวิดเจ็ตของส่วนเสริม คุณสามารถสร้างบัญชี Figma หรือขอใบอนุญาตจากผู้ดูแลระบบขององค์กรได้

เรียกดูคอมโพเนนต์และใช้เทมเพลตที่มีในตัวเพื่อสร้างและแสดงภาพวิดเจ็ต

รับชุดการออกแบบ

ประเภทวิดเจ็ต

โดยทั่วไปแล้ว วิดเจ็ตส่วนเสริมจะแบ่งออกเป็น 3 กลุ่ม ได้แก่ วิดเจ็ตโครงสร้าง วิดเจ็ตข้อมูล และวิดเจ็ตการโต้ตอบของผู้ใช้

วิดเจ็ตที่มีโครงสร้าง

วิดเจ็ตที่มีโครงสร้างมีคอนเทนเนอร์และองค์กรสําหรับวิดเจ็ตอื่นๆ ที่ใช้ใน AI

วิดเจ็ตที่มีโครงสร้าง

ชุดปุ่ม - คอลเล็กชันปุ่มข้อความหรือรูปภาพอย่างน้อย 1 ปุ่มที่จัดกลุ่มไว้ด้วยกันในแถวแนวนอน
การ์ด - การ์ดบริบท 1 ใบที่มีส่วนการ์ดอย่างน้อย 1 ส่วน คุณกําหนดวิธีย้ายผู้ใช้ระหว่างการ์ดได้ด้วยการกําหนดค่าการนําทางในการ์ด
Header Card - ส่วนหัวของการ์ดที่ระบุ ส่วนหัวของการ์ดอาจมีชื่อ คําบรรยาย และรูปภาพ การดําเนินการในการ์ดและการดําเนินการส่วนกลางจะปรากฏในส่วนหัวของการ์ดหากส่วนเสริมใช้
ส่วนการ์ด - กลุ่มวิดเจ็ตที่รวบรวมไว้ หารด้วยส่วนการ์ดอื่นๆ ตามกฎแนวนอนและไม่บังคับให้มีส่วนหัวของส่วน การ์ดแต่ละใบต้องมีส่วนการ์ดอย่างน้อย 1 ส่วน คุณไม่สามารถเพิ่มการ์ดหรือส่วนหัวของการ์ดลงในส่วนการ์ด

คําเตือน: การเพิ่มวิดเจ็ตลงในคอนเทนเนอร์จะเป็นการสร้างและเพิ่มสําเนาของวิดเจ็ตนั้น หากคุณเปลี่ยนวิดเจ็ตหลังจากเพิ่มวิดเจ็ต การเปลี่ยนแปลงจะไม่ปรากฏในอินเทอร์เฟซ ด้วยเหตุนี้ โปรดตรวจสอบว่าวิดเจ็ตต้องสมบูรณ์ก่อนเพิ่มวิดเจ็ต หากต้องการเปลี่ยนวิดเจ็ตหลังจากเพิ่มวิดเจ็ต คุณต้องสร้างส่วนการ์ดหรือการ์ดอีกครั้ง ดูรายละเอียดเพิ่มเติมได้ที่การสร้างการ์ด

นอกเหนือจากวิดเจ็ตที่มีโครงสร้างพื้นฐานเหล่านี้แล้ว คุณยังใช้ส่วนเสริมของบริการการ์ดใน Google Workspace เพื่อสร้างโครงสร้างที่ซ้อนทับกับการ์ดปัจจุบันได้ด้วย ซึ่งได้แก่ ส่วนท้ายแบบคงที่และการ์ดตัวอย่าง

ส่วนท้ายแบบคงที่

ตอนนี้คุณเพิ่มปุ่มแถวคงที่ที่ด้านล่างของการ์ดได้แล้ว แถวนี้ไม่เลื่อนหรือเลื่อนด้วยเนื้อหาส่วนที่เหลือ ข้อความที่ตัดตอนมาจากโค้ดต่อไปนี้จะแสดงวิธีกําหนดส่วนท้ายที่แก้ไขแล้วและเพิ่มลงในการ์ด

var fixedFooter = CardService.newFixedFooter()
    .setPrimaryButton(
        CardService.newTextButton()
            .setText("help")
            .setOpenLink(CardService.newOpenLink()
                .setUrl("https://www.google.com")))
    .setSecondaryButton(
        CardService.newTextButton()
            .setText("submit")
            .setOnClickAction(
                CardService.newAction()
                    .setFunctionName(
                        "submitCallback")));

var card = CardService.newCardBuilder()
    // (...)
    .setFixedFooter(fixedFooter)
    .build();

ดูตัวอย่างการ์ด

ตัวอย่างการ์ดตัวอย่าง

เมื่อมีการทริกเกอร์เนื้อหาตามบริบทใหม่จากการดําเนินการของผู้ใช้ เช่น การเปิดข้อความ Gmail คุณสามารถแสดงเนื้อหาตามบริบทใหม่ได้ทันที (ลักษณะการทํางานเริ่มต้น) หรือแสดงการแจ้งเตือนการ์ดตัวอย่างที่ด้านล่างของแถบด้านข้าง หากผู้ใช้คลิกกลับ เพื่อกลับไปที่หน้าแรก ขณะที่ทริกเกอร์บริบททํางานอยู่ การ์ดเนื้อหาตัวอย่างจะปรากฏขึ้นเพื่อช่วยให้ผู้ใช้พบเนื้อหาตามบริบทอีกครั้ง

หากต้องการแสดงการ์ดตัวอย่างเมื่อมีเนื้อหาตามบริบทใหม่ขึ้นมา แทนที่จะแสดงเนื้อหาตามบริบทใหม่ทันที ให้เพิ่ม .setDisplayStyle(CardService.DisplayStyle.PEEK) ลงในชั้นเรียน CardBuilder ของคุณ การ์ดตัวอย่างจะแสดงก็ต่อเมื่อออบเจ็กต์ของการ์ดเดียวแสดงผลด้วยทริกเกอร์ตามบริบท ไม่เช่นนั้นการ์ดที่แสดงผลจะแทนที่การ์ดปัจจุบันทันที

หากต้องการปรับแต่งส่วนหัวของการ์ดตัวอย่าง ให้เพิ่มเมธอด .setPeekCardHeader() ด้วยออบเจ็กต์ CardHeader มาตรฐานเมื่อสร้างการ์ดบริบท โดยค่าเริ่มต้น ส่วนหัวของการ์ดตัวอย่างจะมีเฉพาะชื่อส่วนเสริมเท่านั้น

โค้ดต่อไปนี้จะอิงตามคู่มือเริ่มต้นฉบับย่อสําหรับส่วนเสริม Google Workspace สําหรับ Google Workspace เพื่อแจ้งให้ผู้ใช้ทราบเกี่ยวกับเนื้อหาตามบริบทใหม่ด้วยการ์ด Peek และปรับแต่งส่วนหัวของการ์ด Peek เพื่อแสดงหัวเรื่องของชุดข้อความ 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 ที่โฮสต์ไว้และโฮสต์ต่อสาธารณะ
ที่ตกแต่งอย่างสวยงาม - สตริงเนื้อหาข้อความที่คุณสามารถจับคู่กับองค์ประกอบอื่นๆ เช่น ป้ายกํากับข้อความด้านบนและด้านล่าง รวมถึงรูปภาพหรือไอคอน วิดเจ็ต "การตกแต่งข้อความ" อาจมีวิดเจ็ตปุ่มหรือการเปลี่ยนรวมอยู่ด้วย สวิตช์ที่เพิ่มเข้ามาอาจเป็นปุ่มสลับหรือช่องทําเครื่องหมายที่เรียบง่าย ข้อความเนื้อหาของวิดเจ็ต "ตกแต่งข้อความ" สามารถใช้การจัดรูปแบบ HTML ได้ ป้ายกํากับด้านบนและด้านล่างจะต้องใช้ข้อความธรรมดา
Text paragraph - ย่อหน้าข้อความที่เรียบง่าย ซึ่งอาจรวมถึงองค์ประกอบที่จัดรูปแบบ HTML

วิดเจ็ตการโต้ตอบของผู้ใช้

วิดเจ็ตการทํางานของการ์ด

วิดเจ็ตการโต้ตอบของผู้ใช้ช่วยให้ส่วนเสริมตอบสนองต่อการดําเนินการของผู้ใช้ คุณสามารถกําหนดค่าวิดเจ็ตเหล่านี้ด้วยการตอบกลับการดําเนินการเพื่อแสดงการ์ดอื่น เปิด URL แสดงการแจ้งเตือน เขียนอีเมลฉบับร่าง หรือเรียกใช้ฟังก์ชัน Apps Script อื่นๆ ดูรายละเอียดในคู่มือการสร้างการ์ดแบบอินเทอร์แอกทีฟ

วิดเจ็ตการโต้ตอบของผู้ใช้

การดําเนินการของการ์ด - รายการเมนู จะอยู่ในเมนูส่วนหัวของส่วนหัวส่วนเสริม นอกจากนี้ เมนูที่แถบส่วนหัวยังมีรายการที่กําหนดให้เป็นการดําเนินการส่วนกลางซึ่งจะปรากฏในการ์ดทั้งหมดที่ส่วนเสริมกําหนดได้ด้วย
เครื่องมือเลือกวันที่และเวลา - วิดเจ็ตที่อนุญาตให้ผู้ใช้เลือกวันที่ เวลา หรือทั้งคู่ ดูข้อมูลเพิ่มเติมได้ที่เครื่องมือเลือกวันที่และเวลาด้านล่าง
ปุ่มรูปภาพ - ปุ่มที่ใช้รูปภาพแทนข้อความ คุณสามารถใช้ไอคอนที่กําหนดไว้ล่วงหน้า หรืออิมเมจสาธารณะหลายรายการที่แสดงโดย URL
Selection Input - อินพุตการเลือก - ช่องอินพุตที่แสดงถึงคอลเล็กชันตัวเลือก วิดเจ็ตอินพุตคือช่องทําเครื่องหมาย ปุ่มตัวเลือก หรือช่องรายการแบบเลื่อนลง
Switch - วิดเจ็ตสลับ ใช้สวิตช์ร่วมกับวิดเจ็ต ที่ตกแต่งอย่างตกแต่งได้เท่านั้น โดยค่าเริ่มต้น ฟีเจอร์เหล่านี้จะแสดงด้วยสวิตช์สลับ แต่คุณอาจทําให้เป็นช่องทําเครื่องหมายแทนได้
ปุ่มข้อความ - ปุ่มที่มีป้ายกํากับข้อความ คุณระบุการเติมสีพื้นหลังสําหรับปุ่มข้อความได้ (ค่าเริ่มต้นจะเป็นแบบโปร่งใส) และยังปิดใช้ปุ่มได้ตามต้องการอีกด้วย
การป้อนข้อความ - ช่องป้อนข้อความ วิดเจ็ตอาจมีข้อความชื่อ คําใบ้ และข้อความหลายบรรทัดได้ วิดเจ็ตจะทริกเกอร์การดําเนินการเมื่อค่าข้อความมีการเปลี่ยนแปลง
ตารางกริด - เลย์เอาต์แบบหลายคอลัมน์ที่แสดงถึงคอลเล็กชันรายการ คุณสามารถนําเสนอรายการด้วยรูปภาพ ชื่อ ชื่อรอง และตัวเลือกการปรับแต่งที่หลากหลาย เช่น รูปแบบเส้นขอบและครอบตัด

ช่องทําเครื่องหมายตกแต่งรูปภาพ

คุณกําหนดวิดเจ็ต DecoratedText ที่แนบช่องทําเครื่องหมายแทนสวิตช์หรือปุ่มเปิด/ปิดแบบไบนารีได้ เช่นเดียวกับสวิตช์ ค่าของช่องทําเครื่องหมายจะรวมอยู่ในออบเจ็กต์เหตุการณ์การดําเนินการที่ส่งไปยัง Action ที่แนบมากับ DecoratedText นี้โดยเมธอด

ข้อความที่ตัดตอนมาจากโค้ดต่อไปนี้จะแสดงวิธีกําหนดวิดเจ็ตช่องทําเครื่องหมาย 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 the 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 the 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 the date and time in EDT 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"));

ต่อไปนี้เป็นตัวอย่างของฟังก์ชันตัวแฮนเดิลวิดเจ็ตตัวเลือกวันที่และเวลา ตัวแฮนเดิลนี้จะจัดรูปแบบและบันทึกสตริงที่แสดงเวลาที่ผู้ใช้เลือกในวิดเจ็ตเครื่องมือเลือกวันที่แบบระบุเวลาด้วยรหัส "myDateTime PickerWidgetID" ดังนี้

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/apps-script/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 นาทีซึ่งผู้ใช้เลือกได้ นอกจากนี้ ผู้ใช้ยังสามารถพิมพ์ในเวลาที่เจาะจงได้ด้วย ในอุปกรณ์เคลื่อนที่ที่เลือกเครื่องมือเลือกเวลาจะเป็นการเปิดตัวเลือกเวลา "นาฬิกา" บนอุปกรณ์เคลื่อนที่ในตัว

เดสก์ท็อป	อุปกรณ์เคลื่อนที่

GRid

แสดงรายการในเลย์เอาต์แบบหลายคอลัมน์ด้วยวิดเจ็ตตารางกริด แต่ละรายการจะแสดงรูปภาพ ชื่อ และคําบรรยายได้ ใช้ตัวเลือกการกําหนดค่าเพิ่มเติมเพื่อจัดตําแหน่งข้อความให้สัมพันธ์กับรูปภาพในรายการตารางกริด

คุณกําหนดค่ารายการตารางกริดด้วยตัวระบุที่แสดงผลเป็นพารามิเตอร์ไปยังการดําเนินการที่กําหนดไว้ในตารางกริดได้

var gridItem = CardService.newGridItem()
  .setIdentifier("item_001")
  .setTitle("A grid item")
  .setSubtitle("with a subtitle")
  .setImage(imageComponent);

var cropStyle = CardService.newImageCropStyle()
  .setImageCropType(CardService.ImageCropType.SQUARE);

var borderStyle = CardService.newBorderStyle()
  .setType(CardService.BorderType.STROKE)
  .setCornerRadius(8)
  .setStrokeColor("#00FF00FF");

var imageComponent = CardService.newImageComponent()
  .setImageUrl("https://cataas.com/cat?0.001")
  .setCropStyle(cropStyle)
  .setBorderStyle(borderStyle);

var grid = CardService.newGrid()
  .setTitle("My first grid")
  .addItem(gridItem)
  .setNumColumns(2)
  .setOnClickAction(CardService.newAction()
    .setFunctionName("handleGridItemClick"));

การจัดรูปแบบข้อความ

วิดเจ็ตข้อความบางประเภทรองรับการจัดรูปแบบ HTML ของข้อความธรรมดาได้ เมื่อสร้างเนื้อหาข้อความของวิดเจ็ตเหล่านี้ ก็แค่รวมแท็ก HTML ที่เกี่ยวข้องไว้ด้วย ระบบรองรับรูปแบบต่อไปนี้

รูปแบบ	ตัวอย่าง	ผลลัพธ์ที่แสดงผล
ตัวหนา	`<b>test</b>`	ทดสอบ
ตัวเอียง	`<i>test</i>`	ทดสอบ
ขีดเส้นใต้	`<u>test</u>`	ทดสอบ
ขีดทับ	`<s>test</s>`	~~ทดสอบ~~
สีแบบอักษร	`<font color="#ea9999">test</font>`	ทดสอบ
ไฮเปอร์ลิงก์	`<a href="http://www.google.com">google</a>`	Google
เวลา	`<time>2020-02-16 15:00</time>`	16-02-2020 15:00 น.
บรรทัดใหม่	`test <br> test`	การทดสอบ