إنشاء بطاقات تفاعلية
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
بالإضافة إلى عرض البيانات، تتطلب معظم الإضافات من المستخدم إدخال
معلومات. عند إنشاء إضافة مستندة إلى بطاقة، يمكنك استخدام تطبيقات مصغّرة تفاعلية، مثل الأزرار أو عناصر قائمة شريط الأدوات أو مربّعات الاختيار لطلب البيانات التي تحتاجها الإضافة من المستخدم أو توفير عناصر تحكّم أخرى في التفاعل.
في معظم الأحيان، يمكنك جعل التطبيقات المصغّرة تفاعلية من خلال ربطها بإجراءات محدّدة وتنفيذ السلوك المطلوب في دالة الاستدعاء. اطّلِع على الإجراءات الإضافية لمعرفة التفاصيل.
في معظم الحالات، يمكنك اتّباع هذه العملية العامة لضبط تطبيق مصغّر بهدف
اتّخاذ إجراء معيّن عند اختياره أو تعديله:
- أنشئ كائن
Action
،
وحدِّد دالة ردّ الاتصال التي يجب تنفيذها، بالإضافة إلى أي
مَعلمات مطلوبة.
- اربط التطبيق المصغّر بـ
Action
من خلال استدعاء
دالة معالِج التطبيق المصغّر المناسبة.
- نفِّذ دالة ردّ الاتصال
لتطبيق السلوك المطلوب.
مثال
يحدِّد المثال التالي زرًا يعرض إشعارًا للمستخدم
بعد النقر عليه. يؤدي النقر إلى تشغيل دالة ردّ الاتصال notifyUser()
مع وسيطة تحدّد نص الإشعار. يؤدي عرض رمز مُنشئ
ActionResponse
إلى عرض إشعار.
/**
* 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!
}
تصميم تفاعلات فعّالة
عند تصميم البطاقات التفاعلية، يجب مراعاة ما يلي:
تحتاج التطبيقات المصغّرة التفاعلية عادةً إلى طريقة معالج واحدة على الأقل لتحديد
سلوكها.
استخدِم الدالة setOpenLink()
widget
handler عندما يكون لديك عنوان URL وتريد فتحه في علامة تبويب فقط.
ويؤدي ذلك إلى تجنُّب الحاجة إلى تحديد كائن
Action
ودالة
ردّ الاتصال. إذا كنت بحاجة إلى إنشاء عنوان URL أولاً، أو اتّخاذ أي خطوات إضافية أخرى
قبل فتح عنوان URL، حدِّد
Action
واستخدِم
setOnClickOpenLinkAction()
بدلاً من ذلك.
عند استخدام وظائف معالِج الأداة setOpenLink()
أو setOnClickOpenLinkAction()
، عليك تقديم عنصر
OpenLink
لتحديد عنوان URL المطلوب فتحه. يمكنك أيضًا استخدام هذا العنصر
لتحديد سلوك الفتح والإغلاق باستخدام قائمتَي القيم الثابتة
OpenAs
و
OnClose
.
من الممكن أن يستخدم أكثر من تطبيق مصغّر كائن
Action
نفسه.
ومع ذلك، عليك تحديد عناصر
Action
مختلفة إذا كنت تريد
تزويد دالة ردّ الاتصال بمَعلمات مختلفة.
يجب أن تكون دوالّ الاستدعاء بسيطة. للحفاظ على استجابة الإضافات، تحدّ خدمة البطاقة من مدّة تنفيذ دوالّ ردّ الاتصال بما لا يزيد عن 30 ثانية. إذا استغرق التنفيذ وقتًا أطول من ذلك، قد لا يتم تعديل واجهة مستخدم الإضافة
لعرض البطاقة بشكل صحيح استجابةً لرمز الإجراء
Action
.
إذا تغيّرت حالة البيانات في الخلفية التابعة لجهة خارجية نتيجةً لتفاعل أحد المستخدمين
مع واجهة مستخدم الإضافة، من المستحسن أن تضبط الإضافة
القيمة true
على مثيل "تم تغيير الحالة" حتى تتم إزالة أي ذاكرة تخزين مؤقتة حالية على جانب العميل. اطّلِع على وصف الأسلوب
ActionResponseBuilder.setStateChanged()
لمعرفة تفاصيل إضافية.
إنّ محتوى هذه الصفحة مرخّص بموجب ترخيص Creative Commons Attribution 4.0 ما لم يُنصّ على خلاف ذلك، ونماذج الرموز مرخّصة بموجب ترخيص Apache 2.0. للاطّلاع على التفاصيل، يُرجى مراجعة سياسات موقع Google Developers. إنّ Java هي علامة تجارية مسجَّلة لشركة Oracle و/أو شركائها التابعين.
تاريخ التعديل الأخير: 2024-12-22 (حسب التوقيت العالمي المتفَّق عليه)
[null,null,["تاريخ التعديل الأخير: 2024-12-22 (حسب التوقيت العالمي المتفَّق عليه)"],[[["\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."]]