多數卡片式的外掛程式是以 代表不同「頁面」的資訊卡的 外掛程式介面如要提供優質的使用者體驗 應該要用簡單自然的方式 瀏覽外掛程式中的資訊卡
原本使用 Gmail 外掛程式時，系統會在使用者介面的不同資訊卡之間切換 將資訊卡推送至或從單一卡片堆疊中彈出，並使用 Gmail 顯示的堆疊頂端資訊卡
Google Workspace 外掛程式簡介
首頁和
在無關聯的資訊卡上為配合內容卡和非內容資訊卡
Google Workspace 外掛程式具有內部資訊卡堆疊
各個環境開啟外掛程式時
在主機中，對應的 homepageTrigger 會觸發，以建立第一個
堆疊首頁資訊卡 (下圖中的深藍色「首頁」資訊卡)。
如未定義 homepageTrigger，系統會建立並顯示預設卡片。
並推送至非關聯堆疊第一張資訊卡是根卡片。
外掛程式可建立其他非內容卡，並推送至 使用者瀏覽各個網頁時 您的外掛程式。外掛程式 UI 顯示堆疊中的熱門資訊卡，因此推送 堆疊的資訊卡會改變顯示方式，並從堆疊返回時彈出資訊卡 顯示在先前的資訊卡上
如果您的外掛程式
情境觸發條件
使用者輸入該情境時，觸發條件才會觸發。觸發條件函式
會建構內容資訊卡，但 UI 顯示會根據
DisplayStyle敬上
的新卡片類型如下：
- 如果
DisplayStyle為REPLACE(預設值)，內容相關資訊卡 (深橘色) 「相關情境」圖表中的資訊卡) 會取代目前採用的 顯示的資訊卡。這麼做可有效從上方開啟新的內容資訊卡堆疊 而這張內容資訊卡是根層級 關聯堆疊的資訊卡 - 如果
DisplayStyle為PEEK，UI 會改為建立顯示在 外掛程式側欄底部，疊加在目前的資訊卡上。預覽標頭 顯示新資訊卡標題並提供使用者按鈕控制項 判斷是否要查看新資訊卡如果點選「查看」 按鈕，卡片就會取代目前的卡片 (如上文中的REPLACE)。
您可以建立其他相關內容資訊卡 將他們推送至堆疊 (圖中黃色的「推送的卡片」)。更新中 資訊卡堆疊會變更外掛程式 UI，顯示最頂端的資訊卡。如果使用者 離開背景資訊時，系統會移除堆疊上的內容資訊卡，並顯示 更新到最熱門的非相關資訊卡或首頁。
如果使用者輸入的內容並未定義您的外掛程式 系統不會建立新卡片 目前的卡片仍會顯示。
Navigation 動作
下述的用意僅限於相同背景的資訊卡。例如
popToRoot()
只會彈出所有其他內容資訊卡
這不會影響首頁資訊卡。
相較之下， 按鈕是 能讓使用者從內容相關資訊卡前往 在無關聯的資訊卡上
瀏覽方法
您可以建立卡片之間的轉場效果，只要從
資訊卡堆疊Navigation
類別提供從堆疊推送及彈出資訊卡的功能。建構
想要有效瀏覽資訊卡，請設定
小工具：使用導航
動作。你可以推動或彈出
同時顯示多張資訊卡，但您無法移除初始首頁資訊卡
外掛程式啟動時，這個 Pod 會先推送至堆疊。
如要前往新資訊卡以回應使用者與小工具的互動， 步驟如下：
- 建立
Action物件 並將該函式與 回呼函式 每個 Pod 都有專屬的 IP 位址 - 依適當呼叫小工具呼叫
小工具處理常式函式
設定小工具的
Action。 - 實作進行導覽的回呼函式。這個函式
收到了動作事件物件
做為引數，且必須執行下列動作：
- 建立
Navigation物件定義資訊卡變更。單一Navigation物件可 包含多個導覽步驟，系統會依序執行 這些註解就會新增至物件 - 建立
ActionResponse物件ActionResponseBuilder類別和Navigation物件。 - 傳回已建立的
ActionResponse。
- 建立
建構導覽控制項時，您可以使用以下程式碼
Navigation 物件函式：
| 函式 | 說明 |
|---|---|
Navigation.pushCard(Card) |
將資訊卡推送至目前的堆疊。這需要先完全建構卡片。 |
Navigation.popCard() |
從分疊頂端移除一張資訊卡。相當於點選外掛程式標題列中的返回箭頭。這項操作不會移除根卡片。 |
Navigation.popToRoot() |
從堆疊中移除所有資訊卡 (根資訊卡除外)。基本上重設卡片堆疊。 |
Navigation.popToNamedCard(String) |
從堆疊中彈出資訊卡，直到到達包含指定名稱或堆疊根資訊卡的資訊卡。您可以使用 CardBuilder.setName(String) 函式指派資訊卡名稱。 |
Navigation.updateCard(Card) |
直接取代目前的卡片，讓卡片在 UI 中顯示。 |
Navigation 最佳做法
使用者互動或事件應導致系統重新轉譯資訊卡
相關資訊，使用
Navigation.pushCard()、
Navigation.popCard(),
和Navigation.updateCard()
取代現有卡片的方法。如果使用者互動或事件
結果會在不同情況下重新轉譯資訊卡
ActionResponseBuilder.setStateChanged()敬上
在這些情況下強制重新執行您的外掛程式
以下是導覽範例：
- 如果互動或事件會改變目前資訊卡的狀態 (例如：
將工作加入工作清單)，請使用
updateCard()。 - 如果互動或事件提供進一步的詳細資料或提示使用者
進一步的動作 (例如點選項目標題即可查看詳情，或是
按下按鈕來建立新的 Google 日曆活動)，請使用
pushCard()敬上 顯示新網頁，同時讓使用者使用 返回按鈕。 - 互動或事件更新在上一張資訊卡中的狀態 (例如：
利用詳細資料檢視畫面來更新項目標題)，請使用這類指令，例如
popCard()、popCard(),pushCard(previous), 和pushCard(current)即可更新先前的卡片和目前的卡片。
正在重新整理資訊卡
Google Workspace 外掛程式可讓使用者 重新整理卡片，方法是在 資訊清單。使用者透過外掛程式選單項目觸發這個重新整理：
此動作會自動新增至 homepageTrigger 或
「contextualTrigger」會觸發函式，如外掛程式資訊清單中指定
檔案（內容相關和非內容卡堆疊的「根」）。
退回多張卡片
首頁或內容觸發函式可用來建構及傳回
您要擷取
Card 物件或
Card 物件
即可開啟應用程式 UI。
如果只有一張資訊卡，會新增至非結構定義或內容堆疊 做為根資訊卡，主應用程式 UI 就會顯示出來
如果傳回的陣列包含多個已建構的引數
Card敬上
物件，代管應用程式會顯示新資訊卡，其中包含
。當使用者點選任一標題時，UI
就會顯示對應的資訊卡
使用者選取清單中的資訊卡時，該卡片就會推送至 而主應用程式就會顯示該堆疊 按鈕會將使用者導向 資訊卡標題清單
這顆「平底鞋」如果在外掛程式中不需要 或資訊卡的轉場效果但在多數情況下 可讓你直接定義資訊卡轉場效果，並讓首頁和 內容相關觸發條件函式會傳回單一資訊卡物件。
範例
以下範例說明如何透過導覽建構多張資訊卡
按鈕之間可以切換這些資訊卡可新增至
推送傳回的卡片，藉此瞭解背景資訊或非關聯堆疊
由 createNavigationCard() 在特定背景中或外部產生。
/**
* Create the top-level card, with buttons leading to each of three
* 'children' cards, as well as buttons to backtrack and return to the
* root card of the stack.
* @return {Card}
*/
function createNavigationCard() {
// Create a button set with actions to navigate to 3 different
// 'children' cards.
var buttonSet = CardService.newButtonSet();
for(var i = 1; i <= 3; i++) {
buttonSet.addButton(createToCardButton(i));
}
// Build the card with all the buttons (two rows)
var card = CardService.newCardBuilder()
.setHeader(CardService.newCardHeader().setTitle('Navigation'))
.addSection(CardService.newCardSection()
.addWidget(buttonSet)
.addWidget(buildPreviousAndRootButtonSet()));
return card.build();
}
/**
* Create a button that navigates to the specified child card.
* @return {TextButton}
*/
function createToCardButton(id) {
var action = CardService.newAction()
.setFunctionName('gotoChildCard')
.setParameters({'id': id.toString()});
var button = CardService.newTextButton()
.setText('Card ' + id)
.setOnClickAction(action);
return button;
}
/**
* Create a ButtonSet with two buttons: one that backtracks to the
* last card and another that returns to the original (root) card.
* @return {ButtonSet}
*/
function buildPreviousAndRootButtonSet() {
var previousButton = CardService.newTextButton()
.setText('Back')
.setOnClickAction(CardService.newAction()
.setFunctionName('gotoPreviousCard'));
var toRootButton = CardService.newTextButton()
.setText('To Root')
.setOnClickAction(CardService.newAction()
.setFunctionName('gotoRootCard'));
// Return a new ButtonSet containing these two buttons.
return CardService.newButtonSet()
.addButton(previousButton)
.addButton(toRootButton);
}
/**
* Create a child card, with buttons leading to each of the other
* child cards, and then navigate to it.
* @param {Object} e object containing the id of the card to build.
* @return {ActionResponse}
*/
function gotoChildCard(e) {
var id = parseInt(e.parameters.id); // Current card ID
var id2 = (id==3) ? 1 : id + 1; // 2nd card ID
var id3 = (id==1) ? 3 : id - 1; // 3rd card ID
var title = 'CARD ' + id;
// Create buttons that go to the other two child cards.
var buttonSet = CardService.newButtonSet()
.addButton(createToCardButton(id2))
.addButton(createToCardButton(id3));
// Build the child card.
var card = CardService.newCardBuilder()
.setHeader(CardService.newCardHeader().setTitle(title))
.addSection(CardService.newCardSection()
.addWidget(buttonSet)
.addWidget(buildPreviousAndRootButtonSet()))
.build();
// Create a Navigation object to push the card onto the stack.
// Return a built ActionResponse that uses the navigation object.
var nav = CardService.newNavigation().pushCard(card);
return CardService.newActionResponseBuilder()
.setNavigation(nav)
.build();
}
/**
* Pop a card from the stack.
* @return {ActionResponse}
*/
function gotoPreviousCard() {
var nav = CardService.newNavigation().popCard();
return CardService.newActionResponseBuilder()
.setNavigation(nav)
.build();
}
/**
* Return to the initial add-on card.
* @return {ActionResponse}
*/
function gotoRootCard() {
var nav = CardService.newNavigation().popToRoot();
return CardService.newActionResponseBuilder()
.setNavigation(nav)
.build();
}