Interaktive Karten erstellen
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Bei den meisten Add-ons müssen Nutzer nicht nur Daten ansehen, sondern auch Informationen eingeben. Wenn Sie ein kartenbasiertes Add-on erstellen, können Sie interaktive Widgets wie Schaltflächen, Symbolleistenmenüpunkte oder Kästchen verwenden, um Nutzer um Daten zu bitten, die für Ihr Add-on erforderlich sind, oder andere Interaktionssteuerungen bereitzustellen.
In den meisten Fällen machen Sie Widgets interaktiv, indem Sie sie mit bestimmten Aktionen verknüpfen und das erforderliche Verhalten in einer Rückruffunktion implementieren. Weitere Informationen finden Sie unter Add-on-Aktionen.
In den meisten Fällen können Sie ein Widget so konfigurieren, dass eine bestimmte Aktion ausgeführt wird, wenn es ausgewählt oder aktualisiert wird. Gehen Sie dazu so vor:
- Erstelle ein
Action
-Objekt und gib die Callback-Funktion, die ausgeführt werden soll, sowie alle erforderlichen Parameter an.
- Verknüpfen Sie das Widget mit der
Action
, indem Sie die entsprechende Widget-Handlerfunktion aufrufen.
- Implementieren Sie die Callback-Funktion, um das erforderliche Verhalten zu aktivieren.
Beispiel
Im folgenden Beispiel wird eine Schaltfläche festgelegt, die nach dem Klicken eine Nutzerbenachrichtigung anzeigt. Der Klick löst die notifyUser()
-Callback-Funktion mit einem Argument aus, das den Benachrichtigungstext angibt. Wenn Sie ein erstelltes ActionResponse
zurückgeben, wird eine Benachrichtigung angezeigt.
/**
* Build a simple card with a button that sends a notification.
* @return {Card}
*/
function buildSimpleCard() {
var buttonAction = CardService.newAction()
.setFunctionName('notifyUser')
.setParameters({'notifyText': 'Button clicked!'});
var button = CardService.newTextButton()
.setText('Notify')
.setOnClickAction(buttonAction);
// ...continue creating widgets, then create a Card object
// to add them to. Return the built Card object.
}
/**
* Callback function for a button action. Constructs a
* notification action response and returns it.
* @param {Object} e the action event object
* @return {ActionResponse}
*/
function notifyUser(e) {
var parameters = e.parameters;
var notificationText = parameters['notifyText'];
return CardService.newActionResponseBuilder()
.setNotification(CardService.newNotification()
.setText(notificationText))
.build(); // Don't forget to build the response!
}
Effektive Interaktionen entwerfen
Beachten Sie beim Entwerfen interaktiver Karten Folgendes:
Für interaktive Widgets ist in der Regel mindestens eine Handlermethode erforderlich, um ihr Verhalten zu definieren.
Verwenden Sie die Widget-Handler-Funktion setOpenLink()
, wenn Sie eine URL haben und sie einfach in einem Tab öffnen möchten.
So müssen Sie kein Action
-Objekt und keine Rückruffunktion definieren. Wenn Sie die URL zuerst erstellen oder andere zusätzliche Schritte ausführen müssen, bevor die URL geöffnet wird, definieren Sie eine Action
und verwenden Sie stattdessen setOnClickOpenLinkAction()
.
Wenn Sie die Widget-Handlerfunktionen setOpenLink()
oder setOnClickOpenLinkAction()
verwenden, müssen Sie ein OpenLink
-Objekt angeben, um zu definieren, welche URL geöffnet werden soll. Mit diesem Objekt können Sie auch das Öffnen und Schließen mithilfe der Enumerationen OpenAs
und OnClose
festlegen.
Es ist möglich, dass mehrere Widgets dasselbe Action
-Objekt verwenden.
Sie müssen jedoch unterschiedliche Action
-Objekte definieren, wenn Sie der Callback-Funktion unterschiedliche Parameter übergeben möchten.
Halten Sie Ihre Rückruffunktionen einfach. Damit die Add-ons reaktionsschnell bleiben, begrenzt der Kartendienst die Ausführungszeit von Callback-Funktionen auf maximal 30 Sekunden. Dauert die Ausführung länger, wird die Kartenanzeige in der Add-on-Benutzeroberfläche möglicherweise nicht richtig auf die Action
aktualisiert .
Wenn sich der Datenstatus in einem Drittanbieter-Backend aufgrund einer Nutzerinteraktion mit der Add-on-Benutzeroberfläche ändert, wird empfohlen, dass das Add-on das Bit „Status geändert“ auf true
setzt, damit der vorhandene clientseitige Cache gelöscht wird. Weitere Informationen finden Sie in der Methodenbeschreibung für ActionResponseBuilder.setStateChanged()
.
Sofern nicht anders angegeben, sind die Inhalte dieser Seite unter der Creative Commons Attribution 4.0 License und Codebeispiele unter der Apache 2.0 License lizenziert. Weitere Informationen finden Sie in den Websiterichtlinien von Google Developers. Java ist eine eingetragene Marke von Oracle und/oder seinen Partnern.
Zuletzt aktualisiert: 2024-12-22 (UTC).
[null,null,["Zuletzt aktualisiert: 2024-12-22 (UTC)."],[[["\u003cp\u003eCard-based add-ons use interactive widgets like buttons and menus to collect user input and enhance user interactions.\u003c/p\u003e\n"],["\u003cp\u003eWidgets are made interactive by linking them to actions, which trigger callback functions to execute specific behaviors when interacted with.\u003c/p\u003e\n"],["\u003cp\u003eWhen defining widget actions, you can specify a callback function and any necessary parameters using the \u003ccode\u003eAction\u003c/code\u003e object and appropriate handler functions.\u003c/p\u003e\n"],["\u003cp\u003eFor opening URLs, \u003ccode\u003esetOpenLink()\u003c/code\u003e or \u003ccode\u003esetOnClickOpenLinkAction()\u003c/code\u003e can be used with an \u003ccode\u003eOpenLink\u003c/code\u003e object to define the URL and behavior.\u003c/p\u003e\n"],["\u003cp\u003eKeep callback functions concise, as they have execution time limits, and consider using \u003ccode\u003esetStateChanged()\u003c/code\u003e to update the UI when backend data changes due to user interactions.\u003c/p\u003e\n"]]],["Card-based add-ons use interactive widgets like buttons to gather user input or provide controls. Widgets are made interactive by linking them to actions via a callback function. To configure a widget, create an `Action` object with the callback function and parameters, link it using a widget handler function, and implement the callback function. For opening URLs directly, `setOpenLink()` avoids defining an `Action`. Ensure callbacks are simple (under 30 seconds), and for backend data changes, use `setStateChanged()`.\n"],null,["# Building interactive cards\n\nMost add-ons, in addition to presenting data, require the user to enter\ninformation. When you build a card-based add-on, you can use\ninteractive [widgets](/workspace/add-ons/concepts/widgets) such as buttons,\ntoolbar menu items, or checkboxes to ask the user for data that your add-on\nneeds or provide other interaction controls.\n\nAdding actions to widgets\n-------------------------\n\nFor the most part, you make widgets interactive by linking them to\nspecific *actions* and implementing the required behavior in a callback\nfunction. See [add-on actions](/workspace/add-ons/concepts/actions) for details.\n\nIn most cases, you can follow this general procedure to configure a widget to\ntake a specific action when selected or updated:\n\n1. Create an [`Action`](/apps-script/reference/card-service/action) object, specifing the callback function that should execute, along with any required parameters.\n2. Link the widget to the `Action` by calling the appropriate [widget handler function](/workspace/add-ons/concepts/actions#widget_handler_functions).\n3. Implement the [callback function](/workspace/add-ons/concepts/actions#callback_functions) to enact the required behavior.\n\nExample\n-------\n\nThe following example sets a button that displays a user notification\nafter it is clicked. The click triggers the `notifyUser()` callback function\nwith an argument that specifies the notification text. Returning a built\n[`ActionResponse`](/apps-script/reference/card-service/action-response)\nresults in a displayed notification. \n\n /**\n * Build a simple card with a button that sends a notification.\n * @return {Card}\n */\n function buildSimpleCard() {\n var buttonAction = CardService.newAction()\n .setFunctionName('notifyUser')\n .setParameters({'notifyText': 'Button clicked!'});\n var button = CardService.newTextButton()\n .setText('Notify')\n .setOnClickAction(buttonAction);\n\n // ...continue creating widgets, then create a Card object\n // to add them to. Return the built Card object.\n }\n\n /**\n * Callback function for a button action. Constructs a\n * notification action response and returns it.\n * @param {Object} e the action event object\n * @return {ActionResponse}\n */\n function notifyUser(e) {\n var parameters = e.parameters;\n var notificationText = parameters['notifyText'];\n return CardService.newActionResponseBuilder()\n .setNotification(CardService.newNotification()\n .setText(notificationText))\n .build(); // Don't forget to build the response!\n }\n\nDesign effective interactions\n-----------------------------\n\nWhen designing interactive cards, keep the following in mind:\n\n- Interactive widgets usually need at least one handler method to define their\n behavior.\n\n- Use the [`setOpenLink()`](/workspace/add-ons/concepts/actions#setOpenLink) widget\n handler function when you have a URL and just want to open it in a tab.\n This avoids the need to define an\n [`Action`](/apps-script/reference/card-service/action) object and callback\n function. If you need to build the URL first, or take any other additional\n steps before opening the URL, define an\n [`Action`](/apps-script/reference/card-service/action) and use\n [`setOnClickOpenLinkAction()`](/workspace/add-ons/concepts/actions#setOnClickOpenLinkAction)\n instead.\n\n- When using the [`setOpenLink()`](/workspace/add-ons/concepts/actions#setOpenLink)\n or [`setOnClickOpenLinkAction()`](/workspace/add-ons/concepts/actions#setOnClickOpenLinkAction)\n widget handler functions, you need to provide an\n [`OpenLink`](/apps-script/reference/card-service/open-link)\n object to define which URL to open. You can also use this object\n to specify opening and closing behavior using the\n [`OpenAs`](/apps-script/reference/card-service/open-as) and\n [`OnClose`](/apps-script/reference/card-service/on-close) enums.\n\n- It is possible for more than one widget to use the same\n [`Action`](/apps-script/reference/card-service/action) object.\n However, you need to define different\n [`Action`](/apps-script/reference/card-service/action) objects if you want\n to provide the callback function different parameters.\n\n- Keep your callback functions simple. To keep the add-ons responsive, the\n [Card service](/apps-script/reference/card-service/card-service) limits callback functions to a maximum of 30 seconds of\n execution time. If the execution takes longer than that, your add-on UI may\n not update its card display properly in response to the\n [`Action`](/apps-script/reference/card-service/action) .\n\n- If a data status on a third-party backend changes as the result of a user\n interaction with your add-on UI, it is recommended that the add-on set\n a 'state changed' bit to `true` so that any existing client side cache is\n cleared. See the\n [`ActionResponseBuilder.setStateChanged()`](/apps-script/reference/card-service/action-response-builder#setStateChanged(Boolean))\n method description for additional details."]]