如何使用Card Services在Gmail插件中实现点击按钮弹出弹窗？

Gmail Add-on没有原生的"弹窗"组件，但可以通过两种方式模拟你需要的交互效果：层级导航Card（带交互选项）或临时通知（仅信息展示），以下是具体实现方案：

方法1：用Action触发打开新Card（模拟可交互弹窗） #

这种方式通过给按钮绑定Action，触发后打开一个新的Card作为弹窗界面，支持添加按钮、输入框等交互组件，完成后可以返回原界面。

代码示例 #

1. 构建主卡片（包含触发弹窗的按钮）

function buildMainCard() {
  const card = CardService.newCardBuilder();
  
  // 添加打开弹窗的按钮
  const openPopupBtn = CardService.newTextButton()
    .setText("打开弹窗")
    .setOnClickAction(CardService.newAction().setFunctionName("showPopupCard"));
  
  card.addSection(CardService.newCardSection().addWidget(openPopupBtn));
  return card.build();
}

2. 构建弹窗样式的Card并返回

function showPopupCard() {
  const popupCard = CardService.newCardBuilder()
    .setHeader(CardService.newCardHeader().setTitle("弹窗标题"))
    .addSection(CardService.newCardSection()
      .addWidget(CardService.newTextParagraph().setText("这里展示额外信息或说明"))
      // 添加确认操作按钮
      .addWidget(CardService.newTextButton()
        .setText("确认")
        .setOnClickAction(CardService.newAction().setFunctionName("handleConfirm")))
      // 添加关闭按钮
      .addWidget(CardService.newTextButton()
        .setText("关闭")
        .setOnClickAction(CardService.newAction().setFunctionName("closePopup"))));
  
  // 返回导航指令，打开新Card
  return CardService.newCardActionResponseBuilder()
    .setNavigation(CardService.newNavigation().pushCard(popupCard.build()))
    .build();
}

3. 关闭弹窗（返回原卡片）

function closePopup() {
  return CardService.newCardActionResponseBuilder()
    .setNavigation(CardService.newNavigation().popCard())
    .build();
}

4. 处理弹窗内的确认操作

function handleConfirm() {
  // 这里写你的业务逻辑，比如修改邮件属性、保存数据等
  // 操作完成后可以返回成功通知
  return CardService.newActionResponseBuilder()
    .setNotification(CardService.newNotification()
      .setText("操作已完成")
      .setType(CardService.NotificationType.SUCCESS))
    .build();
}

方法2：临时通知（仅展示信息） #

如果只需要给用户展示简单提示，不需要交互选项，可以用Notification组件，它会在界面顶部临时显示：

function showInfoNotification() {
  return CardService.newActionResponseBuilder()
    .setNotification(CardService.newNotification()
      .setText("这是一条临时提示信息")
      .setType(CardService.NotificationType.INFO)) // 可选SUCCESS/ERROR/INFO三种类型
    .build();
}

关键提示 #

• Gmail Add-on的界面基于Card层级结构，所谓的"弹窗"本质是层级导航的Card，通过pushCard推入新Card，popCard返回上一级。
• 可以通过调整Card的组件布局（比如紧凑排列、添加分隔线）让新Card更接近弹窗的视觉效果。
• 所有绑定Action的函数必须返回符合要求的Response对象（CardActionResponse或ActionResponse）。

内容的提问来源于stack exchange，提问作者Shiv Yadav